Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

камера html

Доброго времени суток друзья. Сегодня мы познакомимся с замечательным 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.

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

Оцените статью

Еще статьи

gitignore GIT

CSS flexbox

column css

Библиотека tkinter python

media Javascript

tkinter меню python

tkinter python рисование

clip path css

Linux команды

Комментарии

Проверочный код

Jamesmoist

Оригинальный парфюм.Доставка по России. https://youla.ru/user/581382d904559fdd2fd4a004

13:29 05-05-2019

История

    ПОДПИСКА

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

    НОВОСТИ

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