API источника медиа

API источника медиа, формально известный как расширения для источников медиа (MSE), предоставляет функциональность, позволяющую осуществлять потоковую передачу медиа в веб-приложениях без плагинов. С помощью MSE потоки медиа можно создавать с помощью JavaScript и воспроизводить с использованием элементов <audio> и <video>.

Воспроизведение видео и аудио в веб-приложениях без плагинов доступно уже несколько лет, но базовые возможности были полезны только для воспроизведения отдельных целых треков. Например, мы не можем объединять/разбивать массивы буферов. Потоковая передача медиа до недавнего времени была областью Flash, с технологиями, такими как Flash Media Server, которые предоставляли потоки видео с использованием протокола RTMP.

С расширениями для источников медиа (MSE) ситуация меняется. MSE позволяет заменить обычный одиночный прогрессивный src URI, переданный медиа-элементам, ссылкой на объект MediaSource, который является контейнером для информации, такой как состояние готовности медиа для воспроизведения, и ссылками на несколько объектов SourceBuffer, которые представляют различные фрагменты медиа, составляющие весь поток. MSE предоставляет более точный контроль над тем, сколько и как часто содержимое извлекается, и некоторый контроль над деталями использования памяти, например, когда буферы удаляются. Это закладывает основу для создания адаптивных клиентов потоковой передачи с изменяемой скоростью передачи данных (таких как те, которые используют DASH или HLS) на основе его расширяемого API.

Создание ресурсов, совместимых с MSE в современных браузерах, является трудоёмким процессом, требующим значительного времени, вычислительной мощности и энергии. Требуется использование внешних утилит для преобразования содержимого в подходящий формат. Хотя поддержка браузерами различных контейнеров медиа с MSE неоднозначна, использование кодека видео H.264, кодека аудио AAC и контейнера формата MP4 является общим основанием. MSE также предоставляет API для обнаружения поддержки контейнера и кодека во время выполнения.

Если вам не требуется явный контроль над качеством видео со временем, скоростью извлечения контента или скоростью удаления памяти, то теги <video> и <source> могут оказаться простым и достаточным решением.

Динамическая адаптивная потоковая передача по протоколу HTTP (DASH) — это протокол, определяющий, как должна извлекаться адаптивная информация. По сути, это слой, построенный поверх MSE для создания адаптивных клиентов потоковой передачи с изменяемой скоростью передачи данных. Хотя доступны и другие протоколы (например, HTTP Live Streaming (HLS)), DASH имеет наибольшую поддержку платформ.

DASH перемещает значительную логику из сетевого протокола в логику приложения на стороне клиента, используя упрощенный протокол HTTP для извлечения файлов. Действительно, DASH можно поддерживать с помощью простого статического файлового сервера, что также отлично подходит для CDN. Это прямо противоположно предыдущим решениям потоковой передачи, которые требовали дорогостоящих лицензий для реализации собственных нестандартных протоколов клиент/сервер.

Два наиболее распространенных варианта использования DASH включают просмотр контента «по запросу» или «в прямом эфире». По запросу позволяет разработчику тратить время на транскодирование ресурсов в несколько разрешений различного качества.

Контент с профилем «в прямом эфире» может вносить задержки из-за транскодирования и вещания, поэтому DASH не подходит для реального времени связи, как это делает WebRTC. Однако он может поддерживать значительно больше подключений клиентов, чем WebRTC.

Существует множество бесплатных и открытых инструментов для транскодирования контента и подготовки его для использования с DASH, серверами DASH и библиотеками клиентов DASH, написанными на JavaScript.

Начиная с Chrome 108, возможности MSE доступны в выделенных веб-воркерах, что позволяет улучшить производительность при манипулировании MediaSource и SourceBuffer. Для воспроизведения медиа используется свойство MediaSource.handle для получения ссылки на объект MediaSourceHandle, прокси для MediaSource, который может быть передан обратно в основной поток и присоединён к медиа-элементу через его свойство HTMLMediaElement.srcObject.

См. Демонстрацию MSE-in-Workers Мэтта Воленетца для примера в реальном времени.

MediaSource

Представляет источник медиа, который будет воспроизводиться с помощью объекта HTMLMediaElement.

MediaSourceHandle

Прокси для MediaSource, который может быть передан из выделенного воркера обратно в основной поток и присоединен к элементу медиа через свойство HTMLMediaElement.srcObject.

SourceBuffer

Представляет фрагмент медиа, который будет передан в HTMLMediaElement через объект MediaSource.

SourceBufferList

Простой контейнерный список для нескольких объектов SourceBuffer.

VideoPlaybackQuality

Содержит информацию о качестве воспроизводимого видео элементом <video>, например, о количестве потерянных или повреждённых кадров. Возвращается методом HTMLVideoElement.getVideoPlaybackQuality().

HTMLMediaElement.buffered

Возвращает объект TimeRanges, который указывает на диапазоны источника медиа, которые браузер буферизовал (если таковые имеются) в момент доступа к свойству buffered.

HTMLMediaElement.seekable

Возвращает объект TimeRanges, который содержит диапазоны времени, к которым пользователь может перейти, если таковые имеются.

HTMLMediaElement.srcObject

Объект поставщика медиа, представляющий ресурс медиа для воспроизведения или воспроизведённый в текущем HTMLMediaElement, или null, если не назначен.

HTMLVideoElement.getVideoPlaybackQuality()

Возвращает объект VideoPlaybackQuality для текущего воспроизводимого видео.

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

Возвращает SourceBuffer, который создал указанный трек.

• Транскодирование ресурсов для расширений источников медиа
• Использование MSE для создания базовой службы потоковой передачи (В процессе)
• Использование MPEG DASH для создания приложения потоковой передачи (В процессе)
• Элементы <audio> и <video>.
• HTMLMediaElement, HTMLVideoElement, HTMLAudioElement.