Рассмотрим как можно работать со встроенной камерой лэптопа или смартфона при помощи 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 работа с камерой