Захват видео с камеры с помощью JavaScript и HTML5

Метод который мы будем использовать для доступа к камере:

 

navigator.getUserMedianavigator.mediaDevices.getUserMedia

 

Браузеры на данный момент поддерживают метод getUserMedia только через https протокол. Это значит, что вам нужно будет SSL сертификат для этого API.

 

Клиентские API очень быстро распространяются между десктопными и мобильными устройствами. Конечно же, мобильные API получили доступ к камере первыми, но сейчас эти методы медленно мигрируют на десктопы также.

 

Демо приложения

 

Давайте посмотрим, как просто можно получить захват фото и видео с веб камеры при помощи нескольких строк HTML и JS кода.

 

HTML

 

В идеале, нам не нужно создавать разметку для видео захвата, до тех пор, пока пользователь не подтвердил возможность использовать камеру. Однако, для примера, мы создали уже готовую разметку (которую вам нужно будет доработать и вынести ее создание на JS сторону).

 

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

 

Обратите внимание, что мы поставили разрешение в 640 на 480 пикселей. Хотя вы можете задать свои параметры.

 

JavaScript

 

Наша разметка уже готова, приступим к JS. Как видите он выглядит намного короче, нежели вам казалось.

 

// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

/* Префиксы вендоров: getUserMedia, дабы наш захват видео работал во всех браузерах
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}
*/

 

Сначала убеждаемся что браузером поддерживается метод navigator.mediaDevices.getUserMedia.

Затем, мы присвоим элементу видео аттрибут src со значением потокового видео клиентской камеры. Вызов метода play, позовлит воспроизвести видео непосредственно в элементе.

 

Вот и все что нужно, дабы соединить камеру с клиентским браузером!

 

Захват фото изображения только кажется тяжелым. Просто создайте событие клика, и нарисуйте canvas картинку из видео.

 

// Элементы для создания скриншота, точнее фото

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Триггер для захвата фото

document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
});

 

Конечно же, вы можете добавить фильтра и сделать фото более привлекательным, но мы оставим это для отдельной темы. Конечно же вы можете конвертировать canvas в изображение.

 

Теперь вы можете писать удивительные штуки. Видео чаты, аналоги скайп и вабер прямо в браузере. Это замечательно!

 

Что же, веселитесь! Задавайте вопросы ниже! Не бойтесь высказать свое мнение по видео захвату изображения... мы ждем ваших замечаний.

Источник материала ...

Дальше: Для чего современному веб маркетологу нужны аккаунты соцсетей?