Как вывести изображение с веб камеры в браузере
Обновлено: 07.07.2024
Давайте взглянем на пример, а потом посмотрим, как это работает:
Давайте разберемся, как это работает.
Для начала нам понадобятся такие элементы, как:
- video , в котором мы будем воспроизводить поточное видео с камеры пользователя
- canvas , в который мы будем помещать кадры для сохранения
- кнопка для захвата изображения
- подсказка для юзера, который не понял, что вообще от него хотят.
Далее нам нужно спросить у пользователя разрешения использовать его видеопоток.
Как видно, в случае удачи в callback вернется объект stream, на основе которого можно получить url видеопотока. Сделать это можно с помощью window.URL.createObjectURL(stream) , которая может быть вам знакома, если вы когда-либо использовали js file API.
Давайте рассмотрим код примера в начале статьи для наглядности
Конечно, лучше и красивее создать все элементы (canvas, video, ..) динамически, но для наглядности и понимания давайте изначально расположим их статически на странице:
В примере выше мы делали захват изображений с зеркальным отображением по горизонтали. Зачем, спросите вы. Иногда можно встретить такие задачи. Это особенно актуально, когда вам нужно точно спозиционировать свое изображение по отношению к фрейму или окружающим предметам. Например, поместить свое лицо в заданную область для сканирования, совместить с предустановленной маской и т.п. В этом случае для пользователя будет удобнее, если изображение, получаемое с камеры, отображается на мониторе зеркально (по горизонтали).
Как мы этого достигли:
Во-первых, мы сделали css transform для video
Во-вторых, повернули изображение на canvas таким же образом
Если вам не нужно зеркальное отображение, просто удалите эту часть js и css
Удачи! Жду вопросов и поправок в комментариях.
28 comments on “ Захват изображения с камеры в браузере с помощью getUserMedia (с зеркальным отображением) ”
Мы сейчас на проекте обсуждаем альтернативы нативному iOS приложению, которое нам
пока не удалось сделать достаточно стабильным. Т.к. есть разработчики которые
делают веб-приложение, то рассматриваем альтернативы типа phonegap или appcelerator.
Может есть опыт и знание этих платформ и можете подсказать, возможно ли там такое
реализовать?
chrome для андроид теперь поддерживает getUserMedia (03.2014)
перед отправкой на сервер, попробуйте вставить base64 url в img.
и посмотрите, как это выглядит, дейсвительно ли вы отправляете не черную картинку. Если все ок, ищите проблемы по пути передачи или декодирования. Конкретнее, к сожалению, ничего не посоветую.
var base64dataUrl = canvas.toDataURL();
Замечательно! Как раз искал варианты для вызова камеры со смартфона из HTML+JS
Подскажите, пожалуйста! При сохранении переданного изображения BASE64 на сервере сохраняется неверный формат, который не отображается. Клиент:
сапасибо за статью. с видео все получилось и в мобильных браузерах работает.
а как можно сделать что бы аудио записывалось. ну там, например 5с после нажатия кнопки. как мне потом этот stream в файл аудио запихнуть. может подскажите?
ну или с видео: что бы не просто скриншот брался, а тоже скажем 5с видео сохранялось в файл.
А это очень просто:
Повесить обработчик на кнопку или куда-то ещё, и прописать:
Подскажите, как получить доступ к основной камере мобильного телефона? по умолчанию включается фронтальная камера
И второй вопрос, можно ли разрешить использование камеры по умолчанию, а не спрашивать каждый раз пользователя об этом?
C начала 2016 г. ваша демка перестала работать в Chrome, в Mozille работает, в чем может быть проблема?
Спасибо за подробное описание. Надеюсь этой темой Вы занимаетесь и за прошедшие годы стали ассом. Чтобы смотреть себя в браузере много где теперь написано. Но никак не найду как можно между двумя и более людьми видеопоказ устроить. Типа один показывает, а несколько смотрят. На флэше с RED5 сделал, но скоро обещают что его не будет. Хочется на новом HTML5, а никак. Может поможете или направите в полезное место? Нашел только тех кто через свой сервер делает. А хочется независимо сделать на своем.
В этой статье покажем 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 — исходный код мобильного приложения.
Если же у вас не появляется такого окна, причин тому может быть 3: ранее вы заблокировали это уведомление, отображение вопроса об использовании камеры запрещено в настройках браузера, неправильно работает веб-камера. Рассмотрим, как устранить каждую из этих ситуаций, начиная с простой.
Перезагрузите страницу, чтобы применить изменения. После этого должно отобразиться уведомление или страница сразу отобразит захваченное изображение с вебки. В противном случае обратитесь к последнему разделу этой статьи, рассказывающей об устранении неполадок.
Способ 2: Включение разрешения для сайта
Способ 3: Включение в настройках браузера
Когда в настройках браузера запрещено использование камеры, действиями из предыдущих способов пользователь разрешит ее работу лишь одному URL. Задать глобальное значение для этой настройки можно лишь в настройках.
Opera
А вот если вам нужно включить работу веб-камеры сразу для всех URL, выполните следующее:
Яндекс.Браузер
Из-за своеобразного интерфейса почти все настройки в Яндекс.Браузере отличаются от тех, что выше. Впрочем, Способ 1 для Google Chrome, применим и к этому веб-обозревателю, поэтому его рассмотрение мы пропустим. А вот другие варианты разберем целиком.
Способ 1: Включение разрешения для сайта
Способ 2: Включение в настройках браузера
Предыдущий метод не влияет на работу этой функции на других сайтах, поэтому, чтобы отображать уведомление о разрешении работы вебки везде, необходимо изменить один из пунктов настроек.
Mozilla Firefox
В Mozilla Firefox все устроено не так, как у предыдущих трех браузеров, работающих на идентичном движке.
Устранение неполадок с обнаружением веб-камеры
Когда вы получаете уведомление о том, что камера не была обнаружена, даже если выставили все разрешения в браузере, проверьте ее на работоспособность. Возможно, на ноутбуке есть физический переключатель ее работы, а если это отдельное устройство, быть может, оно не подсоединено к компьютеру. Другие причины, по которым может не работать камера, читайте в нашем материале по ссылке ниже.
Отблагодарите автора, поделитесь статьей в социальных сетях.
В этом разделе мы покажем вам как просматривать камеру видеонаблюдения с помощью веб-браузера, такого как IE , Firefox , Chrome или Safari . Здесь в качестве примера мы рассмотрим IE.
Рассмотренные ниже шаги базируются на предположении, что вы уже подключили вашу IP -камеру к маршрутизатору или маршрутизатору с модемом, которые подключены к Интернет.
1. Зайдите на веб-интерфейс настройки камеры, введя IP -адрес камеры в адресную строку вашего браузера. Если вы не знаете IP- адрес камеры , нажмите здесь .
3. После изменения номера порта, пройдите НАСТРОЙКИ->БАЗОВЫЕ->Система->Инициализировать. Для того, чтобы новый номер порта вступил в силу, вам необходимо выполнить перезагрузку камеры.
Затем нам на маршрутизаторе необходимо выполнить настройки проброса портов. Настройка зависит от используемой модели маршрутизатора, обратитесь к технику маршрутизатора соответственно. Здесь, в качестве примера, мы рассмотрим TL - WR 941 ND .
1. Зайдите на маршрутизатор . Перейдите Проброс портов->Виртуальные серверы и нажмите Добавить…, чтобы создать новую запись о виртуальном сервере.
2. Введите IP -адрес и порт, используемые камерой в соответствующие поля. Что касается поля Протокол, мы рекомендуем вам выбрать ВСЕ. Нажмите Сохранить для создания этой новой записи.
3. Теперь на вашем маршрутизаторе для камеры открыт порт 3333.
4. Перейдите на страницу Состояние, чтобы посмотреть WAN IP -адрес маршрутизатора.
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/> . Media Capture переопределяет поле для отправки файла если к нему добавить определённые атрибуты. Для десктопных компьютеров можно использовать метод navigator.getUserMedia() про который мы так же поговорим в этой статье.
Запись видео
Если добавить атрибут capture , то сразу откроется приложение камеры, не давая выбрать файл из библиотеки:
Мультизагрузка видео
Если указать атрибут multiple , то пользователь сможет выбрать сразу несколько видео файлов из библиотеки:
Запись звука
С атрибутом capture возможность выбора готовых записей из библиотеки ограничена. На данный момент не сработало в Safari:
Изображения и фото
Фото только с камеры:
Фото или видео
Фото и видео только с камеры:
Захват фото и видео на десктопах
<input type="file" accept="video/*" capture /> отлично работает на мобильных и планшетах, но на обычном компьютере с веб-камерой у меня открывает только диалог выбора видео-файла. Как уже говорилось, чтобы захватить видео с веб-камеры можно использовать метод navigator.getUserMedia() из того же Media Streams API. Метод запрашивает у пользователя разрешение на использование до одного устройства ввода видео (например, камеры или общего экрана) и до одного устройства ввода звука (например, микрофона). Затем можно сохранить, вывести и даже наложить некоторые эффекты на полученный видео поток или сделать снимок.
В примере ниже мы добавляем тег <video> и после разрешения на доступ к веб-камере, выведем в него видео-поток:
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, - это drag ‘n’ drop (перетаскивание). Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
Читайте также: