В этой статье мы объясним, как разрешить пользователям делать снимки с веб-камеры на веб-странице через браузер. Обратите внимание, что этот метод работает только в современных браузерах, включая Chrome, Opera и Firefox.
Десктопные браузеры VS мобильные версии
На данный момент настольные браузеры сильно отстают от своих мобильных версий с точки зрения интеграции и взаимодействия с такими устройствами, как веб-камеры. На самом деле, у настольного браузера пока нет возможности получить доступ к чему-либо, кроме компьютерного проводника, использующего ввод файла, в то время как на мобильном устройстве он спросит, какое приложение использовать, чтобы отправить изображение (например, в скриншот ниже).
Настольные браузеры также могут работать с веб-камерой.
К счастью для нас, некоторые браузеры (например, Chrome, Opera и Firefox) сокращают разрыв между мобильными и настольными устройствами. Они обеспечивают простой способ обработки потока с веб-камеры через API «getUserMedia».
Отметим, что этот API, начиная с Chrome 47, требует для работы безопасного HTTPS-соединения. В связи с этим потребуется SSL-сертификат (например, Let’s Encrypt).
Как реализовать веб-камеру на веб-странице рабочего стола?
Давайте возьмем следующий пример базовой HTML-страницы с Bootstrap для макета страницы:
Теперь давайте реализуем API веб-камеры, чтобы воспроизвести его в HTML-тег видео:
Поскольку нам требуется компьютерное устройство, всплывающее окно попросит пользователя разрешить использование устройства. Если пользователь разрешит, теперь мы можем сделать снимок из этого видеопотока и отобразить его на холсте. Не забудем проверить, есть ли в потоке данные, используя readyState перед отрисовкой:
Хотите узнать больше о Вассе?
Найти нас на:
