Адаптивне потокове відео за допомогою Dash.js у React

Нещодавно мені доручили створити відеоролики, які потрібно було плавно відтворювати в повільній мережі або на низькопродуктивних пристроях. Я почав з нативного HTML5. <video>тег, але швидко наштовхується на перешкоду — він просто не працює, коли з’єднання повільне або пристрої мають недостатню потужність.

Після деяких досліджень я виявив, що адаптивна потокова передача даних – це саме те рішення, яке мені було потрібно. Але ось що засмучує: знайти вичерпний посібник для початківців було дуже важко. Ресурси на MDN та інших веб-сайтах були корисними, але їм бракувало вичерпного посібника, який я шукав.

Ось чому я пишу цю статтю: щоб надати вам покрокове керівництво, яке я шкода, що не знайшов. Я поєднаю написання скриптів FFmpeg, кодування відеофайлів та реалізацію відеоплеєра, сумісного з DASH ( Dash.js ), за допомогою прикладів коду, які ви можете використовувати.

Вихід за межі нативного HTML5 <video>Тег

Ви можете запитати, чому не можна просто покладатися на HTML <video>елемент. Для цього є вагома причина. Давайте порівняємо різницю між рідним <video>елемент та адаптивне потокове відео в браузерах.

Прогресивне завантаження 

Під час прогресивного завантаження ваш браузер лінійно завантажує відеофайл із сервера через HTTP та починає відтворення, якщо буферизує достатньо даних. Це поведінка за замовчуванням. <video>елемент.

<video src="rabbit320.mp4" />

Під час відтворення відео перевірте вкладку мережі у вашому браузері, і ви побачите кілька запитів із 206 Partial Contentкод стану.

Якщо сервер або браузер не підтримує запити діапазону, весь відеофайл буде завантажено одним запитом, повертаючи 200 OKкод стану. У такому разі відтворення відео може розпочатися лише після завершення завантаження всього файлу.

Проблеми? Якщо у вас повільне з’єднання під час спроби переглянути відео високої роздільної здатності, вам доведеться довго чекати, перш ніж почнеться відтворення.

Адаптивна потокова передача бітрейту

Замість того, щоб відтворювати один відеофайл, потокове передавання з адаптивним бітрейтом (ABR) розділяє відео на кілька сегментів з різним бітрейтом та роздільною здатністю. Під час відтворення алгоритм ABR автоматично вибирає сегмент найвищої якості, який можна вчасно завантажити для плавного відтворення, залежно від вашого мережевого підключення, пропускної здатності та інших можливостей пристрою. Він постійно налаштовується, щоб адаптуватися до змінних умов.

Ця магія відбувається завдяки двом ключовим технологіям браузера:

• Розширення джерела медіа (MSE)
  Це дозволяє передавати об'єкт MediaSource до srcатрибут у <video>, що дозволяє надсилати кілька об'єктів SourceBuffer , які представляють відеосегменти.

<video src="blob:https://example.com/6e31fe2a-a0a8-43f9-b415-73dc02985892" />

• API медіа-можливостей
  Він надає інформацію про можливості декодування та кодування відео вашим пристроєм, що дозволяє ABR приймати обґрунтовані рішення щодо того, яку роздільну здатність забезпечувати.

Разом вони забезпечують основну функціональність ABR, обслуговуючи відеофрагменти, оптимізовані для обмежень вашого пристрою, в режимі реального часу.

Протоколи потокової передачі: MPEG-DASH проти HLS

Як згадувалося вище, для адаптивної потокової передачі медіафайлів відео розділяється на фрагменти з різним рівнем якості в різні моменти часу. Нам потрібно спростити процес адаптивного перемикання між цими сегментами в режимі реального часу. Для досягнення цього потокова передача ABR спирається на певні протоколи. Два найпоширеніші протоколи ABR:

• MPEG-DASH,
• Пряма трансляція HTTP (HLS).

Обидва ці протоколи використовують HTTP для надсилання відеофайлів. Отже, вони сумісні з веб-серверами HTTP.

Ця стаття зосереджена на MPEG-DASH. Однак, варто зазначити, що DASH не підтримується пристроями чи браузерами Apple, як згадувалося у статті Mux .

MPEG-DASH

MPEG-DASH забезпечує адаптивну потокову передачу через:

• Файл опису медіапрезентації (MPD)
  Цей XML-файл маніфесту містить інформацію про те, як вибирати та керувати потоками на основі адаптивних правил.
• Сегментовані медіафайли
  Відео- та аудіофайли поділяються на сегменти з різною роздільною здатністю та тривалістю за допомогою кодеків та форматів, сумісних з MPEG-DASH.

На стороні клієнта відеоплеєр, сумісний із DASH, зчитує файл MPD та постійно контролює пропускну здатність мережі. На основі доступної пропускної здатності плеєр вибирає відповідний бітрейт та запитує відповідний відеофрагмент. Цей процес повторюється протягом усього відтворення, забезпечуючи плавну та оптимальну якість.

Тепер, коли ви розумієте основи, давайте створимо наш адаптивний відеоплеєр!

Кроки для створення адаптивного бітрейт-плеєра потокового відео

Ось план:

1. Перекодуйте відео MP4 в аудіо- та відеоверсії з різною роздільною здатністю та бітрейтом за допомогою FFmpeg.
2. Згенеруйте MPD-файл за допомогою FFmpeg.
3. Обслуговувати вихідні файли з сервера.
4. Створіть відеоплеєр, сумісний з DASH, для відтворення відео.

Встановлення FFmpeg

Для користувачів macOS встановіть FFmpeg за допомогою Brew, виконавши таку команду у своєму терміналі:

brew install ffmpeg

Генерація аудіовідтворення 

Далі запустіть наступний скрипт, щоб витягти аудіодоріжку та закодувати її у форматі WebM для сумісності з DASH:

ffmpeg -i "input_video.mp4" -vn -acodec libvorbis -ab 128k "audio.webm"

• -i "input_video.mp4": Визначає вхідний відеофайл.
• -vn: Вимикає відеопотік (вихід лише аудіо).
• -acodec libvorbisВикористовує кодек libvorbis для кодування аудіо.
• -ab 128k: Встановлює бітрейт аудіо на 128 кбіт/с .
• "audio.webm": Визначає вихідний аудіофайл у форматі WebM.

Генерація відеовізуалізацій 

Запустіть цей скрипт, щоб створити три відеоверсії з різною роздільною здатністю та бітрейтом. Найбільша роздільна здатність має відповідати розміру вхідного файлу. Наприклад, якщо вхідне відео має роздільну здатність 576×1024 з частотою 30 кадрів на секунду (fps), скрипт генерує версії, оптимізовані для вертикального відтворення відео.

ffmpeg -i "input_video.mp4" -c:v libvpx-vp9 -keyint_min 150 -g 150 \
-tile-columns 4 -frame-parallel 1 -f webm \
-an -vf scale=576:1024 -b:v 1500k "input_video_576x1024_1500k.webm" \
-an -vf scale=480:854 -b:v 1000k "input_video_480x854_1000k.webm" \
-an -vf scale=360:640 -b:v 750k "input_video_360x640_750k.webm"

• -c:v libvpx-vp9 Використовує libvpx-vp9 як відеокодер VP9 для WebM.
• -keyint_min 150і -g 150: Встановіть інтервал ключових кадрів 150 кадрів (приблизно кожні 5 секунд при 30 кадрах/с). Це дозволяє перемикати бітрейт кожні 5 секунд.
• -tile-columns 4і -frame-parallel 1Оптимізуйте продуктивність кодування за допомогою паралельної обробки.
• -f webm: Визначає вихідний формат WebM.

У кожному виконанні:

• -an: Виключає аудіо (вихід лише відео).
• -vf scale=576:1024: Масштабує відео до роздільної здатності 576x1024 пікселів.
• -b:v 1500k: Встановлює бітрейт відео на 1500 кбіт/с .

Як вихідний формат обрано WebM, оскільки вони менші за розміром та оптимізовані, але широко сумісні з більшістю веббраузерів.

Згенерувати файл маніфесту MPD

Об’єднайте відео та аудіодоріжку у файл маніфесту MPD, сумісний із DASH, виконавши наступний скрипт:

ffmpeg \
  -f webm_dash_manifest -i "input_video_576x1024_1500k.webm" \
  -f webm_dash_manifest -i "input_video_480x854_1000k.webm" \
  -f webm_dash_manifest -i "input_video_360x640_750k.webm" \
  -f webm_dash_manifest -i "audio.webm" \
  -c copy \
  -map 0 -map 1 -map 2 -map 3 \
  -f webm_dash_manifest \
  -adaptation_sets "id=0,streams=0,1,2 id=1,streams=3" \
  "input_video_manifest.mpd"

• -f webm_dash_manifest -i "…": Визначає входи, між якими відеоплеєр ASH динамічно перемикатиметься залежно від стану мережі.
• -map 0 -map 1 -map 2 -map 3Включає всі відео (0, 1, 2) та аудіо (3) у фінальний маніфест.
• -adaptation_setsГрупує потоки в набори адаптації:
  • id=0,streams=0,1,2: Групує відеоверсії в один набір адаптацій.
  • id=1,streams=3: Призначає аудіодоріжку окремому набору адаптації.

Отриманий файл MPD ( input_video_manifest.mpd) описує потоки та забезпечує адаптивну потокову передачу бітрейту в MPEG-DASH.

<?xml version="1.0" encoding="UTF-8"?>
<MPD
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="urn:mpeg:DASH:schema:MPD:2011"
  xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011"
  type="static"
  mediaPresentationDuration="PT81.166S"
  minBufferTime="PT1S"
  profiles="urn:mpeg:dash:profile:webm-on-demand:2012">

  <Period id="0" start="PT0S" duration="PT81.166S">
    <AdaptationSet
      id="0"
      mimeType="video/webm"
      codecs="vp9"
      lang="eng"
      bitstreamSwitching="true"
      subsegmentAlignment="false"
      subsegmentStartsWithSAP="1">
      
      <Representation id="0" bandwidth="1647920" width="576" height="1024">
        <BaseURL>input_video_576x1024_1500k.webm</BaseURL>
        <SegmentBase indexRange="16931581-16931910">
          <Initialization range="0-645" />
        </SegmentBase>
      </Representation>
      
      <Representation id="1" bandwidth="1126977" width="480" height="854">
        <BaseURL>input_video_480x854_1000k.webm</BaseURL>
        <SegmentBase indexRange="11583599-11583986">
          <Initialization range="0-645" />
        </SegmentBase>
      </Representation>
      
      <Representation id="2" bandwidth="843267" width="360" height="640">
        <BaseURL>input_video_360x640_750k.webm</BaseURL>
        <SegmentBase indexRange="8668326-8668713">
          <Initialization range="0-645" />
        </SegmentBase>
      </Representation>
      
    </AdaptationSet>
    
    <AdaptationSet
      id="1"
      mimeType="audio/webm"
      codecs="vorbis"
      lang="eng"
      audioSamplingRate="44100"
      bitstreamSwitching="true"
      subsegmentAlignment="true"
      subsegmentStartsWithSAP="1">
      
      <Representation id="3" bandwidth="89219">
        <BaseURL>audio.webm</BaseURL>
        <SegmentBase indexRange="921727-922055">
          <Initialization range="0-4889" />
        </SegmentBase>
      </Representation>
      
    </AdaptationSet>
  </Period>
</MPD>

Після виконання цих кроків у вас буде:

1. Три відеоверсії ( 576x1024, 480x854, 360x640),
2. Одна аудіодоріжка, і
3. Файл маніфесту MPD.

input_video.mp4
audio.webm
input_video_576x1024_1500k.webm
input_video_480x854_1000k.webm
input_video_360x640_750k.webm
input_video_manifest.mpd

Оригінальне відео input_video.mp4також слід зберегти, щоб використовувати як резервне джерело відео надалі.

Обслуговувати вихідні файли 

Ці вихідні файли тепер можна завантажити до хмарного сховища (наприклад, AWS S3 або Cloudflare R2) для відтворення. Хоча їх можна обслуговувати безпосередньо з локальної папки, я наполегливо рекомендую зберігати їх у хмарному сховищі та використовувати CDN для кешування ресурсів для кращої продуктивності. Як AWS, так і Cloudflare підтримують запити HTTP-діапазону одразу після встановлення.

Створення відеоплеєра, сумісного з DASH, у React

Ніщо так не допомагає зрозуміти, як все працює, як реальний приклад. Існують різні способи реалізації відеоплеєра, сумісного з DASH, але я зосереджуся на підході з використанням React.

npm i dashjs

Далі створіть компонент під назвою <DashVideoPlayer />та ініціалізувати екземпляр Dash MediaPlayer , вказавши його на MPD-файл під час монтування компонента.

Функція зворотного виклику ref виконується після монтування компонента, а всередині функції зворотного виклику, playerRefпосилатиметься на фактичний екземпляр Dash MediaPlayer та буде пов’язаний зі слухачами подій. Ми також включаємо оригінальну URL-адресу MP4 у <source>елемент як резервний варіант, якщо браузер не підтримує MPEG-DASH.

Якщо ви використовуєте маршрутизатор програм Next.js , не забудьте додати ‘use client’директива для ввімкнення гідратації на стороні клієнта, оскільки відеоплеєр ініціалізується лише на стороні клієнта.

Ось повний приклад:

import dashjs from 'dashjs'
import { useCallback, useRef } from 'react'

export const DashVideoPlayer = () => {
  const playerRef = useRef()

  const callbackRef = useCallback((node) => {
    if (node !== null) {  
      playerRef.current = dashjs.MediaPlayer().create()

      playerRef.current.initialize(node, "https://example.com/uri/to/input_video_manifest.mpd", false)
  
      playerRef.current.on('canPlay', () => {
        // upon video is playable
      })
  
      playerRef.current.on('error', (e) => {
        // handle error
      })
  
      playerRef.current.on('playbackStarted', () => {
        // handle playback started
      })
  
      playerRef.current.on('playbackPaused', () => {
        // handle playback paused
      })
  
      playerRef.current.on('playbackWaiting', () => {
        // handle playback buffering
      })
    }
  },[])

  return (
    <video ref={callbackRef} width={310} height={548} controls>
      <source src="https://example.com/uri/to/input_video.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

Результат 

Спостерігайте за змінами у відеофайлі, коли мережеве з’єднання змінюється з Fast 4G на 3G за допомогою Chrome DevTools. Роздільна здатність перемикається з 480p на 360p, показуючи, як оптимізовано відтворення для більшої чи меншої доступної пропускної здатності.

Висновок 

Ось і все! Ми щойно реалізували робочий відеоплеєр, сумісний з DASH, у React, щоб налаштувати потокову передачу відео з адаптивним бітрейтом. Знову ж таки, переваги цього пов'язані з продуктивністю . Коли ми використовуємо потокову передачу ABR, ми запитуємо відео меншими фрагментами, що дозволяє швидше відтворювати його, ніж якби нам спочатку потрібно було повністю завантажити відеофайл. І ми зробили це таким чином, що підтримує кілька версій одного й того ж відео, що дозволяє нам відображати найкращий формат для пристрою користувача.