Захват аудио и видео в HTML5

1. Вступление
2. Дорога к getUserMedia ()
3. Раунд 1: захват HTML-контента
4. Раунд 2: элемент устройства
5. Раунд 3: WebRTC
6. Начиная
7. Обнаружение функций
8. Получение доступа к устройству ввода
9. Установка медиа ограничений (разрешение, высота, ширина)
10. Выбор источника медиа
11. Безопасность
12. Основное демо
13. Применение эффектов
14. WebGL Textures
15. Использование getUserMedia с API Web Audio
16. Заключение

Вступление

Аудио / видео захват был "Святым Граалем" веб-разработки в течение долгого времени. На протяжении многих лет нам приходилось полагаться на плагины браузера ( вспышка или же Silverlight ) чтобы сделать работу. Давай!

HTML5 на помощь. Это может быть неочевидно, но рост HTML5 принес всплеск доступа к оборудованию устройства. геолокации (GPS), Ориентация API (Акселерометр), WebGL (GPU), а API веб-аудио (аудио оборудование) являются прекрасными примерами. Эти функции являются невероятно мощными, предоставляя высокоуровневые API-интерфейсы JavaScript, которые лежат в основе аппаратных возможностей системы.

Этот учебник знакомит navigator.mediaDevices.getUserMedia () , который позволяет веб-приложениям получать доступ к камере и микрофону пользователя.

Дорога к getUserMedia ()

Если вы не знаете его историю, то способ, которым мы пришли к API getUserMedia (), - интересная история.

За последние несколько лет появилось несколько вариантов API Media Capture. Многие люди осознавали необходимость иметь доступ к нативным устройствам в Интернете, но это заставило всех и их маму создать новую спецификацию. Все стало настолько запутанным, что W3C наконец решил создать рабочую группу. Их единственная цель? Ощутите безумие! Рабочая группа по политике API устройств (DAP) было поручено объединить + стандартизировать множество предложений.

Я постараюсь обобщить, что произошло в 2011 году ...

Раунд 1: захват HTML-контента

HTML Media Capture был первый шаг DAP по стандартизации захвата медиа в сети. Он работает, перегружая <input type = "file"> и добавляя новые значения для параметра accept.

Если вы хотите, чтобы пользователи делали снимок себя с помощью веб-камеры, это возможно с помощью функции capture = camera:

<input type = "file" accept = "image / *; capture = camera">

Запись видео или аудио похожа:

<input type = "file" accept = "video / *; захват = видеокамера"> <input type = "file" accept = "audio / *; захват = микрофон">

Вроде хорошо, правда? Мне особенно нравится, что он повторно использует ввод файла. Семантически, это имеет большой смысл. Когда этот конкретный «API» не подходит, это возможность создавать эффекты в реальном времени (например, отображать данные с веб-камеры в реальном времени на <canvas> и применять фильтры WebGL). HTML Media Capture позволяет только записывать медиа-файл или делать моментальный снимок.

Служба поддержки:

• Браузер Android 3.0 - одна из первых реализаций. Проверять, выписываться это видео чтобы увидеть это в действии.
• Chrome для Android (0,16)
• Firefox Mobile 10.0
• iOS6 Safari и Chrome (частичная поддержка)

Раунд 2: элемент устройства

Многие думали, что HTML Media Capture слишком ограничен, поэтому появилась новая спецификация, которая поддерживает любые типы (будущих) устройств. Не удивительно, что дизайн потребовал нового элемента, элемент <device> , который стал предшественником getUserMedia ().

Opera была в числе первых браузеров, создавших начальные реализации захвата видео на основе элемента <device>. Вскоре после ( тот же день если быть точным), то WhatWG решила отказаться от тега <device> в пользу другого, на этот раз JavaScript API с именем navigator.getUserMedia (). Неделю спустя Opera выпустила новые сборки, которые включали поддержку обновленной спецификации getUserMedia (). Позже в том же году Microsoft присоединилась к партии, выпустив Лаборатория для IE9 поддерживая новую спецификацию.

Вот как бы выглядело <устройство>:

<device type = "media" onchange = "update (this.data)"> </ device> <автозапуск видео> </ video> <script> функция update (stream) {document.querySelector ('video'). src = stream.url; } </ script>

Служба поддержки:

К сожалению, ни один выпущенный браузер никогда не включал <устройство>. Думаю, на один API меньше, о чем беспокоиться :) У <device> были две замечательные вещи: 1.) он был семантическим, и 2.) он легко расширялся, чтобы поддерживать больше, чем просто аудио / видео устройства.

Вдохни. Этот материал движется быстро!

Раунд 3: WebRTC

Элемент <device> в конечном итоге пошел по пути Dodo.

Темпы поиска подходящего API захвата ускорились благодаря большему WebRTC (Веб-связь в реальном времени). Эта спецификация контролируется Рабочая группа W3C WebRTC , Google, Opera, Mozilla и несколько других есть реализации.

getUserMedia () относится к WebRTC, потому что это шлюз в этот набор API. Он предоставляет средства для доступа к локальной потоке камеры / микрофона пользователя.

Служба поддержки:

Функция getUserMedia () доступна с Chrome 21, Opera 18 и Firefox 17. Первоначально поддержка была предоставлена ​​методом Navigator.getUserMedia (), но это устарел ,

Теперь вы должны использовать navigator.MediaDevices.getUserMedia () метод, который является широко поддерживается ,

Начиная

С getUserMedia () мы можем наконец подключиться к веб-камере и микрофону без плагинов. Доступ к камере теперь - это звонок, а не установка. Он запекается прямо в браузере. Взволнован еще?

Обнаружение функций

Обнаружение функции - это простая проверка на наличие navigator.mediaDevices.getUserMedia:

function hasGetUserMedia () {return !! (navigator.mediaDevices && navigator.mediaDevices.getUserMedia); } if (hasGetUserMedia ()) {// Хорошо! } else {alert ('getUserMedia () не поддерживается вашим браузером'); }

Получение доступа к устройству ввода

Чтобы использовать веб-камеру или микрофон, нам нужно запросить разрешение. Параметр getUserMedia () - это объект, определяющий детали и требования для каждого типа носителя, к которому вы хотите получить доступ. Например, если вы хотите получить доступ к веб-камере, параметр должен быть {video: true}. Чтобы использовать микрофон и камеру, передайте {video: true, audio: true}:

<auto autoplay> </ video> <script> const constraints = {video: true}; const video = document.querySelector ('video'); navigator.mediaDevices.getUserMedia (ограничения). then ((stream) => {video.srcObject = stream}); </ Скрипт>

ХОРОШО. Так что здесь происходит? Захват медиа является прекрасным примером совместной работы API-интерфейсов HTML5. Он работает совместно с другими нашими друзьями по HTML5, <audio> и <video>. Обратите внимание, что мы не устанавливаем атрибут src и не включаем элементы <source> в элемент <video>. Вместо того, чтобы передавать видео URL-адрес медиа-файла, мы даем ему MediaStream с веб-камеры.

Я также говорю <video> об автозапуске, иначе он будет заморожен в первом кадре. Добавление элементов управления также работает, как вы ожидали.

Установка медиа ограничений (разрешение, высота, ширина)

Параметр getUserMedia () также можно использовать для указания дополнительных требований (или ограничений) к возвращаемому медиапотоку. Например, вместо того, чтобы просто указать, что вам нужен базовый доступ к видео (например, {video: true}), вы можете дополнительно потребовать, чтобы поток был HD:

const hdConstraints = {video: {width: {min: 1280}, высота: {min: 720}}}; navigator.mediaDevices.getUserMedia (hdConstraints). then ((stream) => {video.srcObject = stream}); ... const vgaConstraints = {видео: {ширина: {точный: 640}, высота: {точный: 480}}}; navigator.mediaDevices.getUserMedia (vgaConstraints). then ((stream) => {video.srcObject = stream});

Если разрешение не поддерживается выбранной в данный момент камерой, getUserMedia () будет отклонено с ошибкой OverconstrainedError, и пользователю не будет предложено предоставить разрешение на доступ к своей камере.

Для получения дополнительной конфигурации см. API ограничений

Выбор источника медиа

Метод navigator.mediaDevices.enumerateDevices () предоставляет информацию о доступных устройствах ввода и вывода и позволяет выбрать камеру или микрофон. (API MediaStreamTrack.getSources () устарел .)

Этот пример позволяет пользователю выбрать источник аудио и видео:

const videoElement = document.querySelector ('video'); const audioSelect = document.querySelector ('select # audioSource'); const videoSelect = document.querySelector ('select # videoSource'); navigator.mediaDevices.enumerateDevices () .then (gotDevices) .then (getStream) .catch (handleError); audioSelect.onchange = getStream; videoSelect.onchange = getStream; function gotDevices (deviceInfos) {for (let i = 0; i! == deviceInfos.length; ++ i) {const deviceInfo = deviceInfos [i]; const option = document.createElement ('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'audioinput') {option.text = deviceInfo.label || «микрофон» + (audioSelect.length + 1); audioSelect.appendChild (вариант); } else if (deviceInfo.kind === 'videoinput') {option.text = deviceInfo.label || 'camera' + (videoSelect.length + 1); videoSelect.appendChild (вариант); } else {console.log ('Найдено устройство другого типа:', deviceInfo); }}} function getStream () {if (window.stream) {window.stream.getTracks (). forEach (function (track) {track.stop ();}); } константные ограничения = {audio: {deviceId: {точный: audioSelect.value}}, видео: {deviceId: {точный: videoSelect.value}}}; navigator.mediaDevices.getUserMedia (ограничения). затем (gotStream) .catch (HandleError); } function gotStream (stream) {window.stream = stream; // сделать поток доступным для консоли videoElement.srcObject = stream; } function handleError (error) {console.error ('Error:', error); }

Проверьте Сэма Даттона отличная демка о том, как позволить пользователям выбирать источник медиа.

Безопасность

getUserMedia () может вызываться только из HTTPS-URL, localhost или файла: // URL. В противном случае обещание от звонка будет отклонено. getUserMedia () также не будет работать для вызовов между источниками из iframes: смотрите Устаревшие разрешения в кросс-исходных фреймах для более подробной информации.

Все браузеры выдают информационную панель при вызове getUserMedia (), которая дает пользователям возможность предоставлять или запрещать доступ к своей камере или микрофону. Вот диалог разрешения Chrome:

Диалог разрешений в Chrome

Это разрешение будет постоянным. Таким образом, пользователям не придется каждый раз предоставлять или отказывать в доступе. Если пользователи передумают позже, они могут обновить свои параметры доступа к камере в зависимости от источника в настройках браузера.

MediaStreamTrack активно использует камеру, которая берет ресурсы и держит камеру открытой (и свет камеры включен). Если вы больше не используете трек, обязательно вызовите track.stop (), чтобы камеру можно было закрыть.

Основное демо

Делать скриншоты

Метод ctx.drawImage (video, 0, 0) API <canvas> упрощает рисование <video> фреймов в <canvas>. Конечно, теперь, когда у нас есть видеовход через getUserMedia (), так же просто создать приложение для фотобудки с видео в реальном времени:

<video autoplay> </ video> <img src = ""> <canvas style = "display: none;"> </ canvas> <script> const captureVideoButton = document.querySelector ('# screenshot .capture-button'); const screenshotButton = document.querySelector ('# screenshot-button'); const img = document.querySelector ('# screenshot img'); const video = document.querySelector ('# скриншот видео'); const canvas = document.createElement ('canvas'); captureVideoButton.onclick = function () {navigator.mediaDevices.getUserMedia (ограничения). затем (handleSuccess) .catch (HandleError); }; screenshotButton.onclick = video.onclick = function () {canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext ('2d'). drawImage (video, 0, 0); // Другие браузеры вернутся к image / png img.src = canvas.toDataURL ('image / webp'); }; function handleSuccess (stream) {screenshotButton.disabled = false; video.srcObject = stream; } </ script>

Захват видео

Сделать скриншот

Применение эффектов

CSS фильтры

С помощью CSS фильтры , мы можем применить несколько грубых эффектов к <video>, когда он захвачен:

<video autoplay> </ video> <p> <button class = "capture-button"> Захват видео </ button> <p> <button id = "cssfilters-apply"> Применить фильтр CSS </ button> </ p > <script> const captureVideoButton = document.querySelector ('# cssfilters .capture-button'); const cssFiltersButton = document.querySelector ('# cssfilters-apply'); const video = document.querySelector ('# cssfilters video'); let filterIndex = 0; const filters = ['оттенки серого', 'сепия', 'размытие', 'яркость', 'контраст', 'оттенок-поворот', 'оттенок-поворот2', 'оттенок-поворот3', 'насыщение', 'инвертировать', '']; captureVideoButton.onclick = function () {navigator.mediaDevices.getUserMedia (ограничения). затем (handleSuccess) .catch (HandleError); }; cssFiltersButton.onclick = video.onclick = function () {video.className = filters [filterIndex ++% filters.length]; }; function handleSuccess (stream) {video.srcObject = stream; } </ script>

Захват видео

Применить фильтр CSS

WebGL Textures

Один из удивительных вариантов использования для захвата видео - визуализация живого ввода в виде текстуры WebGL. Поскольку я абсолютно ничего не знаю о WebGL (кроме сладкого), я собираюсь предложить вам дать Джерому Этьену руководство а также демонстрация взгляд. В нем говорится о том, как использовать getUserMedia () и Three.js рендерить живое видео в WebGL.

Использование getUserMedia с API Web Audio

Одна из моих мечтаний - создать AutoTune в браузере, используя не более чем открытые веб-технологии!

Chrome поддерживает ввод с микрофона в реальном времени от getUserMedia () к API веб-аудио для эффектов в реальном времени. Передача микрофонного входа в API Web Audio выглядит следующим образом:

window.AudioContext = window.AudioContext || window.webkitAudioContext; const context = new AudioContext (); navigator.mediaDevices.getUserMedia ({audio: true}). then ((stream) => {const микрофон = context.createMediaStreamSource (stream); const filter = context.createBiquadFilter (); // микрофон -> фильтр -> целевой микрофон. соединение (фильтр); filter.connect (context.destination );});

Демонстрации:

Для получения дополнительной информации см. Пост Криса Уилсона ,

Заключение

Исторически доступ к устройствам в Интернете был крепким орешком. Многие пытались, немногие преуспели , Большинство ранних идей никогда не получало широкого распространения и не распространялось за пределы проприетарной среды. Возможно, основная проблема заключалась в том, что модель безопасности в Интернете сильно отличается от родного мира. В частности, вы, вероятно, не хотите, чтобы каждый веб-сайт Джо Шмо имел произвольный доступ к вашей видеокамере или микрофону. Это было трудно получить право.

С тех пор, благодаря все более вездесущим возможностям мобильных устройств, сеть стала предоставлять более богатые функциональные возможности. Теперь у нас есть API для делать фотографии и управлять настройками камеры , записывать аудио и видео и для доступа к другим типам данных датчика, таким как местоположение, движение и ориентация устройства. Универсальный сенсорный каркас связывает все это вместе, наряду с универсальными API, чтобы позволить веб-приложениям доступ к USB а также взаимодействовать с Bluetooth устройства.

getUserMedia () была всего лишь первой волной аппаратной интерактивности.

Дополнительные ресурсы

демос

Похожие

Комментарии