Использование getUserMedia с API веб-аудио
В этом разделе описаны возможные усовершенствования и улучшения этого API.
У меня есть мечта: встроить AutoTune в браузер, используя только открытые веб-технологии. Она почти осуществима. Уже есть API для ввода звука с микрофона. Достаточно добавить эффекты реального времени с помощью API веб-аудио, и все будет готово. Недостает лишь интеграции этих двух решений (crbug.com/112404), хотя предварительное предложение уже разрабатывается.
Передача сигнала микрофона в API веб-аудио, возможно, будет когда-нибудь происходить так, как показано ниже.
Чтобы увидеть, как API связывается с API веб-аудио, зайдите на сайт crbug.com/112404.
HTML5 — новый подход к разметке: мультимедиа внутри
В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.
Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.
Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.
Эта система до сих пор вполне работоспособна, однако отсутствие общепринятых стандартов приводит к тому, что на разных сайтах используются разные технологии, для просмотра их медиаконтента требуются разные плагины и, самое главное, поскольку такие плагины не входят непосредственно в составе браузера, необходима их отдельная установка.
В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.
Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.
Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них — изменение идеологического подхода.
Начало работы
Благодаря наконец появилась возможность перехватывать данные с веб-камер и микрофонов непосредственно, то есть без помощи плагинов. Доступ к камере теперь осуществляется по запросу, и для этого ничего не нужно устанавливать. Эта возможность встроена в браузер, и это довольно интересно.
Включение
API появился совсем недавно, поэтому он реализован только в сборках для разработчиков Google и Opera. В Chrome 18+ его можно включить на странице .
Включение на странице браузера Chrome.
Для Opera вы можете загрузить одну из экспериментальных сборок для Android или обычных компьютеров.
Получение доступа к устройству ввода
Для доступа к веб-камере или микрофону необходимо запросить разрешение. Первый параметр метода определяет тип данных, к которым запрашивается доступ. Например, если чтобы обратиться к веб-камере, необходимо задать для него значение . Чтобы использовать одновременно камеру и микрофон, нужно указать .
Итак, что же происходит далее? Функция захвата данных мультимедиа – прекрасный пример совместной работы различных API в HTML5. Она используется вместе с другими элементами HTML5: и
Обратите внимание: мы не добавляем атрибут или элементы в тег. Вместо того чтобы указывать URL файла мультимедиа, мы передаем из объекта , который представляет веб-камеру
Мы также добавляем для тега атрибут автовоспроизведения , чтобы видео не остановилось на первом же кадре. Добавить также несложно.
Внимание! В Chrome есть неполадка: если передать в качестве значения параметра только audio, код не работает (crbug.com/112367). Та же проблема с тегом обнаружена и в Opera.. В Opera и Chrome реализованы различные версии этой спецификации, что несколько усложняет ее практическое использование на данном этапе
В Opera и Chrome реализованы различные версии этой спецификации, что несколько усложняет ее практическое использование на данном этапе.
Chrome
Ниже приведен фрагмент кода для Chrome 18+ (необходимо сначала включить эту функцию на странице ).
Opera:
Сборки Opera для разработчиков основаны на обновленной версии спецификации. Ниже приведен фрагмент кода для Opera.
Существует несколько ключевых различий.
- В не используются префиксы.
- Объект передается как первый аргумент, а не список строк.
- Значение присваивается непосредственно объекту , а не URL данного Blob. Насколько мне известно, в Opera в конечном итоге будет использоваться URL объекта Blob.
Кросс-браузерная поддержка
Ниже приведен пример (довольно ненадежный), который поддерживается в обоих браузерах.
Обязательно ознакомьтесь со статьей Майка Тейлора (Mike Taylor) и Майка Робинсона (Mike Robinson) gUM Shield. Она поможет устранить противоречия в вариантах кода для разных браузеров.
Безопасность
В будущем в браузерах при вызове метода , возможно, будет появляться информационная панель, позволяющая пользователю предоставлять или запретить доступ к камере или микрофону. К сожалению, в спецификации уделено мало внимания вопросам безопасности. Пока что такая панель с разрешениями не реализована.
Обеспечение обратной совместимости
Для тех, кто не может воспользоваться методом (например, если этот API не поддерживается или по какой-то причине произошел сбой запроса), единственное решение – использовать существующие видеофайлы.
Работа с размером видео
В этой статье все наши примеры имели одинаковый размер MediaElement, не принимая во внимание расширение видео файла. Так происходило потому что MediaElement может растягивать/сжимать контент для того чтобы вместить его в доступную ширину/высоту окна, и таково поведение по умолчанию
Это вызвано тем что свойство Stretch по умолчанию имеет значение Uniform, что в свою очередь означает что видео будет сохранять соотношения сторон.
Это полезно, когда окно больше, чем видео, но что делать, если вы не хотите, чтобы видео растягивалось? Или вам нужно, чтобы окно
подстраивалось под размеры видео, а не наоборот?
Первое, что вам нужно сделать, это отключить растяжение, установив для свойства Stretch значение None. В таком случае видео будет отрисовано в натуральную величину. Теперь, если вы хотите, чтобы окно подстроилось под размер видео — просто используйте свойство окна ResizeToContent. Вот полный пример:
Как вы можете видеть, несмотря на значение 500, установленное по умолчанию для ширины и высоты окна, его размер регулируется в соответствии с
разрешением видео (в данном случае в меньшую сторону).
Пожалуйста, обратите внимание, что это может привести к тому, что пока видео загружается размер окна будет равен нулю (будут видны только заголовок и границы). Чтобы предотвратить это, можно установить для окна свойства MinWidth и MinHeight, в соответствии с потребностями
Как проявляется?
Эта неполадка возникает на стадии открытия тех или иных файлов, при запуске программ же она возникает достаточно редко.
Причем, формат файла, зачастую, значения не имеет – это может быть как картинка, так и музыка или видеофайл.
Распространенность такое й проблемы достаточно велика и на некоторых компьютерах может возникать более или менее регулярно.
Какой же внешний вид имеет такая ошибка и как узнать о ее появлении?
При двойном клике на тот или иной файл для его открытия или запуска, ничего не происходит.
Спустя несколько секунд появляется маленькое окно с традиционным дизайном Виндовс, в котором написано о неполадках при выполнении приложения-сервера и указан адрес к файлу, открытие которого компьютер не смог выполнить.
Такое окно можно закрыть, нажав на крестик в правом верхнем углу, или на кнопку ОК
в самом окне – вне зависимости от этого файл не запустится.
Иногда окно появляется на фоне , в другие моменты на экране появляются некоторые начальные признаки запуска, но после закрытия сообщения об ошибке они исчезают.
Такая проблема может возникать как одновременно у нескольких файлов (разного или одинакового типа), так и у одного – причем сама по себе такая проблема не устранится.
Cовет!
Крайне редко при перезапуске файла после такого уведомления все же происходит. Это связано с тем, что иногда система дает временный сбой или делает ошибку, которая ошибочно распознается, как сбой приложения — сервера. Но в большинстве случаев на это рассчитывать не приходится.
Интересной особенностью данной ошибки является то, что хотя она и способна возникнуть при открытии файлов любого типа, чаще всего ее можно наблюдать все же при запуске видео.
И именно у тех пользователей, у которых не установлен какой либо функциональный проигрыватель видео, и которые пользуются стандартным , параметры и возможности работы которого оставляют желать лучшего.
Применение эффектов
Фильтры CSS
Фильтры CSS в настоящее время поддерживаются в «ночных» сборках WebKit и Chrome 18+.
С помощью фильтров CSS к элементу при захвате можно применить некоторые эффекты.
Нажмите видео, чтобы ознакомиться с фильтрами CSS
Захват видео Остановить
Текстуры WebGL
Один из замечательных примеров использования функций захвата видео – вывод получаемых в режиме реального времени данных в качестве текстуры WebGL. Я абсолютно не разбираюсь в WebGL, поэтому предлагаю вам ознакомиться с руководством и демонстрационным примером Джерома Этьена (Jerome Etienne). В нем идет речь о том, как с помощью метода и скрипта Three.js выводить потоковое видео в WebGL.
Управление MediaElement и MediaPlayer
Как вы можете видеть, если вы запустите наши предыдущие примеры, видео начнет воспроизводиться, как только проигрыватель буферизует достаточное количество данных, но это можно изменить с помощью свойства LoadedBehavior. Мы сделаем это в следующем примере, добавив пару кнопок для управления воспроизведением:
Этот пример очень похож на тот, который мы приводили в предыдущей статье для аудио, только сейчас мы сделали это для видео. У нас есть нижняя область с набором кнопок для
управления воспроизведением, и метка(label) для отображения статуса, а в верхней части экрана «притаился» MediaElement, отображающий видео.
При запуске приложения мы создаем и запускаем таймер, который отсчитывает каждую секунду. Мы используем это событие для обновления метки статуса, которая будет отображать текущий прогресс, а также вся длительность загруженного файла, как видно на скриншоте.
Каждая из трех кнопок просто вызывает соответствующий метод для MediaElement — Play(), Pause() and Stop().
Поддержка разных форматов видео и звука
Несмотря на то что HTML5 позволяет размещать на веб-страницах медиафайлы простыми стандартными тэгами, такие файлы могут быть закодированы в самые разные форматы и самыми разными кодеками. Между тем пока не существует какого-то стандартного сочетания формата (контейнера) и кодека, которое с равным успехом работало бы во всех браузерах и мобильных системах.
Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.
Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.
Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.
Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.
Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.
Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.
Единый подход к десктопным и мобильным платформам
Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств
Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.
Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.
История появления getUserMedia()
История появления API довольно интересна.
За последние несколько лет появилось несколько разных API захвата медиаданных. Многие осознали необходимость доступа к аппаратным ресурсам из веб-приложений, и это привело к созданию различных спецификаций. Ситуация окончательно запуталась, и тогда консорциум W3C решил сформировать рабочую группу. Ее единственной задачей стало навести порядок в этой сфере. Для этого рабочая группа по созданию правил для API устройств (DAP) должна была объединить и стандартизировать существующие предложения.
Сейчас можно подвести итоги того, что было сделано в 2011 г.
Этап 1: захват медиаданных в HTML
Спецификация захвата медиаданных в HTML стала первым стандартом захвата мультимедийной информации в веб-приложениях, созданным группой DAP. Его работа основана на переопределении функции и добавлении новых значений для параметра .
Чтобы дать пользователям возможность сфотографировать себя на веб-камеру, можно добавить строку .
Точно так же происходит запись видео и звука.
Это довольно удобно. В частности, мне нравится, что в этом методе используется файловый ввод. С точки зрения семантики это имеет большое значение. Единственный недостаток этого API – невозможность добавления эффектов в реальном времени (например, нельзя выводить данные с веб-камеры на элемент и применять фильтры WebGL). С помощью захвата медиаданных в HTML можно только записывать файлы мультимедиа или делать снимки.
Поддержка
- Браузер Android 3.0 – один из первых примеров реализации этого API. Чтобы увидеть его в действии, посмотрите это видео.
- Chrome для Android (0.16)
Я не рекомендую использовать этот API, если только вы не работаете с одним из перечисленных выше браузеров. Разработчики постепенно переходят к , и в перспективе вряд ли кто-нибудь захочет заниматься реализацией захвата медиаданных с помощью HTML.
Этап 2: элемент устройства
Многие считали, что в API захвата медиаданных в HTML слишком много ограничений, поэтому появилась новая спецификация, поддерживающая любые устройства, включая те, что появятся в будущем. Неудивительно, что эта разработка потребовала введения нового элемента , который стал шагом на пути к созданию API .
Одним из первых браузеров, в котором была реализована поддержка захвата видео с помощью элемента , стала Opera. Вскоре после этого (точнее, в тот же день), сообщество WhatWG решило отказаться от тега в пользу более успешного API JavaScript под названием . Через неделю в новую сборку Opera была добавлена поддержка обновленной спецификации . В конце этого года компания Майкрософт присоединилась к разработке, выпустив экспериментальный пакет для IE9 с поддержкой этой спецификации.
Вот так мог выглядеть тег :
Поддержка
К сожалению, тег не был реализован ни в одном браузере. Таким образом, его можно не принимать в расчет, хотя у тега все же было два преимущества. Во-первых, он имел семантический характер, а во-вторых, позволял не ограничиваться аудио- и видеоустройствами.
Переходим к следующей технологии.
Этап 3: WebRTC
Элемент в конечном счете полностью исчез.
В последние несколько месяцев попытки создания API для захвата данных мультимедиа начали приносить ощутимые результаты – во многом благодаря проекту WebRTC (передача данных в Интернете в реальном времени). Разработку этой спецификации курирует специальная рабочая группа W3C WebRTC. В настоящее время над реализацией ее поддержки в браузерах работают такие известные компании, как Google, Opera, Mozilla, а также ряд других.
WebRTC имеет прямое отношение к – первому API в этом наборе. Эта технология обеспечивает доступ к потоковым данным с микрофона и видеокамеры.
Поддержка
WebRTC можно включить в браузере Chrome 18.0.1008 и его более поздних версиях на странице .
JavaScript-интеграция¶
JavaScript-интеграция предназначена в первую очередь для использования со сторонними сервисами, такими как Shopify,
Blogspot или Tilda, где вы не имеете возможности загрузить PHP-файл для PHP-интеграции. Схема прохождения трафика
аналогична обратной PHP-интеграции: посетители сначала попадают на белую страницу, нежелательные на ней и остаются,
а целевым показывается контент.
Схема прохождения трафика
Вам также потребуется загрузить и разместить на сервере наш PHP-скрипт , но его конкретное расположение
не имеет значения, так как файл будет подключен к белой странице через HTML-тег .
Важно использовать HTTPS для подключения файла , если сайт, с которым вы делаете интеграцию, работает
по протоколу HTTPS (подавляющее большинство современных сайтов использует HTTPS). Попытка подключить
к HTTPS-сайту при помощи обычной HTTP-ссылки приведет к ошибке
mixed content (смешанное содержимое),
и клоакинг не будет работать
Как и PHP-интеграция, JavaScript-интеграция также поддерживает несколько режимов:
- В режиме JavaScript-редиректа благонадежные по мнению наших фильтров посетители будут перенаправлены на страницу контента
при помощи JavaScript-редиректа методом . Это означает, что URL в адресной строке изменится.
Если вы не знаете, какой режим выбрать, то выбирайте JavaScript-редирект. - В режиме отображения в iframe целевые посетители увидят контент-страницу в iframe
без редиректа, то есть iframe будет наложен поверх белой страницы. Имейте в виду, что сайты могут запретить
отображение своего контента в iframe при помощи заголовка ответа
X-Frame-Options. - В пассивном режиме обновляется статистика Adspect, но никаких действий не предпринимается — посетитель останется
на белой странице. Этот режим похож на Google Analytics и предназначен для пассивного сбора аналитической информации
по ботам в трафике в тех случаях, когда клоакинг не требуется.
Несколько одинаковых файлов могут использоваться параллельно для защиты нескольких страниц, при этом не мешая
друг другу, если не считать общей статистики.
Выводы
В целом удаленный доступ к устройствам через Интернет всегда был достаточно сложной задачей. Многие пробовали решить ее, но мало кому удавалось это сделать. Большинство решений никогда не выходило за рамки проприетарного программного обеспечения, поэтому они не получили широкого распространения.
Настоящая проблема заключается в том, что модель безопасности для веб-приложений сильно отличается от традиционной. Лично мне не хотелось бы, чтобы доступ к моей камере был у первого попавшегося сайта. Решить этот вопрос довольно сложно.
Объединенные платформы, например PhoneGap, помогли раздвинуть границы возможного, но это лишь начало, и такое решение является временным. Чтобы веб-приложения могли успешно конкурировать с традиционными решениями, им необходим доступ к аппаратному обеспечению компьютеров.
API является первой попыткой доступа к новому типу устройств. Надеюсь, что в ближайшем будущем появятся и другие решения.
