Podstawy strumieniowego przesyłania multimediów

Derek Herman

Jaroslav Polakovič

Z tego artykułu dowiesz się więcej o bardziej zaawansowanej koncepcji strumieniowania multimediów, a także poznasz dobrze różne zastosowania, protokoły i rozszerzenia strumieniowania. Zacznijmy od wyjaśnienia, czym właściwie jest przesyłanie strumieniowe.

Strumieniowe odtwarzanie multimediów to sposób dostarczania i odtwarzania treści multimedialnych osobno. Zamiast wczytywania pojedynczego pliku, który może działać wolno, jeśli nie jest zoptymalizowany pod kątem sieci, odtwarzacz odczytuje plik manifestu z opisem, w jaki sposób docelowe multimedia są dzielone na poszczególne fragmenty danych. Fragmenty multimediów są później dynamicznie łączone ze sobą w czasie działania – prawdopodobnie z różną szybkością transmisji bitów, o której dowiesz się więcej później.

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

Przypadki użycia strumieniowego przesyłania danych

Przygotowanie fragmentów multimediów i wymaganych plików manifestu opisujących strumień nie jest takie proste, ale strumieniowanie daje dostęp do kilku ciekawych przypadków użycia, których nie można osiągnąć, kierując element <video> do zbioru statycznych plików źródłowych. Więcej informacji o dodawaniu multimediów do strony internetowej znajdziesz w dalszej sekcji. Po pierwsze, zapoznaj się z kilkoma przykładami użycia strumieniowania multimediów, gdy nie chcesz tylko ładować wielu plików w elemencie <video>.

• Adaptacyjne strumieniowanie polega na kodowaniu fragmentów multimediów przy użyciu kilku szybkości transmisji bitów, a do odtwarzacza jest zwracany 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.
• Wstrzyknięcie multimediów: polega na wstrzykiwaniu do strumienia innych multimediów, np. reklam, 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 transmisja na żywo przez HTTP (HLS). Odtwarzacze obsługujące te protokoły pobierają wygenerowany plik manifestu, określają, o które fragmenty multimediów prosić, a następnie łączą je w ostateczny efekt.

Odtwarzanie transmisji przy użyciu: <video>

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

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

To, co może wydawać się deficytem, w rzeczywistości jest siłą natury. Strumienie mają duże możliwości, a aplikacje, które wykorzystują strumienie, mają różne potrzeby.

Pliki manifestu zwykle opisują wiele wariantów jednego elementu multimedialnego. 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ć w buforze większą ilość filmu, inne mogą chcieć pobrać z wyprzedzeniem kilka pierwszych sekund filmu z nadchodzącego odcinka, a jeszcze inne chcą wdrożyć własną logikę na potrzeby adaptacyjnego strumieniowego przesyłania danych. W tym przypadku potrzebna jest wbudowana funkcja przeglądarki, która generuje strumienie multimediów do odtwarzania.

Rozszerzenia źródeł multimediów

Na szczęście organizacja W3C zdefiniowała coś o nazwie Media Source Extensions (MSE), które pozwoli JavaScript generować strumienie multimediów. W skrócie MSE umożliwia programistom dołączenie obiektu MediaSource do elementu <video> i odtwarzanie dowolnych danych multimedialnych znajdujących się w buforach 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:

• Według danych <video> otrzymuje dane multimedialne z adresu URL.
• Wygenerowany adres URL jest tylko wskaźnikiem do instancji MediaSource.
• Instancja 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ą aplikację Media PWA o nazwie Kino, która pokazuje, jak można stworzyć własną witrynę z usługami strumieniowania, która umożliwia odtwarzanie treści offline za pomocą prostego elementu <video>. W naszym harmonogramie zaplanowaliśmy m.in. obsługę platform i zarządzania prawami cyfrowymi. Dlatego warto od czasu do czasu zaglądać na tę stronę lub poprosić o dodanie nowej funkcji. Więcej informacji na ten temat znajdziesz w artykule PWA z funkcją strumieniowania offline.

Format fragmentó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 filmu korzystające z kontenera fMP4 i kodeka H.264 są obsługiwane przez oba protokoły i można je odtwarzać w większości 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 zakodować kilka zestawów fragmentów multimediów w wydajniejszych formatach, takich jak VP9. Zanim jednak przejdziemy dalej, musisz dowiedzieć się, jak przygotowywać pliki multimedialne do użytku w internecie. I to wszystko dalej.