Media Source API

Konzepte und Nutzung

Wiedergabe von Video und Audio ist seit einigen Jahren in Webanwendungen ohne Plugins mglich, jedoch waren die angebotenen Basisfunktionen wirklich nur ntzlich fr die Wiedergabe einzelner kompletter Tracks. Beispielsweise knnen wir keine arraybuffers kombinieren/trennen. Streaming-Medien waren bis vor kurzem das Gebiet von Flash, wobei Technologien wie der Flash Media Server Videostreams mithilfe des RTMP-Protokolls bereitstellten.

Der MSE-Standard

Mit den Media Source Extensions (MSE) ndert sich dies. MSE ermglicht es uns, den blichen einzelnen progressiven src URI, der an Medienelemente bergeben wird, durch einen Verweis auf ein MediaSource-Objekt zu ersetzen. Dieses Objekt ist ein Container fr Informationen wie den Bereitschaftszustand der Medien zur Wiedergabe und Verweise auf mehrere SourceBuffer-Objekte, die die verschiedenen Medienstcke darstellen, aus denen der gesamte Stream besteht. MSE gibt uns die Mglichkeit zur feineren Steuerung darber, wie viel und wie oft Inhalte abgerufen werden, sowie eine gewisse Kontrolle ber die Details zur Speichernutzung, wie zum Beispiel, wann Puffer gelscht werden. Es legt den Grundstein fr adaptiven Bitraten-Streaming-Clients (wie beispielsweise solche, die DASH oder HLS verwenden), die auf seiner erweiterbaren API aufgebaut werden knnen.

Das Erstellen von Assets, die mit MSE in modernen Browsern funktionieren, ist ein mhsamer Prozess, der betrchtliche Zeit, Rechenleistung und Energie erfordert. Die Verwendung externer Werkzeuge, um den Inhalt in ein geeignetes Format zu bringen, ist erforderlich. Whrend der Browser-Support fr die verschiedenen Mediencontainer mit MSE lckenhaft ist, ist die Verwendung des H.264-Videocodecs, AAC-Audiocodecs und des MP4-Containerformats ein blicher Ausgangspunkt. MSE bietet auch eine API zur Laufzeit-Erkennung von Container- und Codecs-Untersttzung.

Wenn Sie keine explizite Steuerung der Videoqualitt ber die Zeit, der Rate, mit der Inhalte abgerufen werden, oder der Rate, mit der Speicher gelscht wird, bentigen, dann sind die <video> und <source> Tags mglicherweise eine einfache und ausreichende Lsung.

DASH

Dynamic Adaptive Streaming over HTTP (DASH) ist ein Protokoll zur Spezifikation, wie adaptive Inhalte abgerufen werden sollten. Es ist effektiv eine Schicht, die auf MSE aufbaut, um adaptive Bitraten-Streaming-Clients zu erstellen. Obwohl es andere verfgbare Protokolle gibt (wie HTTP Live Streaming (HLS)), hat DASH die meiste Plattformuntersttzung.

DASH verlagert viel Logik aus dem Netzwerkprotokoll in die Anwendungslogik auf der Clientseite und nutzt das einfachere HTTP-Protokoll, um Dateien abzurufen. Tatschlich kann man DASH mit einem einfachen statischen Dateiserver untersttzen, was auch fr CDNs von Vorteil ist. Dies steht im direkten Gegensatz zu frheren Streaming-Lsungen, die teure Lizenzen fr proprietre, nicht-standardisierte Client/Server-Protokollimplementierungen erforderten.

Die beiden hufigsten Anwendungsflle fr DASH betreffen das Anschauen von Inhalten "on demand" oder "live". On demand ermglicht es einem Entwickler, sich Zeit zu nehmen, um die Assets in mehreren Auflsungen von unterschiedlicher Qualitt zu transkodieren.

Live-Profile-Inhalte knnen aufgrund ihrer Transkodierung und bertragung Latenz einfhren, weshalb DASH nicht fr Echtzeitkommunikation wie WebRTC geeignet ist. Es kann jedoch erheblich mehr Clientverbindungen als WebRTC untersttzen.

Es gibt zahlreiche verfgbare kostenlose und quelloffene Tools zur Transkodierung von Inhalten und zur Vorbereitung fr die Nutzung mit DASH, DASH-Dateiserver und DASH-Clientbibliotheken, die in JavaScript geschrieben sind. Der Artikel DASH Adaptive Streaming fr HTML-Video bietet ein Beispiel dafr, wie DASH mit MSE verwendet wird.

Verfgbarkeit in Workern

Ab Chrome 108 sind MSE-Funktionen in dedizierten Web Workern verfgbar, was eine verbesserte Leistung beim Manipulieren von MediaSources und SourceBuffers ermglicht. Um die Medien abzuspielen, wird die MediaSource.handle-Eigenschaft verwendet, um eine Referenz zu einem MediaSourceHandle-Objekt zu erhalten, einem Proxy fr die MediaSource, der zurck an den Hauptthread bertragen und ber seine HTMLMediaElement.srcObject-Eigenschaft an ein Medienelement angehngt werden kann.

Sehen Sie MSE-in-Workers Demo von Matt Wolenetz fr ein Live-Beispiel.

Schnittstellen

MediaSource

Stellt eine Medienquelle dar, die ber ein HTMLMediaElement-Objekt abgespielt werden soll.

MediaSourceHandle

Ein Proxy fr eine MediaSource, der von einem dedizierten Worker zurck in den Hauptthread bertragen und ber seine HTMLMediaElement.srcObject-Eigenschaft an ein Medienelement angehngt werden kann.

SourceBuffer

Stellt ein Stck Medien dar, das ber ein MediaSource-Objekt in ein HTMLMediaElement bergeben wird.

SourceBufferList

Eine einfache Containerliste fr mehrere SourceBuffer-Objekte.

ManagedMediaSource

Eine MediaSource, die ihre Speicherinhalte aktiv verwaltet. Im Gegensatz zu einer regulren MediaSource kann eine ManagedMediaSource Inhalte jederzeit aus ihren Quellpuffern lschen, beispielsweise aufgrund von Speicher- oder Hardwarebeschrnkungen.

ManagedSourceBuffer

Ein SourceBuffer, der von einer ManagedMediaSource erstellt wurde. Er lst bufferedchange-Events aus, um die Anwendung zu benachrichtigen, wenn zwischengespeicherte Bereiche gendert werden, einschlielich wenn der Benutzeragent Inhalte lscht.

BufferedChangeEvent

Das Ereignisobjekt fr das bufferedchange-Ereignis, das TimeRanges enthlt, die die hinzugefgten und entfernten zwischengespeicherten Bereiche darstellen.

VideoPlaybackQuality

Enthlt Informationen ber die Qualitt des von einem <video>-Element abgespielten Videos, wie die Anzahl der verworfenen oder beschdigten Frames. Wird von der Methode HTMLVideoElement.getVideoPlaybackQuality() zurckgegeben.

Erweiterungen anderer Schnittstellen

HTMLMediaElement.buffered

Gibt ein TimeRanges-Objekt zurck, das die Bereiche der Medienquelle angibt, die der Browser im Moment zwischengespeichert hat (falls vorhanden), wenn die buffered-Eigenschaft zugegriffen wird.

HTMLMediaElement.seekable

Gibt ein TimeRanges-Objekt zurck, das die Zeitbereiche enthlt, die der Benutzer ansteuern kann, falls vorhanden.

HTMLMediaElement.srcObject

Ein Medienanbieter-Objekt, das die abzuspielende oder die aktuell im HTMLMediaElement abgespielte Medienressource darstellt, oder null, wenn nicht zugewiesen.

HTMLVideoElement.getVideoPlaybackQuality()

Gibt ein VideoPlaybackQuality-Objekt fr das aktuell abgespielte Video zurck.

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

Gibt den SourceBuffer zurck, der den betreffenden Track erstellt hat.

Spezifikationen

Siehe auch

• Transkodierung von Assets fr Media Source Extensions
• Verwendung von MSE zur Erstellung eines grundlegenden Streaming-Dienstes (TBD)
• Verwendung von MPEG DASH zur Erstellung einer Streaming-Anwendung (TBD)
• Die <audio> und <video>-Elemente.
• HTMLMediaElement, HTMLVideoElement, HTMLAudioElement.