Podstawy strumieniowego przesyłania multimediów

Derek Herman

Jaroslav Polakovič

Z tego artykułu dowiesz się więcej o 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 strumieniowanie.

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 nagłówku 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.

• Przesyłanie strumieniowe z dostosowaniem liczby bitów na sekundę 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 miejsce, w którym fragmenty multimediów są kodowane i udostępniane w czasie rzeczywistym.
• Wstrzykiwanie multimediów polega na wstrzykiwaniu innych multimediów, takich jak reklamy, do strumienia bez konieczności zmiany źródła multimediów przez odtwarzacz.

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 strumienia za pomocą <video>

Wiele przeglądarek nie będzie obsługiwać transmisji 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. Mowa o różnych bitrate’ach, kilku ścieżkach audio, a nawet tych samych mediach zakodowanych 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ę rozszerzeniami źródła multimediów (MSE), które umożliwiają generowanie strumieni multimediów przez JavaScript. 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 powyżej ilustruje kilka kwestii:

• 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 dołączamy binarne dane multimedialne do bufora, np. za pomocą funkcji fetch.

Chociaż te podstawowe zagadnienia są proste i można samodzielnie napisać odtwarzacz zgodny z formatami DASH i HLS, większość osób zwykle wybiera jedno z dostępnych już dojrzałych rozwiązań open source, takich jak 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 znajdziesz w artykule Aplikacje PWA z transmisją 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 r. do HLS dodano obsługę standardowych plików MP4 podzielonych na fragmenty (fMP4), które są również obsługiwane 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 treści mogą kodować swoje filmy tylko raz, co 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.