Podstawy strumieniowego przesyłania multimediów

Derek Herman

Jaroslav Polakovič

W tym artykule omówimy bardziej zaawansowane pojęcie mediów transmitowanie na żywo, powinni też dobrze znać różne przypadki użycia, protokoły i rozszerzenia dotyczące strumieniowania. Zacznijmy od wyjaśnić, czym jest strumieniowanie.

Strumieniowe przesyłanie multimediów to sposób na dostarczanie i odtwarzanie treści multimedialnych kawałek. Zamiast wczytywać pojedynczy plik, co może działać wolno, jeśli nie będzie zoptymalizowane pod kątem sieć, odtwarzacz odczytuje plik manifestu opisujący na mniejsze porcje danych. Fragmenty multimediów są później dynamicznie łączone. i przesyłać je ponownie w czasie działania – prawdopodobnie z inną szybkością transmisji bitów, której będziesz się uczyć. na później.

Pamiętaj, że aby zapewnić transmisję strumieniową na stronie, serwer musi obsługiwać nagłówek żądania HTTP Range. Dowiedz się więcej o Accept-Ranges w nagłówku w tagu <video> i <source> artykułu.

Przypadki użycia strumieniowego przesyłania danych

Tworzenie fragmentów multimediów i niezbędnych plików manifestu opisujących transmisję nie jest bardzo proste, ale strumieniowanie daje kilka ciekawych przypadków użycia, nie można osiągnąć poprzez wskazanie elementu <video> do zbioru statycznych plików źródłowych. Znajdziesz w nim informacje o tym, dodanie multimediów do strony internetowej w kolejnej sekcji. Po pierwsze, zapoznaj się z kilka przypadków użycia do strumieniowania multimediów, jeśli nie chcesz ograniczać się wczytywania wielu plików do elementu <video>.

• Adaptacyjne strumieniowanie polega na kodowaniu fragmentów multimediów w kilku formatach jak i szybkość transmisji bitów oraz najwyższej jakości fragment multimediów pasujący do dostępna przepustowość jest zwracana do odtwarzacza.
• 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, w postaci 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 transmitowanie przez HTTP (DASH) i transmisje na żywo przez HTTP (HLS). Gracze, które obsługują te protokoły, pobiorą wygenerowany plik manifestu, dowiedzieć się, o jakie fragmenty multimediów prosić, i połączyć je w ostateczną wersję korzystanie z multimediów.

Odtwarzanie transmisji przy użyciu: <video>

Wiele przeglądarek nie będzie odtwarzać strumienia natywnie. Chociaż natywna obsługa odtwarzania HLS, przeglądarki zazwyczaj nie obsługują natywnego formatu DASH. do odtwarzania strumieniowego. Oznacza to, że często nie wystarczy po prostu wskazać <source> w elemencie <video> do 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 są i aplikacje, które wykorzystują strumienie, mają różne potrzeby.

Pliki manifestu zwykle opisują wiele wariantów jednego elementu multimedialnego. Pomyśl inaczej z różnymi szybkościami transmisji bitów, różnymi ścieżkami audio, a nawet tymi samymi multimediami zakodowanymi na różne sposoby. formatów reklam.

Niektóre aplikacje chcą zachować w buforze większą ilość filmu, inni mogą chcieć pobrać z wyprzedzeniem pierwsze kilka sekund filmu a inni chcą wdrożyć własne zasady adaptacyjnej transmisji strumieniowej. W takim przypadku warto wdrożyć jakąś wbudowaną funkcję przeglądarki w celu generowania strumieni multimedialnych do odtwarzania – i tak się dzieje.

Rozszerzenia źródeł multimediów

Na szczęście organizacja W3C zdefiniowała tzw. Media Source Extensions (MSE). który pozwala skryptowi JavaScript generować strumienie multimediów. MSE w skrócie do dołączenia obiektu MediaSource do elementu <video> odtwarza wszystkie dane multimedialne znajdujące się w buforach podłączonych MediaSource instancja.

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.

Chociaż te podstawowe koncepcje są proste i z pewnością można napisać Odtwarzacz zgodny z DASH i HLS od podstaw. Większość użytkowników zwykle wybiera jeden dojrzałych rozwiązań open source, które już istnieją, takich jak Shaka Player, np. JW Player czy Video.js.

Opracowaliśmy jednak demonstracyjną aplikację PWA dla mediów o nazwie Kino, która pokazuje, w jaki sposób możesz utworzyć własną witrynę z multimediami strumieniowymi, odtwarzanie multimediów offline za pomocą prostego elementu <video>. Istnieją plany w naszym planie rozwoju ram i zarządzania prawami cyfrowymi, funkcje zabezpieczeń. 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óżny sposób formatów reklam. W 2016 roku jednak obsługa standardowych fragmentów w formacie MP4 (fMP4) została dodana do HLS – formatu obsługiwanego również przez DASH.

Obsługiwane są fragmenty filmu używające kontenera fMP4 i kodeka H.264 przy użyciu obu protokołów i być w niej grać przez większość graczy. Dzięki temu możliwość kodowania filmów tylko raz, co z kolei oszczędza czas. i ilość miejsca na dysku.

Aby uzyskać lepszą jakość i mniejszy rozmiar plików, możesz zdecydować się kodować kilka zbiorów fragmentów multimediów przy użyciu wydajniejszych formatów, takich jak VP9, ale zanim przejdziemy dalej, musisz się dowiedzieć, Przygotuj pliki multimedialne do użycia w internecie i to tyle.