Podstawy strumieniowego przesyłania multimediów

Derek Herman

Jaroslav Polakovič

W tym artykule zapoznasz się z bardziej zaawansowanymi pojęciami związanymi ze strumieniowaniem multimediów, a po zakończeniu zapoznasz się z różnymi przypadkami użycia, protokołami i rozszerzeniami strumieniowania. Zacznijmy od wyjaśnienia, czym właściwie jest strumieniowanie.

Strumieniowe przesyłanie multimediów to sposób na przesyłanie i odtwarzanie treści multimedialnych po kolei. Zamiast ładować pojedynczy plik, który może być powolny, jeśli nie jest zoptymalizowany pod kątem sieci, odtwarzacz odczytuje plik manifestu z opisem sposobu podziału docelowych multimediów na poszczególne fragmenty danych. Fragmenty multimediów są później dynamicznie złączane w czasie działania – prawdopodobnie z różną szybkością transmisji bitów, o których dowiesz się później.

Pamiętaj, że aby można było przesyłać strumieniowo dane w witrynie, serwer musi obsługiwać nagłówek żądania HTTP Range. Więcej informacji o nagłówku Accept-Ranges znajdziesz w artykule o tagach <video> i <source>.

Przypadki użycia strumieniowania

Tworzenie fragmentów multimediów i niezbędnych plików manifestu opisujących strumień nie jest proste, ale strumieniowanie otwiera ciekawe przypadki użycia, których nie można osiągnąć przez wskazanie elementu <video> zestawu statycznych plików źródłowych. W dalszej sekcji znajdziesz więcej informacji o dodawaniu multimediów do strony internetowej. Jeśli nie chcesz po prostu wstawiać wielu plików do elementu <video>, zapoznaj się z kilkoma przypadkami użycia streamingu multimedialnego.

• Adaptacyjne przesyłanie strumieniowe oznacza, że fragmenty multimediów są kodowane z różną szybkością transmisji bitów, a fragment o najwyższej jakości, który pasuje do aktualnie dostępnej przepustowości klienta, jest zwracany do odtwarzacza.
• Transmisja na żywo to metoda, w której fragmenty multimediów są kodowane i udostępniane w czasie rzeczywistym.
• Wstrzykiwanie multimediów polega na wstrzykiwaniu innych multimediów, np. reklam, do strumienia bez konieczności zmiany źródła multimediów przez odtwarzacz.

Protokoły strumieniowania

Dwa najczęściej używane protokoły strumieniowego przesyłania danych w internecie to dynamiczne adaptacyjne strumieniowe przesyłanie danych przez HTTP (DASH) i HTTP Live Streaming (HLS). Odtwarzacze obsługujące te protokoły pobierają wygenerowany plik manifestu, określają, o które fragmenty multimediów poprosić, a następnie łączą je w wygenerowany plik manifestu.

Odtwarzanie strumienia za pomocą aplikacji <video>

Wiele przeglądarek nie odtworzy transmisji natywnie. Mimo że jest pewna natywna obsługa odtwarzania HLS, przeglądarki zazwyczaj nie obsługują odtwarzania natywnego strumienia DASH. Oznacza to, że często nie wystarczy wskazać pliku manifestu (<source> w elemencie <video>).

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

To, co może wydawać się deficytem, w rzeczywistości kryje się w ukryciu. Strumienie są potężne, a aplikacje, które wykorzystują strumienie, mają różne potrzeby.

Pliki manifestu zwykle zawierają wiele wariantów pojedynczych multimediów. Uwzględnij różne szybkości transmisji bitów, kilka ścieżek audio, a nawet te same multimedia zakodowane w różnych formatach.

Niektóre aplikacje chcą zachować większą ilość filmu w buforze, inne chcą z wyprzedzeniem pobierać kilka pierwszych sekund filmu z nadchodzącego odcinka, a jeszcze inne chcą wykorzystać własną logikę na potrzeby adaptacyjnego transmitowania. Tutaj przydałaby się jakaś wbudowana funkcja przeglądarki generująca strumienie multimediów do odtwarzania, ale się zdarza, że jest taka funkcja.

Rozszerzenia źródła multimediów

Na szczęście organizacja W3C zdefiniowała coś o nazwie Media Source Extensions (MSE). Dzięki temu kod JavaScript będzie mógł generować strumienie multimediów. W skrócie MSE umożliwia programistom dołączenie obiektu MediaSource do elementu <video> i odtwarzanie dowolnych danych multimedialnych przesyłanych do buforów podłączonych do instancji MediaSource.

Podstawowy przykład

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. */ )
  }
);

Uproszczony przykład ilustruje kilka kwestii:

• <video> odbiera dane multimedialne z adresu URL.
• Wygenerowany adres URL jest tylko wskaźnikiem do wystąpienia MediaSource.
• Instancja MediaSource tworzy co najmniej 1 instancję SourceBuffer.
• Następnie do bufora dołączamy dane binarne multimediów, np. za pomocą funkcji fetch.

Te podstawowe pojęcia są proste i można napisać od podstaw odtwarzacz wideo zgodny z DASH i HLS, ale większość osób wybiera jedno z dotychczasowych rozwiązań open source, np. Shaka Player, JW Player czy Video.js.

Przygotowaliśmy jednak demonstracyjną PWA Media PWA o nazwie Kino, która pokazuje, jak zaprojektować własną witrynę ze strumieniowym przesyłaniem multimediów, która umożliwia odtwarzanie multimediów offline za pomocą prostego elementu <video>. W naszym harmonogramie planujemy m.in. wsparcie określonych ram i zarządzania prawami cyfrowymi. Dlatego warto co jakiś czas odwiedzać tę stronę lub poprosić o dodanie nowych funkcji. Więcej informacji na ten temat znajdziesz w artykule na temat aplikacji PWA ze strumieniowaniem offline.

Format fragmentów multimediów

Przez długi czas DASH i HLS wymagały kodowania fragmentów multimediów w różnych formatach. Jednak w 2016 r. dodaliśmy obsługę standardowych fragmentowanych plików MP4 (fMP4) do HLS – formatu obsługiwanego również w DASH.

Fragmenty filmu używające kontenera fMP4 i kodeka H.264 są obsługiwane przez oba protokoły i można je odtwarzać przez większość odtwarzaczy. Dzięki temu producenci treści mogą zakodować swoje filmy tylko raz, co z kolei pozwala zaoszczędzić czas i miejsce na dysku.

Aby uzyskać lepszą jakość i mniejsze rozmiary plików, możesz zdecydować się na zakodowanie kilku zbiorów fragmentów multimediów w bardziej wydajnych formatach, takich jak VP9. Zanim jednak pójdziemy dalej, musisz się najpierw dowiedzieć, jak przygotować pliki multimedialne do wykorzystania w internecie.