Javascript работа с камерой

Рассмотрим как можно работать со встроенной камерой лэптопа или смартфона при помощи Javascript: javascript работа с камерой.

Если в вашем смартфоне Doogee сломалась камера, рекомендую обратиться к специалистам, которые выполнят ремонт Doogee в кратчайшие сроки.

Требование к защищенности соединения

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

Развитие производительности техники, и надежности Javascript привело к тому, что теперь появляется огромное количество API для работы непосредственно с устройством при помощи Javascript, один из таких API – getUserMedia, которые предоставляет нам доступ к камере устройства, и его мы сегодня будем использовать.

Обратите внимание, что этот API позволяет получить доступ к камере только после получения подтверждения от пользователя (браузер сам спросит у пользователя, можно ли разрешить доступ этому сайту к камере). Поэтому сделать шпионский скрипт и видеть видео с камеры без разрешения пользвателя не получится.

HTML часть

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Сделать снимок</button>
<canvas id="canvas" width="640" height="480"></canvas>

По логике вещей эти элементы выше должны создаваться уже после получения разрешения на доступ к камере, но в целях чистоты эксперимента, в этом примере добавим их сразу.

Javascript часть: Javascript работа с камерой

Да, JS часть немного сложнее, чем HTML, но при этом всё-равно вы будете поражены тем, насколько она маленькая и простая.

var video = document.getElementById('video');

// Получаем доступ к камере
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Не включаем аудио опцией `{ audio: true }` поскольку сейчас мы работаем только с изображениями
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = stream;
        video.play();
    });
}

Готово. Теперь в объекте video выводится изображение с камеры устройства.

Делаем снимок

В HTML коде мы добавили кнопку «Сделать снимок». Давайте делать снимок.

Для этого у нас будет, пожалуй, ещё более простой код на Javascript.

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);
});

Как видите, просто при нажатии на кнопку, мы отрисовываем на канвасе содержимое видео в данный момент времени.

Вот и всё, это было элементарно! Мы научились на Javascript работа с камерой