Использование API захвата мультимедиа в браузере

В последнем предварительном выпуске Windows 10 Microsoft впервые добавила поддержку API захвата мультимедиа в браузере Edge. Эта функция основана на спецификации Media Capture and Streams, разработанной совместно в W3C Рабочей группой по веб-коммуникациям в реальном времени и Рабочей группой API устройств. Некоторые разработчики могут знать его просто как getUserMedia, который является основным интерфейсом, позволяющим веб-страницам получать доступ к устройствам захвата мультимедиа, таким как веб-камеры и микрофоны.

Вы можете найти исходный код этого проекта на моем GitHub. Кроме того, вот рабочая демонстрация, с которой вы можете поэкспериментировать. Большая часть этого кода была взята из примера Photo Capture, который команда разработчиков Edge создала на своем тестовом сайте.

Для тех из вас, кто хочет погрузиться немного глубже, у Эрика Бидельмана есть отличная статья на скалах HTML5, которая описывает легендарную историю этого API.

Набираем скорость

Метод getUserMedia() — хорошая отправная точка для понимания API Media Capture. Вызов getUserMedia() принимает MediaStreamConstraints в качестве входного аргумента, который определяет предпочтения и/или требования к устройствам захвата и захваченным медиапотокам, например, режим обращения камеры, громкость микрофона и разрешение видео.

С помощью MediaStreamConstraints вы также можете выбрать конкретное захваченное устройство, используя его идентификатор устройства, который можно получить из метода enumerateDevices(). Как только пользователь предоставит разрешение, вызов getUserMedia() вернет обещание с объектом MediaSteam, если могут быть выполнены определенные ограничения MediaStreamConstraints.

Все это без необходимости загружать плагин! В этом примере мы углубимся в API и создадим несколько аккуратных фильтров для видео и изображений, которые будем захватывать. Ваш браузер поддерживает это? Что ж, getUserMedia() существует со времен Chrome 21, Opera 18 и Firefox 17 и теперь работает в Edge.

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

Обнаружение признаков — это простая проверка существования navigator.getUserMedia. Это большой проект для проверки в каждом браузере, поэтому я бы предложил просто использовать Modernizr для проверки. Вот как это работает:

Без Modernizr, как показано в этом примере, вам пришлось бы использовать:

Видеоплеер

В нашем HTML вы можете заметить тег видео в верхней части страницы. Вы заметите, что он также настроен на автозапуск. Без этого видео навсегда зависло бы на первом кадре.

В настоящее время нет источника для медиа-набора, но мы собираемся внедрить этот источник через JavaScript в ближайшее время.

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

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

Поддержка нескольких веб-камер

Вот где все становится действительно интересно. В этом примере мы также используем метод MediaDevices.enumeratedDevices. Это собирает информацию об устройствах ввода/вывода мультимедиа, доступных в вашей системе, таких как микрофоны, камеры и динамики. Это промис, который вернет несколько свойств, в том числе вид (тип) устройства, например "видеовход", "аудиовход" или "аудиовыход. » Кроме того, он может генерировать уникальный идентификатор в виде строки с уникальным идентификатором ( videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=) и, наконец, метку для описания устройства, например Камера FaceTime HD (встроенная). Тем не менее, это все еще экспериментальная технология, и она еще даже не указана на CanIUse.com.

Установка источника на видеоплеере

В функции initalizeVideoStream вы можете видеть, что мы получаем тег видео с нашей страницы и устанавливаем его источник для потока, который мы передаем. Сам поток является большим двоичным объектом. Если браузер не поддерживает атрибут srcObject, он возвращается к созданию URL-адреса из медиапотока и устанавливает его.

Применение CSS-фильтров

Я не очень хорошо фотографирую, поэтому часто полагаюсь на фильтры, которые мне предоставляет Instagram. Но что, если бы вы могли применять свои собственные фильтры к видео или статичному изображению? Ну ты можешь! Я создал простую функцию для видеопотока, которая позволяет применять CSS-фильтры в режиме реального времени. Тот, что для изображения, почти идентичен.

В верхней части класса у меня есть массив фильтров для циклического прохождения. Они хранятся в виде строки, которая соответствует классам с одинаковыми именами в CSS. // Фильтры CSS var index = 0; фильтры var = ['оттенки серого', 'сепия', 'размытие', 'инверсия', 'яркость', 'контрастность', '']; И в CSS:

Вы можете увидеть больше примеров того, как это работает, и изменить значения в режиме реального времени на странице тест-драйва Edge.

Сохранение изображений

Копаясь в коде, вы можете увидеть некоторые другие функции, с которыми вы не сразу знакомы. Первое, что бросилось мне в глаза, это navigator.msSaveBlob. Конструктор Blob позволяет легко создавать большие двоичные объекты (по сути, файлы) и управлять ими непосредственно на клиенте. Он поддерживается в IE 10+.

msSaveBlob позволяет сохранить этот объект большого двоичного объекта (в данном случае наш снимок) на диск. У него также есть родственный метод msSaveOrOpenBlob, который также позволяет открывать изображение из браузера.

Если браузер поддерживает этот метод, он сократит объем кода, который нам нужно написать для сохранения изображения.

Куда еще мы можем пойти отсюда?

Это только начало. Мы также можем использовать WebGL с этим, что позволяет применять даже фильтры morHeye, а также иметь видео / аудиопоток в реальном времени, встроенный в интерактивную среду. Возможно, это будет мой следующий проект….
Кроме того, вы можете подключиться к Web Audio API, чтобы применить частотную модуляцию к вашему аудиовыходу. Этот образец из Web Audio Tuner хорошо это иллюстрирует. Некоторым больше нравится визуальное обучение, так что посмотрите и этот образец Microsoft.

Наконец, поскольку мобильные браузеры продолжают внедрять эту технологию, вы сможете использовать эти API-интерфейсы JavaScript для привязки к базовому оборудованию и обеспечения его работы на мобильных устройствах, независимо от платформы. Это прекрасное время для веб-разработчика, и, надеюсь, после того, как вы воспользуетесь этим, вы поймете, почему я так рад быть частью этого.

Исходный код: https://github.com/DaveVoyles/GetUserMedia-sample

Рабочий пример: http://getusermedia.azurewebsites.net/