Einrichten adaptiver Streaming-Medienquellen

Angenommen, Sie möchten eine adaptive Streaming-Medienquelle auf einem Server einrichten, die innerhalb eines HTML-Medienelements genutzt werden soll. Wie würden Sie das machen? Dieser Artikel erklärt, wie das funktioniert, indem er sich zwei der gängigsten Formate anschaut: MPEG-DASH und HLS (HTTP Live Streaming).

Formate wählen

In Bezug auf adaptive Streaming-Formate gibt es viele zur Auswahl; wir haben uns entschieden, die folgenden zwei auszuwählen, da wir mit ihnen die meisten modernen Browser unterstützen können.

MPEG-DASH
HLS (HTTP Live Streaming)

Um Medien adaptiv zu streamen, müssen wir die Medien in Stücke aufteilen. Es ist erforderlich, mehrere verschiedene Qualitätsdateien anzubieten, die über mehrere Zeitpunkte verteilt sind. Je mehr Qualitätsstufen und Zeitpunkte es gibt, desto 'adaptiver' wird Ihr Stream sein, aber in der Regel möchten wir ein pragmatisches Gleichgewicht zwischen Größe, Kodierungszeit und Adaptivität finden.

Die gute Nachricht ist, dass wir, sobald wir unsere Medien im passenden Format kodiert haben, im Grunde bereit sind. Für adaptives Streaming über HTTP sind keine speziellen Serverkomponenten erforderlich.

Sowohl MPEG-DASH als auch HLS verwenden ein Playlist-Format, um die Komponententeile der Medien zu strukturieren, die die möglichen Streams ausmachen. Verschiedene Bitrate-Streams werden in Segmente unterteilt und in geeigneten Server-Ordnern abgelegt — wir müssen unseren Mediaplayern einen Link bereitstellen, um Dateien oder Playlists nachzuschlagen, die den Namen und Standort dieser Stream-Ordner spezifizieren.

MPEG-DASH-Kodierung

MPEG-DASH ist eine adaptive Bitrate-Streaming-Technik, die das Streaming von Medieninhalten über das Internet ermöglicht, die von herkömmlichen HTTP-Webservern bereitgestellt werden.

Eine Media Presentation Description-Datei (MPD) wird verwendet, um die Informationen über die verschiedenen Streams und die damit verbundenen Bandbreiten zu speichern. In Ihrem video source-Attribut verweisen Sie auf die MPD statt auf die Mediendatei, wie Sie es bei nicht-adaptiven Medien tun würden.

Die MPD-Datei gibt dem Browser an, wo die verschiedenen Medienstücke zu finden sind, sie enthält auch Metadaten wie mimeType und codecs und es gibt noch weitere Details wie byte-ranges darin - es ist ein XML-Dokument und wird in vielen Fällen für Sie generiert.

Es gibt einige Profile, die wir verwenden können. Wir werden uns das Ondemand-Profil für Video On Demand (VOD) und das LIVE-Profil ansehen.

Für Live-Services-Streaming ist das LIVE-Profil eine Anforderung. Die Stream-Wechsel-Fähigkeiten sind zwischen den Profilen identisch.

Weitere Gründe, das LIVE-Profil über das Ondemand-Profil für VOD-Inhalte zu verwenden, können sein:

Ihr Client oder Server unterstützt keine Range Requests
Ihr Server kann Range Requests nicht effizient zwischenspeichern
Ihr Server kann Range Requests nicht effizient vorab abrufen
Der SIDX* ist groß und das zuerst Laden verlangsamt den Start etwas
Sie möchten die Originaldateien sowohl für DASH als auch für andere Lieferformen (wie Microsoft Smooth Streaming) als Übergangsstrategie verwenden
Sie können dieselben Mediendateien sowohl für die Live-Übertragung als auch für VOD zu einem späteren Zeitpunkt nutzen

*SIDX oder SegmentIndexBox ist eine Struktur, die ein Segment beschreibt, indem sie dessen früheste Präsentationszeit und andere Metadaten angibt und häufig einen großen Teil der MPD-Datei ausmachen kann.

Ondemand-Profil

Dieses Profil erlaubt das Umschalten zwischen Streams 'on demand' - das heißt, Sie müssen nur einen Satz zusammenhängender Dateien bereitstellen und die Bandbreite für jede angeben, und die passende Datei wird automatisch ausgewählt.

Hier ist ein Beispiel, das eine Audiotrack-Repräsentation und vier separate Videorepräsentationen bietet.

xml

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="urn:mpeg:dash:schema:mpd:2011"
  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
  type="static"
  mediaPresentationDuration="PT654S"
  minBufferTime="PT2S"
  profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">

  <BaseURL>http://example.com/ondemand/</BaseURL>
  <Period>
    <!-- English Audio -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="1" bandwidth="64000">
        <BaseURL>ElephantsDream_AAC48K_064.mp4.dash</BaseURL>
      </Representation>
    </AdaptationSet>
    <!-- Video -->
    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="2" bandwidth="100000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0100.264.dash</BaseURL>
      </Representation>
      <Representation id="3" bandwidth="175000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0175.264.dash</BaseURL>
      </Representation>
      <Representation id="4" bandwidth="250000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0250.264.dash</BaseURL>
      </Representation>
      <Representation id="5" bandwidth="500000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0500.264.dash</BaseURL>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

Sobald Sie Ihre MPD-Datei generiert haben, können Sie sie innerhalb des Videotags referenzieren.

html

<video src="my.mpd" type="application/dash+xml"></video>

Es könnte klug sein, einen Fallback für Browser bereitzustellen, die MPEG-DASH noch nicht unterstützen:

html

<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>

LIVE-Profil

Ein nützliches Softwarestück im Umgang mit MPEG-DASH ist Dash Encoder. Dies verwendet MP4Box, um Medien in das MPEG-DASH-Format zu kodieren.

Hinweis: Sie müssen sich mit Makefiles und der Installation von Abhängigkeiten vertraut machen, um diese Software zum Laufen zu bringen.

Hinweis: Da das MPEG-DASH-Decoding teilweise mit JavaScript erfolgt und MSE-Dateien häufig über XHR abgerufen werden, sollten Sie die Same-Origin-Richtlinien beachten.

Hinweis: Wenn Sie WebM verwenden, können Sie die in diesem Tutorial gezeigten Methoden verwenden DASH Adaptive Streaming für HTML 5 Video.

Sobald kodiert, könnte Ihre Dateistruktur folgendermaßen aussehen:

play list ->                /segments/news.mp4.mpd

main segment folder ->      /segments/main/

100 Kbps segment folder ->  /segments/main/news100 contains (1.m4s, 2.m4s, 3.m4s … )

200 Kbps segment folder ->  /segments/main/news200 contains (1.m4s, 2.m4s, 3.m4s … )

300 Kbps segment folder ->  /segments/main/news300 contains (1.m4s, 2.m4s, 3.m4s … )

400 Kbps segment folder ->  /segments/main/news400 contains (1.m4s, 2.m4s, 3.m4s … )

Die Playlist oder .mpd-Datei enthält XML, das explizit angibt, wo sich alle verschiedenen Bitrate-Dateien befinden.

xml

<?xml version="1.0"?>
  <MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:mpeg:DASH:schema:MPD:2011" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" profiles="urn:mpeg:dash:profile:isoff-main:2011" type="static" mediaPresentationDuration="PT0H9M56.46S">
    <BaseURL>
      http://example.com/segments
    </BaseURL>
    <Period start="PT0S">
      <AdaptationSet bitstreamSwitching="true">

        <Representation id="0" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="46986">
          <SegmentBase>
            <Initialization sourceURL="main/news100/1.m4s" range="0-862"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news100/2.m4s" mediaRange="863-7113"/>
            <SegmentURL media="main/news100/3.m4s" mediaRange="7114-14104"/>
            <SegmentURL media="main/news100/4.m4s" mediaRange="14105-17990"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="91932">
          <SegmentBase>
            <Initialization sourceURL="main/news200/1.m4s" range="0-864"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news200/2.m4s" mediaRange="865-11523"/>
            <SegmentURL media="main/news200/3.m4s" mediaRange="11524-25621"/>
            <SegmentURL media="main/news200/4.m4s" mediaRange="25622-33693"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="270370">
          <SegmentBase>
            <Initialization sourceURL="main/news300/1.m4s" range="0-865"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news300/2.m4s" mediaRange="866-26970"/>
            <SegmentURL media="main/news300/3.m4s" mediaRange="26971-72543"/>
            <SegmentURL media="main/news300/4.m4s" mediaRange="72544-95972"/>
          </SegmentList>
        </Representation>

        …

      </AdaptationSet>
    </Period>
  </MPD>

Die MPD-Datei gibt dem Browser an, wo die verschiedenen Medienstücke zu finden sind, sie enthält auch Metadaten wie mimeType und codecs und es gibt noch weitere Details wie byte-ranges darin. Diese Dateien werden in der Regel für Sie generiert.

Hinweis: Sie können auch Ihre Audio- und Videostreams in separate Dateien aufteilen, die dann je nach Bandbreite priorisiert und separat bereitgestellt werden können.

Sobald Sie Ihre MPD-Datei generiert haben, können Sie sie wie erwartet innerhalb des <video>-Elements referenzieren:

html

<video src="my.mpd" type="application/dash+xml"></video>

Es könnte klug sein, einen Fallback bereitzustellen:

html

<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>

Hinweis: Die Wiedergabe von MPEG-DASH basiert auf dash.js und der Browser-Unterstützung für Media Source Extensions. Sehen Sie sich den neuesten dash.js Reference Player an.

HLS-Kodierung

HTTP Live Streaming (HLS) ist ein HTTP-basiertes Streaming-Protokoll, das von Apple implementiert wurde. Es ist in iOS- und macOS-Plattformen integriert und funktioniert gut auf mobilen und Desktop-Safari und den meisten Android-Geräten.

Medien werden normalerweise als MPEG-4 (H.264 Video und AAC Audio) kodiert und in einen MPEG-2 Transport Stream verpackt, der dann in Segmente unterteilt und als eine oder mehrere .ts Mediendateien gespeichert wird. Apple stellt Werkzeuge zur Verfügung, um Mediendateien in das entsprechende Format zu konvertieren.

HLS-Kodierungswerkzeuge

Es gibt eine Reihe nützlicher Werkzeuge für die HLS-Kodierung

Der Stream-Segmenter — von Apple für Mac-Plattformen bereitgestellt — nimmt einen Medienstrom aus einem lokalen Netzwerk und teilt die Medien in gleich große Mediendateien zusammen mit einer Indexdatei auf.
Apple bietet auch einen File-Segmenter für Mac an — der eine geeignet kodierte Datei nimmt, sie aufteilt und eine Indexdatei erstellt, ähnlich wie der Stream-Segmenter.

Hinweis: Weitere Details zu diesen Werkzeugen finden Sie unter Using HTTP Live Streaming.

Index-Dateien (Playlists)

Die HLS-Index-Datei (ähnlich wie die .mpd-Datei von MPEG-DASH) enthält die Informationen darüber, wo sich alle Mediensegmente befinden, sowie andere Metadaten wie Bandbreitenanwendung. Apple verwendet das .m3u8-Format (eine Erweiterung seines .m3u-Playlist-Formats) für Indexdateien — siehe unten für ein Beispiel:

#EXT-X-VERSION:3
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1

# Old-style integer duration; avoid for newer clients.
#EXTINF:10,
http://media.example.com/segment0.ts

# New-style floating-point duration; use for modern clients.
#EXTINF:10.0,
http://media.example.com/segment1.ts
#EXTINF:9.5,
http://media.example.com/segment2.ts
#EXT-X-ENDLIST

Hinweis: Umfassende Informationen darüber, wie man Medien für das HLS-Format von Apple kodiert, finden Sie auf den Entwicklerseiten von Apple.