Доброго времени суток друзья. Сегодня мы познакомимся с замечательным api getUserMedia который был добавлен в спецификацию html5. Именно с помощью него мы можем получить доступ к камерам на телефоне, и веб камерам на ноутбуках.

Скажу сразу что для чтобы работать с данным api нам понадобится защищенный протокол https. Через http работать не будет. Ну да ладно, поехали!

Для начала мы должны убедится что ваш браузер поддерживает данный api.

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	console.log('Ваш браузер поддерживает api getUserMedia');
}else{
	console.log('Браузер не поддерживает api getUserMedia');
}

Если поддерживает, то мы можем приступать к работе с ним.

Создадим элемент video где у нас должно будет отображаться видео с нашей камеры

<video id="video" width="50%" height="50%" ></video>

И допишем небольшой функционал:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

Здесь мы в переменную получаем наш элемент video, затем в условии проверяем что api getUserMedia поддерживается в браузере и в самом условии через объект navigator.mediaDevices мы работаем уже непосредственно с api. video:true - означает что мы спрашиваем у пользователя разрешения для доступа к его камерам.

Далее у нас возвращается объект промисе и генерируется специальная ссылка по которой наше видео будет доступно. И завершающим шагом является video.play(), в результате чего видео запись активируется.

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

Если камера не активизировалась и съемка не началась еще раз проверьте код, посмотрите что вернулось в консоль и примите решение.

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

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       var id =   navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
     	 video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }
  console.log(id);

Получить информацию об результате вы можете через возвращаемый объект promise.

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