Media Source API

Konzepte und Verwendung

Die Wiedergabe von Video und Audio ist in Webanwendungen seit einigen Jahren ohne Plugins möglich, doch die angebotenen grundlegenden Funktionen waren bislang eigentlich nur für die Wiedergabe einzelner vollständiger Titel nützlich. Wir können beispielsweise keine ArrayBuffer zusammenführen oder aufteilen. Streaming-Medien waren bis vor Kurzem die Domäne von Flash, wobei Technologien wie Flash Media Server Videostreams über das RTMP-Protokoll bereitstellten.

Der MSE-Standard

Mit Media Source Extensions (MSE) ändert sich dies. MSE ermöglicht es uns, die übliche einzelne progressive src-URI, die Medienelementen zugeführt wird, durch eine Referenz auf ein MediaSource-Objekt zu ersetzen. Dieses ist ein Container für Informationen wie den Bereitschaftszustand des wiederzugebenden Mediums sowie Referenzen auf mehrere SourceBuffer-Objekte, die die verschiedenen Medienabschnitte darstellen, aus denen der gesamte Stream besteht. MSE gibt uns eine präzisere Kontrolle darüber, wie viele Inhalte und wie häufig sie abgerufen werden, sowie eine gewisse Kontrolle über Details der Speichernutzung, beispielsweise darüber, wann Pufferinhalte verworfen werden. Es schafft die Grundlage für Clients für adaptives Bitratenstreaming, etwa solche, die DASH oder HLS verwenden, die auf seiner erweiterbaren API aufgebaut werden können.

Das Erstellen von Ressourcen, die mit MSE in modernen Browsern funktionieren, ist ein aufwendiger Prozess, der erheblich Zeit, Rechenleistung und Energie beansprucht. Die Verwendung externer Dienstprogramme, um die Inhalte in ein geeignetes Format zu bringen, ist erforderlich. Obwohl die Browserunterstützung für die verschiedenen Mediencontainer mit MSE uneinheitlich ist, bilden die Verwendung des H.264-Videocodecs, des AAC-Audiocodecs und des MP4-Containerformats eine gängige Grundlage. MSE bietet außerdem eine API zur Laufzeiterkennung der Unterstützung von Containern und Codecs.

Wenn Sie keine explizite Kontrolle über die Videoqualität im Zeitverlauf, die Geschwindigkeit des Inhaltsabrufs oder die Geschwindigkeit des Speicherverwerfens benötigen, können die Tags <video> und <source> eine einfache und ausreichende Lösung sein.

DASH

Dynamic Adaptive Streaming over HTTP (DASH) ist ein Protokoll zur Festlegung, wie adaptive Inhalte abgerufen werden sollen. Es ist praktisch eine auf MSE aufbauende Schicht zum Erstellen von Clients für adaptives Bitratenstreaming. Obwohl andere Protokolle verfügbar sind, etwa HTTP Live Streaming (HLS), verfügt DASH über die breiteste Plattformunterstützung.

DASH verlagert viel Logik aus dem Netzwerkprotokoll in die clientseitige Anwendungslogik und verwendet das einfachere HTTP-Protokoll zum Abrufen von Dateien. Tatsächlich kann DASH mit einem einfachen statischen Dateiserver unterstützt werden, was auch für CDNs hervorragend ist. Dies steht in direktem Gegensatz zu früheren Streaming-Lösungen, die teure Lizenzen für proprietäre, nicht standardisierte Client/Server-Protokollimplementierungen erforderten.

Die beiden häufigsten Anwendungsfälle für DASH sind das Ansehen von Inhalten „on demand“ oder „live“. On demand ermöglicht es Entwicklerinnen und Entwicklern, sich beim Transcodieren der Ressourcen in mehrere Auflösungen unterschiedlicher Qualität Zeit zu nehmen.

Inhalte mit Live-Profil können durch ihre Transcodierung und Übertragung Latenz verursachen. Daher ist DASH nicht für Echtzeitkommunikation wie WebRTC geeignet. Es kann jedoch deutlich mehr Clientverbindungen als WebRTC unterstützen.

Es gibt zahlreiche frei verfügbare Open-Source-Werkzeuge zum Transcodieren von Inhalten und zur Vorbereitung für die Verwendung mit DASH, DASH-Dateiserver sowie in JavaScript geschriebene DASH-Clientbibliotheken. Der Artikel DASH Adaptive Streaming für HTML-Video bietet ein Beispiel für die Verwendung von DASH mit MSE.

Verfügbarkeit in Workern

Seit Chrome 108 sind MSE-Funktionen in dedizierten Web Workern verfügbar. Dies ermöglicht eine bessere Leistung bei der Bearbeitung von MediaSources und SourceBuffers. Zur Wiedergabe der Medien wird die Eigenschaft MediaSource.handle verwendet, um eine Referenz auf ein MediaSourceHandle-Objekt zu erhalten. Dabei handelt es sich um einen Proxy für die MediaSource, der zurück an den Hauptthread übertragen und über dessen Eigenschaft HTMLMediaElement.srcObject an ein Medienelement angehängt werden kann.

Ein Live-Beispiel finden Sie in der MSE-in-Workers-Demo von Matt Wolenetz.

Schnittstellen

MediaSource

Repräsentiert eine Medienquelle, die über ein HTMLMediaElement-Objekt wiedergegeben werden soll.

MediaSourceHandle

Ein Proxy für eine MediaSource, der von einem dedizierten Worker zurück an den Hauptthread übertragen und über seine Eigenschaft HTMLMediaElement.srcObject an ein Medienelement angehängt werden kann.

SourceBuffer

Repräsentiert einen Medienabschnitt, der über ein MediaSource-Objekt an ein HTMLMediaElement übergeben werden soll.

SourceBufferList

Eine einfache Containerliste für mehrere SourceBuffer-Objekte.

ManagedMediaSource

Eine MediaSource, die ihre Speicherinhalte aktiv verwaltet. Anders als eine reguläre MediaSource kann eine ManagedMediaSource Inhalte aus ihren Quellpuffern jederzeit aus Gründen wie Speicher- oder Hardwarebeschränkungen verwerfen.

ManagedSourceBuffer

Ein von einer ManagedMediaSource erstellter SourceBuffer. Löst bufferedchange-Ereignisse aus, um die Anwendung zu benachrichtigen, wenn gepufferte Bereiche geändert werden, auch wenn der User Agent Inhalte verwirft.

BufferedChangeEvent

Das Ereignisobjekt für das Ereignis bufferedchange, das TimeRanges enthält, welche die hinzugefügten und entfernten gepufferten Bereiche darstellen.

VideoPlaybackQuality

Enthält Informationen über die Qualität eines von einem <video>-Element wiedergegebenen Videos, beispielsweise die Anzahl verworfener oder beschädigter Frames. Wird von der Methode HTMLVideoElement.getVideoPlaybackQuality() zurückgegeben.

Erweiterungen anderer Schnittstellen

HTMLMediaElement.buffered

Gibt ein TimeRanges-Objekt zurück, das die Bereiche der Medienquelle angibt, die der Browser zum Zeitpunkt des Zugriffs auf die Eigenschaft buffered gegebenenfalls gepuffert hat.

HTMLMediaElement.seekable

Gibt ein TimeRanges-Objekt zurück, das die Zeitbereiche enthält, zu denen die Benutzerin oder der Benutzer gegebenenfalls springen kann.

HTMLMediaElement.srcObject

Ein Medienanbieterobjekt, das die wiederzugebende oder im aktuellen HTMLMediaElement wiedergegebene Medienressource darstellt, oder null, wenn nichts zugewiesen wurde.

HTMLVideoElement.getVideoPlaybackQuality()

Gibt ein VideoPlaybackQuality-Objekt für das aktuell wiedergegebene Video zurück.

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

Gibt den SourceBuffer zurück, der den betreffenden Track erstellt hat.

Spezifikationen

Siehe auch

• Ressourcen für Media Source Extensions transcodieren
• MSE verwenden, um einen grundlegenden Streaming-Dienst zu erstellen (TBD)
• MPEG DASH verwenden, um eine Streaming-Anwendung zu erstellen (TBD)
• Die Elemente <audio> und <video>.
• HTMLMediaElement, HTMLVideoElement, HTMLAudioElement.