Podstawy strumieniowego przesyłania multimediów

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

Z tego artykułu dowiesz się więcej o bardziej zaawansowanej koncepcji strumieniowego przesyłania multimediów. Po jego przeczytaniu powinieneś dobrze rozumieć różne zastosowania, protokoły i rozszerzenia strumieniowego przesyłania multimediów. Zacznijmy od wyjaśnienia, czym jest streaming.

Strumieniowe przesyłanie multimediów to sposób dostarczania i odtwarzania treści multimedialnych. Zamiast wczytywać pojedynczy plik, który może być wolny, jeśli nie jest zoptymalizowany pod kątem sieci, odtwarzacz odczytuje plik manifestu opisujący, jak dane docelowe są podzielone na poszczególne fragmenty danych. Fragmenty multimediów są później dynamicznie łączone w czasie działania – prawdopodobnie z różnymi szybkościami transmisji bitów, o których dowiesz się więcej później.

Pamiętaj, że aby zapewnić strumieniowe przesyłanie danych w witrynie, serwer musi obsługiwać nagłówek żądania HTTP Range. Więcej informacji o tagu nagłówka Accept-Ranges znajdziesz w artykule Tagi <video> i <source>.

Przypadki użycia strumieniowego przesyłania danych

Tworzenie fragmentów multimediów i niezbędnych plików manifestu opisujących strumień nie jest łatwe, ale strumieniowanie umożliwia stosowanie niektórych interesujących zastosowań, których nie można uzyskać, wskazując element <video> na zestaw statycznych plików źródłowych. Więcej informacji o dodawaniu multimediów do strony internetowej znajdziesz w następnej sekcji. Jeśli chcesz robić coś więcej niż tylko wczytywać wiele plików do elementu <video>, najpierw zapoznaj się z kilkoma przykładami strumieniowego przesyłania multimediów.

  • Przepływne przesyłanie strumieniowe z dostosowaniem polega na kodowaniu fragmentów multimediów w różnych bitrate’ach. Do odtwarzacza multimedialnego zwracany jest fragment multimediów o najwyższej jakości, który pasuje do aktualnie dostępnej przepustowości klienta.
  • Transmisja na żywo to proces, w którym 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.

Protokoły strumieniowego przesyłania danych

Dwa najczęściej używane protokoły strumieniowego przesyłania danych w internecie to dynamiczne adaptacyjne strumieniowe przesyłanie danych przez HTTP (DASH) i transmisja na żywo przez HTTP (HLS). Odtwarzacze obsługujące te protokoły pobierają wygenerowany plik manifestu, ustalają, które fragmenty multimediów mają zostać przesłane, a następnie łączą je w końcowy plik multimedialny.

Odtwarzanie transmisji przy użyciu: <video>

Wiele przeglądarek nie będzie odtwarzać strumienia natywnie. Chociaż istnieje wbudowane wsparcie dla odtwarzania HLS, przeglądarki zwykle nie obsługują natywnego strumieniowego odtwarzania DASH. Oznacza to, że często nie wystarczy po prostu wskazać element <source> w elemencie <video> do pliku manifestu.

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

To, co może wydawać się brakiem, jest w rzeczywistości ukrytą siłą. Strumienie są potężne, a aplikacje, które je wykorzystują, mają różne potrzeby.

Pliki manifestu zwykle opisują wiele wersji jednego medium. Możesz zastosować różne szybkości transmisji bitów, kilka ścieżek audio, a nawet te same multimedia zakodowane w różnych formatach.

Niektóre aplikacje mogą chcieć zachować większą ilość filmu w buforze, inne mogą chcieć pobrać z wyprzedzeniem kilka pierwszych sekund filmu z nadchodzącego odcinka, a jeszcze inne mogą chcieć zaimplementować własną logikę strumieniowania adaptacyjnego. W tym przypadku przydałaby się jakaś wbudowana funkcja przeglądarki do generowania strumieni multimediów do odtwarzania. I tak się składa, że taka funkcja istnieje.

Rozszerzenia źródła multimediów

Na szczęście W3C zdefiniowało coś, co nazywa się Media Source Extensions (MSE), co pozwoli JavaScriptowi generować strumienie multimediów. Krótko mówiąc, MSE pozwala deweloperom dołączyć obiekt MediaSource do elementu <video> i odtwarzać dane multimedialne, które są przesyłane do buforów dołączonych do instancji MediaSource.

Przykład podstawowy

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 pokazuje kilka informacji:

  • Jeśli chodzi o <video>, usługa ta otrzymuje dane multimedialne z adresu URL.
  • Wygenerowany adres URL to tylko wskaźnik do instancji MediaSource.
  • Instancji MediaSource tworzy co najmniej 1 instancję SourceBuffer.
  • Następnie umieszczamy w buforze binarne dane multimedialne, np. za pomocą funkcji fetch.

Te podstawowe koncepcje są proste i z pewnością można stworzyć od podstaw odtwarzacz wideo zgodny z DASH i HLS, jednak większość osób zwykle wybiera jedno z dojrzałych rozwiązań open source, które już istnieją, np. Shaka Player, JW Player czy Video.js.

Stworzyliśmy jednak demonstracyjną progresywną aplikację internetową Media o nazwie Kino, która pokazuje, jak tworzyć własną podstawową witrynę do strumieniowego przesyłania multimediów, która umożliwia odtwarzanie multimediów offline przy użyciu tylko prostego elementu <video>. W ramach naszej ścieżki rozwoju planujemy m.in. wspierać frameworki i zarządzanie prawami cyfrowymi. Od czasu do czasu sprawdzaj, czy nie pojawiły się nowe informacje, lub poproś o dodanie funkcji. Więcej informacji na ten temat znajdziesz w artykule PWA z funkcją strumieniowania offline.

Format kawałków multimediów

Przez długi czas DASH i HLS wymagały kodowania fragmentów multimediów w różnych formatach. W 2016 roku dodaliśmy jednak obsługę standardowych fragmentów MP4 (fMP4) do HLS, czyli formatu obsługiwanego również przez DASH.

Fragmenty wideo korzystające z kontenera fMP4 i kodeka H.264 są obsługiwane przez oba protokoły i mogą być odtwarzane przez większość odtwarzaczy. Dzięki temu producenci mogą zakodować swoje filmy tylko raz, co z kolei oszczędza czas i miejsce na dysku.

Aby uzyskać lepszą jakość i mniejsze rozmiary plików, możesz zdecydować się na kodowanie kilku zestawów fragmentów multimediów za pomocą bardziej wydajnych formatów, takich jak VP9. Zanim jednak to zrobisz, musisz najpierw dowiedzieć się, jak przygotowywać pliki multimedialne na potrzeby internetu.