Основы потоковой передачи мультимедиа

Дерек Херман
Derek Herman
X GitHub
Ярослав Полакович
Jaroslav Polakovič
X GitHub

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

Потоковая передача мультимедиа — это способ доставки и воспроизведения медиаконтента по частям. Вместо загрузки одного файла, что может быть медленным, если не оптимизировано для сети, проигрыватель читает файл манифеста, описывающий, как целевой носитель разделяется на отдельные фрагменты данных. Медиа-фрагменты позже динамически объединяются во время выполнения — возможно, с разными битрейтами , о которых вы узнаете позже.

Имейте в виду, что для обеспечения потоковой передачи на вашем веб-сайте сервер должен поддерживать заголовок HTTP-запроса Range . Узнайте больше о заголовке Accept-Ranges в статье о тегах <video> и <source> .

Варианты использования потоковой передачи

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

  • Адаптивная потоковая передача — это когда медиа-фрагменты кодируются с несколькими битрейтами, и медиа-фрагмент самого высокого качества, соответствующий доступной в данный момент пропускной способности клиента, возвращается в медиаплеер.
  • Прямая трансляция — это когда фрагменты мультимедиа кодируются и становятся доступными в режиме реального времени.
  • Вставка мультимедиа — это когда другие медиа, такие как реклама, вставляются в поток без необходимости менять источник мультимедиа игроку.

Потоковые протоколы

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

Использование <video> для воспроизведения потока

Многие браузеры не будут воспроизводить ваш поток изначально. Хотя существует некоторая встроенная поддержка воспроизведения HLS , браузеры обычно не поддерживают встроенное воспроизведение потока DASH . Это означает, что зачастую недостаточно просто указать <source> в элементе <video> на файл манифеста.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

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

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

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

Расширения медиа-источников

К счастью, W3C определил нечто под названием Media Source Extensions (MSE), которое позволит JavaScript генерировать наши медиапотоки. Короче говоря, MSE позволяет разработчикам прикреплять объект MediaSource к элементу <video> и воспроизводить любые мультимедийные данные, загруженные в буферы, прикрепленные к экземпляру MediaSource .

Базовый пример 

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

Упрощенный пример выше иллюстрирует несколько вещей:

  • Что касается <video> , то он получает медиаданные по URL-адресу.
  • Сгенерированный URL-адрес — это просто указатель на экземпляр MediaSource .
  • Экземпляр MediaSource создает один или несколько экземпляров SourceBuffer .
  • Затем мы просто добавляем двоичные медиаданные в буфер, например, используя fetch .

Хотя эти базовые концепции просты и, безусловно, можно написать видеоплеер, совместимый с DASH и HLS, с нуля, большинство людей обычно выбирают одно из уже существующих зрелых решений с открытым исходным кодом, таких как Shaka Player , JW Player или Video. js, и это лишь некоторые из них.

Однако мы создали демонстрационную версию Media PWA под названием Kino, которая демонстрирует, как можно разработать собственный базовый веб-сайт потокового мультимедиа, обеспечивающий автономное воспроизведение мультимедиа с использованием всего лишь простого элемента <video> . В нашей дорожной карте, среди прочего, есть планы по поддержке фреймворков и управления цифровыми правами. Поэтому время от времени проверяйте обновления или запросите новую функцию. Подробнее об этом читайте в статье PWA с оффлайн-трансляцией .

Формат медиа-блоков

Долгое время DASH и HLS требовали кодирования медиа-фрагментов в разных форматах. Однако в 2016 году в HLS, формат, который также поддерживает DASH, была добавлена ​​поддержка стандартных фрагментированных файлов MP4 (fMP4).

Видеофрагменты, использующие контейнер fMP4 и кодек H.264 , поддерживаются обоими протоколами и воспроизводятся подавляющим большинством проигрывателей. Это позволяет производителям контента кодировать свои видео только один раз, что, в свою очередь, экономит время и дисковое пространство .

Чтобы добиться лучшего качества и меньшего размера файлов, вы можете захотеть закодировать несколько наборов медиа-фрагментов, используя более эффективные форматы, такие как VP9 , ​​хотя, прежде чем мы двинемся далеко вперед, вам сначала нужно научиться готовить медиа-файлы для Интернета . и это дальше.