Как вывести изображение с веб камеры в браузере
Предлагаю читателям «Хабрахабра» перевод статьи «Using the Media Capture API in the Browser» авторства Dave Voyles.
Сегодня я хочу поэкспериментировать с Media Capture и Streams API, разработанные совместно в Web Real-Time Communications Working Group из W3C и Device APIs Working Group. Некоторые разработчики могут знать их как getUserMedia — главный интерфейс, который позврляет веб-страницам получать доступ к таким девайсам, как веб-камеры и микрофоны.
Вы можете найти исходный код проекта в моем GitHub. Здесь есть рабочие демо для ваших экспериментов. В последнем Windows 10 preview release Microsoft впервые добавила поддержку media capture APIs в Microsoft Edge. Значительная часть кода из примера взята с Photo Capture sample, который сделала команда разработчиков Edge на их тестовом сайте.
Для тех из вас, кто хочет узнать чуть болше, Eric Bidelman написал отличную статью на HTML5 rocks, которая рассказывает историю этих API.
Метод getUserMedia() — отличная стартовая точка в изучении Media Capture API. Вызвов getUserMedia() принимает MediaStreamConstraints как аргумент, который определяет настройки и/или требования к устройствам захвата и захваченным медиапотокам, такие как громкость микрофона, разрешение видео, какая камера включена (имеется ввиду передняя или задняя — прим. переводчика).
Через MediaStreamConstraints, вы так же можете использовать определенное устройство захвата, используя его ID, который может быть получен через enumerateDevices() метод. Когда пользователь дает разрешение, getUserMedia() может вернуть обещание вместе с MediaSteam объектом, если определенный MediaStreamConstraints будет найден.
И все это без необходимости загружать плагин! В этом примере мы узнаем больше про API и сделаем несколько замечательных фильтров для видео и изображений, которые мы получим. Поддерживается ли ваш браузер? getUserMedia() был доступен с Chrome 21, Opera 18, and Firefox 17, и сейчас в Edge.
Функция обнаружения — простоя проверка существования navigator.getUserMedia. Это большая работа — проверить каждый браузер. Я советую использовать Modernizr. Вот как это работает:
Без Modernizr, как в демонстрируемом примере, используйте это:
В нашем HTML вы можете поместить тег video вверху страницы. Вы можете заметить, что он стоит на autoplay. Без этого, зависнет на первом кадре.
Здесь еще нет медиаисточника, но мы сделаем с помощью Javascript.
Новая функциональность может дать разработчикам несколько новых возможностей, но тут есть риск в отношении безопасности пользователя, следовательно первое что происходит при запуске веб-приложения — запрос разрешения пользователя на доступ к устройству захвата. getUserMedia принимает несколько параметров. Первый — объект указывающий детали и требования для каждого типа медиа, к которым вы хотите получит доступ. Для доступа к камере первый параметр должен быть , для использования и камеры и микрофона .
В initalizeVideoStream функции вы можете увидеть, что мы берем video тег со страницы и устанавливаем его источником наш стрим. Стрим сам по себе — blob. Если браузер не поддерживает srcObject атрибут, надо сделать URL для медиастрима и установить его.
Я плохой фотограф, поэтому я всегда пологаюсь на фильтры Instagram. Но что если вы сможете применять свои фильтры к фото и видео? Что ж, вы можете!
Я сделал простую функию для видеопотока, котрый позволяет мне применять CSS-фильтры в реальном времени. Она почти идентична функции для изображений.
В начале класса есть массив с названиями фильтров. Они сохранены как строка и соответствуют по названию классам CSS.
// CSS-фильтры var index = 0; var filters = ['grayscale', 'sepia', 'blur', 'invert', 'brightness', 'contrast', '']; и CSS:
Вы можете увидеть больше примеров и поизменять значения в реальном времени на Edge test drive page.
Разбираясь в коде, вы могли заметить несколько вещей, которые вам не знакомы. Первой вещью, которая притянула мой взгляд была navigator.msSaveBlob. Blob конструктор позволяет вам легко создавать и манипулировать blob прямо на клиенте. Он поддерживается в IE 10+.
msSaveBlob позволяет вам сохранить объект blob (в данном случае наше фото) на диск. У него есть брат — метод msSaveOrOpenBlob, который позволяет вам открывать изображения изнутри браузера.
Если браузер поддерживает метод, то уменьшается количество кода, необходимого для сохранения изображения.
Это только начало. Вместе с этим мы можем использовать WebGL, который позволит применить больше фильтров, или в реальном времени помещать аудио/видеопоток в интерактивное окружение. Возможно это будет моим следующим проектом…
Дополнительно вы можете привязать Web Audio API, чтобы применить частотную модуляцию к аудио потоку. Этот пример из Web Audio tuner отлично это демонстрирует. Некоторым проще воспринимать визуально, так что проверьте пример от Microsoft.
Когда мобильные браузеры начнут поддерживать эту технологию, вы сможете использовать эти API, чтобы связать основные аппаратные средства и работать с ними не обращая внимание на платформу. Сейчас отличное время для того, чтобы быть веб-разработчиком, и надеюсь, после использования этого вы поймете, почему я так рад участвовать в этом.
В этой статье покажем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на web-странице браузера.
Браузеры, как правило, не поддерживают RTSP, поэтому поток будет конвертироваться для браузера через промежуточный сервер.
Способ 1 — RTMP
RTMP протокол браузеры не поддерживают, но его поддерживает старый добрый Flash Player, который работает неплохо, хоть и не во всех браузерах, и может отобразить видеопоток.
Код плеера в этом случае будет построен на Action Script 3 и выглядеть примерно так:
rtmp://192.168.88.59/live — это адрес промежуточного сервера, который заберет RTSP видеопоток с камеры и конвертирует его в RTMP
rtsp://192.168.88.5/live.sdp — это RTSP адрес самой камеры.
Немного избыточный вариант кода плеера на Flex и AS3 доступен здесь.
Выглядит это так:
Способ 2 — RTMP с оберткой HTML5
Желающих кодить на Action Script 3 все меньше. Специально для этого придуман способ с HTML5 оберткой, которая позволяет управлять RTMP-плеером из JavaScript. В этом случае флэшка подгружается на HTML-страницу только для того чтобы отобразить картинку и выдать в динамики звук.
Полный код плеера находится здесь. А выглядит это так:
Способ 3 — RTMFP
Протокол RTMFP также работает внутри флэш плеера. Разница с RTMP в том, что RTMFP работает поверх протокола UDP и тем самым является более пригодным для получения трансляции с низкой задержкой.
Код плеера на AS3 в этом случае полностью идентичен используемому в RTMP, добавлена одна буква F в строке протокола подключения к серверу.
Для порядка дадим скриншот с RTMFP
Способ 4 — RTMFP c оберткой HTML5
Этот способ идентичен пункту 2, с той разницей, что мы при инициализации в JavaScript устанавливаем RTMFP протокол для использования в нижележащей флэшке (swf-объекте).
Способ 5 — WebRTC
В данном случае Flash не используется совсем и видеопоток проигрывается средствами самого браузера, без использования сторонних плагинов. Это работает и в Android Chrome и Android Firefox — мобильных браузерах, где Flash не установлен. WebRTC дает самую низкую задержку — менее 0.5 секунды.
Код плеера тот же:
Автоматически определяется поддержка WebRTC, и если поддерживается то поток играет по WebRTC.
Способ 6 — Websockets
WebRTC и Flash не покрывают все браузеры и платформы. Например, в браузере iOS Safari эти технологии не поддерживаются.
На iOS Safari можно доставить видеопоток по транспорту Websocket (TCP соединению между браузером и сервером). В этот туннель можно завернуть сконвертированный с RTSP видеопоток. После того, как бинарные данные придут их можно декодировать с помощью JavaScript и отрисовать на Canvas HTML5-элементе.
Именно этим занимается Websocket — плеер при работе в браузере iOS Safari, а его код снаружи выглядит также:
Это чем-то похоже на подход с флэшкой, когда под HTML5 лежит swf-элемент. В данном случае, под HTML5-страницей лежит не swf-объект, а JavaScript-приложение, которое тянет данные по вебсокетам, декодирует и отрисовывает на Canvas в нескольких потоках.
Так выглядит RTSP поток на Canvas в браузере iOS Safari
Способ 7 — HLS
При конвертации RTSP в HLS, видеопоток разбивается на сегменты, которые благополучно скачиваются с сервера и отображаются в HLS-плеере.
В качестве HLS-плеера мы используем video.js. Код плеера можно скачать здесь.
Как выглядит плеер:
Способ 8 — Android приложение, WebRTC
Приложение забирает поток с сервера по WebRTC. Задача сервера в этом случае — сконвертировать RTSP в WebRTC и скормить мобильному приложению.
Java-код плеера для Android находится здесь и выглядит так:
Тестовое мобильное приложение плеера можно установить из Google Play, а исходники приложения скачать здесь.
Так выглядит воспроизведение RTSP потока по WebRTC на планшете Asus под Android:
Способ 9 — iOS приложение, WebRTC
Приложение также как и в случае Android забирает поток с сервера по WebRTC.
А из App Store можно установить тестовое приложение, которое использует показанные выше куски кода. Его работа с RTSP-потоком выглядит так:
Результаты
Подведем итоги и объединим полученные результаты в табличку:
Способ отображения | Применение | Задержка | |
1 | RTMP | Там, где важно использование legacy — флэш клиента, Flex или Adobe Air | medium |
2 | RTMP + HTML5 | В браузерах IE, Edge, Mac Safari, если там установлен Flash Player | medium |
3 | RTMFP | Там, где важно использование legacy — флэш клиента, Flex или Adobe Air и важна низкая задержка | low |
4 | RTMFP + HTML5 | В браузерах IE, Edge, Mac Safari, если там установлен Flash Player и важна низкая задержка. | low |
5 | WebRTC | В браузерах Chrome, Firefox, Opera на десктопах и мобильных браузерах под Android, где важна real-time задержка. | real-time |
6 | Websocket | В браузерах, где нет Flash и WebRTC, но нужна средняя или низкая задержка. | medium |
7 | HLS | Во всех браузерах. Где не важна задержка. | high |
8 | Android app, WebRTC | В нативных мобильных приложениях под Android, где требуется real-time задержка. | real-time |
9 | iOS app, WebRTC | В нативных мобильных приложениях под iOS, где требуется real-time задержка. | real-time |
Для тестирования мы использовали сервер Web Call Server 5, который конвертирует RTSP поток для раздачи в 9 перечисленных направлениях.
Ссылки
Web Call Server 5 — сервер для раздачи RTSP потока
Flash Streaming — пример swf приложения, проигрывающего потоки по RTMP и RTMFP. Способы 1 и 3.
Source — исходный код swf приложения на Flex / AS3.
Player — пример web-приложения, которое воспроизводит RTSP поток по RTMP, RTMFP, WebRTC, Websocket. Способы 2,4,5,6.
Source — исходный код веб-плеера.
HLS плеер — пример web-плеера, играющего HLS. Способ 7.
Source — исходный код HLS плеера.
Android плеер WebRTC — пример мобильного приложения, которое играет поток по WebRTC. Способ 8.
Source — исходный код мобильного приложения.
iOS плеер WebRTC — пример мобильного приложения, которое играет WebRTC поток. Способ 9.
Source — исходный код мобильного приложения.
В этом разделе мы покажем вам как просматривать камеру видеонаблюдения с помощью веб-браузера, такого как IE , Firefox , Chrome или Safari . Здесь в качестве примера мы рассмотрим IE.
Рассмотренные ниже шаги базируются на предположении, что вы уже подключили вашу IP -камеру к маршрутизатору или маршрутизатору с модемом, которые подключены к Интернет.
1. Зайдите на веб-интерфейс настройки камеры, введя IP -адрес камеры в адресную строку вашего браузера. Если вы не знаете IP- адрес камеры , нажмите здесь .
3. После изменения номера порта, пройдите НАСТРОЙКИ->БАЗОВЫЕ->Система->Инициализировать. Для того, чтобы новый номер порта вступил в силу, вам необходимо выполнить перезагрузку камеры.
Затем нам на маршрутизаторе необходимо выполнить настройки проброса портов. Настройка зависит от используемой модели маршрутизатора, обратитесь к технику маршрутизатора соответственно. Здесь, в качестве примера, мы рассмотрим TL - WR 941 ND .
1. Зайдите на маршрутизатор . Перейдите Проброс портов->Виртуальные серверы и нажмите Добавить…, чтобы создать новую запись о виртуальном сервере.
2. Введите IP -адрес и порт, используемые камерой в соответствующие поля. Что касается поля Протокол, мы рекомендуем вам выбрать ВСЕ. Нажмите Сохранить для создания этой новой записи.
3. Теперь на вашем маршрутизаторе для камеры открыт порт 3333.
4. Перейдите на страницу Состояние, чтобы посмотреть WAN IP -адрес маршрутизатора.
Был ли этот FAQ полезен?
Ваш отзыв поможет нам улучшить работу сайта.
Что вам не понравилось в этой статье?
- Недоволен продуктом
- Слишком сложно
- Неверный заголовок
- Не относится к моей проблеме
- Слишком туманное объяснение
- Другое
Как мы можем это улучшить?
Спасибо
Спасибо за обращение
Нажмите здесь, чтобы связаться с технической поддержкой TP-Link.
Подписаться на рассылку Мы с ответственностью относимся к вашим персональным данным. Полный текст политики конфиденциальности доступен здесь.
Друзья! Близятся те времена, когда почти все, для чего нужен был флеш в браузере, можно будет делать и без него. Не знаю как у вас, а у меня это вызывает кучу положительных эмоций. Одним из шагов на пути вытеснения flash становится реализация в браузерах getUserMedia (Stream) javascript API. На данный момент Stream API для видеопотока реализовано в последних десктопных версиях Chrome и Opera. Firefox на подходе. Аудиопоток “coming soon”. Даже не знаю, ждать ли чего-то от IE .. по идее, он скорее умрет (..а он умрет), чем начнет догонять всех остальных.
Давайте взглянем на пример, а потом посмотрим, как это работает:
Давайте разберемся, как это работает.
Для начала нам понадобятся такие элементы, как:
- video , в котором мы будем воспроизводить поточное видео с камеры пользователя
- canvas , в который мы будем помещать кадры для сохранения
- кнопка для захвата изображения
- подсказка для юзера, который не понял, что вообще от него хотят.
Далее нам нужно спросить у пользователя разрешения использовать его видеопоток.
Как видно, в случае удачи в callback вернется объект stream, на основе которого можно получить url видеопотока. Сделать это можно с помощью window.URL.createObjectURL(stream) , которая может быть вам знакома, если вы когда-либо использовали js file API.
Давайте рассмотрим код примера в начале статьи для наглядности
Конечно, лучше и красивее создать все элементы (canvas, video, ..) динамически, но для наглядности и понимания давайте изначально расположим их статически на странице:
В примере выше мы делали захват изображений с зеркальным отображением по горизонтали. Зачем, спросите вы. Иногда можно встретить такие задачи. Это особенно актуально, когда вам нужно точно спозиционировать свое изображение по отношению к фрейму или окружающим предметам. Например, поместить свое лицо в заданную область для сканирования, совместить с предустановленной маской и т.п. В этом случае для пользователя будет удобнее, если изображение, получаемое с камеры, отображается на мониторе зеркально (по горизонтали).
Как мы этого достигли:
Во-первых, мы сделали css transform для video
Во-вторых, повернули изображение на canvas таким же образом
Если вам не нужно зеркальное отображение, просто удалите эту часть js и css
Удачи! Жду вопросов и поправок в комментариях.
28 comments on “ Захват изображения с камеры в браузере с помощью getUserMedia (с зеркальным отображением) ”
как раз вчера клиент просил такую фичу и я думал, что придется оборачивать приложение в phonegap для снабжения его большей свободой :( – А тут очень кстати твой пост! Супер!
Мы сейчас на проекте обсуждаем альтернативы нативному iOS приложению, которое нам
пока не удалось сделать достаточно стабильным. Т.к. есть разработчики которые
делают веб-приложение, то рассматриваем альтернативы типа phonegap или appcelerator.
Но ни у кого нет опыта работы с ними. Есть понимание, что простые вещи там можно
сделать, а вот запись видео/фото/аудио, отправка на сервер да так, чтобы это
работало стабильно… мы не знаем.
Может есть опыт и знание этих платформ и можете подсказать, возможно ли там такое
реализовать?
ковыряюсь с программаой.
на ноуте все работает, на смартфоне – нет.
как разрешить на смартфоне использование камеры? у меня самсунг GT-S6810 с андроидом 4.1.2
как браузеры стоят хром и мозила 5.0
эта страничка открвается, но нету диалога(или скорее я не могу его найти) о том, что есть запрос на использование камеры.
подскажите, где почитать
спасибо заранее
chrome для андроид теперь поддерживает getUserMedia (03.2014)
Немного не по теме, но близко. Нужен захват “видео” из окна браузера. Пользователь работает с корпоративным сайтом и для саппорта очень бы помогло увидеть то, что видит пользователь. Может быть подскажите в какую сторону копать и возможно ли вообще такое?
Другое решение – написать расширение для браузера. Там точно можно делать скриншоты и отправлять их куда вам надо ;)
Пробую скопировать код, всё отрабатывает, но при отправке на сервер и base64_decode получаю чёрную картинку… Что может быть не так?
перед отправкой на сервер, попробуйте вставить base64 url в img.
и посмотрите, как это выглядит, дейсвительно ли вы отправляете не черную картинку. Если все ок, ищите проблемы по пути передачи или декодирования. Конкретнее, к сожалению, ничего не посоветую.
var base64dataUrl = canvas.toDataURL(‘image/png’);
var base64dataUrl = canvas.toDataURL();
Замечательно! Как раз искал варианты для вызова камеры со смартфона из HTML+JS
Подскажите, пожалуйста! При сохранении переданного изображения BASE64 на сервере сохраняется неверный формат, который не отображается. Клиент:
Спасибо за статью. Тестировал Вашу программу на firefox и хроме под android – всё работает. Скажите подалуйста, как получить управление фокусировкой и другими настройками камеры?
сапасибо за статью. с видео все получилось и в мобильных браузерах работает.
а как можно сделать что бы аудио записывалось. ну там, например 5с после нажатия кнопки. как мне потом этот stream в файл аудио запихнуть. может подскажите?
ну или с видео: что бы не просто скриншот брался, а тоже скажем 5с видео сохранялось в файл.
Отличная штука. Осталось решить, как лучше “убить” видеозахват, когда он более не нужен на странице.
А это очень просто:
Повесить обработчик на кнопку или куда-то ещё, и прописать:
Подскажите, как получить доступ к основной камере мобильного телефона? по умолчанию включается фронтальная камера
И второй вопрос, можно ли разрешить использование камеры по умолчанию, а не спрашивать каждый раз пользователя об этом?
C начала 2016 г. ваша демка перестала работать в Chrome, в Mozille работает, в чем может быть проблема?
Спасибо за подробное описание. Надеюсь этой темой Вы занимаетесь и за прошедшие годы стали ассом. Чтобы смотреть себя в браузере много где теперь написано. Но никак не найду как можно между двумя и более людьми видеопоказ устроить. Типа один показывает, а несколько смотрят. На флэше с RED5 сделал, но скоро обещают что его не будет. Хочется на новом HTML5, а никак. Может поможете или направите в полезное место? Нашел только тех кто через свой сервер делает. А хочется независимо сделать на своем.
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента . Media Capture переопределяет поле для отправки файла если к нему добавить определённые атрибуты. Для десктопных компьютеров можно использовать метод navigator.getUserMedia() про который мы так же поговорим в этой статье.
Запись видео
Если добавить атрибут capture , то сразу откроется приложение камеры, не давая выбрать файл из библиотеки:
Можно указать режим камеры с помощью значений user — фронтальная или environment — основная:
Мультизагрузка видео
Если указать атрибут multiple , то пользователь сможет выбрать сразу несколько видео файлов из библиотеки:
Запись звука
С атрибутом capture возможность выбора готовых записей из библиотеки ограничена. На данный момент не сработало в Safari:
Изображения и фото
Фото только с камеры:
Режим камеры user — фронтальная или environment — основная:
Фото или видео
Фото и видео только с камеры:
Захват фото и видео на десктопах
отлично работает на мобильных и планшетах, но на обычном компьютере с веб-камерой у меня открывает только диалог выбора видео-файла. Как уже говорилось, чтобы захватить видео с веб-камеры можно использовать метод navigator.getUserMedia() из того же Media Streams API. Метод запрашивает у пользователя разрешение на использование до одного устройства ввода видео (например, камеры или общего экрана) и до одного устройства ввода звука (например, микрофона). Затем можно сохранить, вывести и даже наложить некоторые эффекты на полученный видео поток или сделать снимок.
В примере ниже мы добавляем тег и после разрешения на доступ к веб-камере, выведем в него видео-поток:
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, - это drag ‘n’ drop (перетаскивание). Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
Читайте также: