Публикация описывает способ получения доступ к камере с помощью navigator.getUserMedianavigator.mediaDevices.getUserMedia.
Разработчики браузеров недавно
добавили ограничение для использования getUserMedia – теперь функция может
работать только через https.
Поэтому вам необходим серитфикат SSL для того что бы этот код работал.
Клиентское API для мобильных и настольных устройств
быстро предоставляет одинаковое API.
Конечно наши мобильные устройства получают доступ к некоторому API быстрее,
но те же API мелденно добираются и до десктопа. Одним из таких API является
getUserMedia API,
которое предоставляет доступ разработчику к камере пользователя. Давайте
взглянем на то как это работает.
HTML
Пожалуйста обратите внимание на мои комментарии в коде:
<!--
Ideally these elements aren't created until it's
confirmed that the
client supports video/camera, but for the sake of illustrating
the
elements involved, they are created with markup (not
JavaScript)
-->
<video id="video"
width="640" height="480" autoplay></video
<button
id="snap">Snap Photo</button
<canvas
id="canvas" width="640"
height="480"></canva
Каждый из этих элементов должен быть создан только после
того, как получено подтверждение поддержки камеры, но что бы упростить данную
публикацию, я просто хочу показать как может выглядеть подобная разметка.
Обратите внимание что мы работаем с разрешением 640х480.
Java Script
Раз уж HTML мы определили, количество кода JavaScript будет
меньше чем вы это себе представляете:
// 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();
});
}
/* Legacy code below:
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,простой метод устанавливает в качестве источника для
виде элемента камеру пользователя. Вызов метода play – запускает
процесс стриминга видео. Это все что нужно для того что бы присоединить вашу камеру
к браузеру!
Получение фото сложнее только на
словах. Просто добавьте обработчик клика на кнопку и нарисуйте картинку из видео.
// Elements for taking the
snapshot
var canvas =
document.getElementById('canvas');
var context =
canvas.getContext('2d');
var video =
document.getElementById('video');
// Trigger photo take
document.getElementById("snap").addEventListener("click",
function() {
context.drawImage(video, 0, 0, 640, 480);
});
Разумеется вы можете добавить
какие-нибудь крутые фильтры для того что бы улучшить картинку и заработать
миллион долларов, но это я оставлю для следующего раза. Как минимум вы можете преобразовать canvas в
картинку. А о фильтрах я поговорю в
другой раз.
Имея возможность получать доступ
к камере из браузера без необходимости использования каких-либо сторонних
библиотек – это очень здорово. В купе с использованием canvas и
небольшого фрагмента JavaScript,
камера становится еще проще для использования. И не только камера, но из-за
того что canvas очень гибкий инструмент, мы может добавить какие-нибудь фильтры
для изображения в стиле Instagram.
Сейчас же, возможность использовать камеру в браузере переносит нас на мили
вперед. Получайте удовольствие от фотографирования себя в браузере.
Источник: https://davidwalsh.name/browser-camera
