DieMedia Source API, formal bekannt alsMedia Source Extensions (MSE), bietet Funktionen, die plugin-freies, webbasiertes Streaming von Medien ermöglichen. Mithilfe von MSE können Medienströme über JavaScript erstellt und mit<audio>- und<video>-Elementen abgespielt werden.

Konzepte und Verwendung

Video- und Audiowiedergabe in Webanwendungen war schon seit einigen Jahren ohne Plugins möglich, doch die grundlegenden Funktionen waren meist nur für die Wiedergabe einzelner kompletter Tracks nützlich. Beispielsweise können wir keine Arraypuffer kombinieren/teilen. Bis vor kurzem war das Streaming von Medien das Gebiet von Flash, wobei Technologien wie der Flash Media Server Videostreams über das RTMP-Protokoll bereitstellten.

Der MSE-Standard

Mit den Media Source Extensions (MSE) ändert sich dies. MSE erlaubt uns, den üblichen einzelnen progressivensrc-URI, der an Medienelemente übergeben wird, durch eine Referenz zu einemMediaSource-Objekt zu ersetzen. Dieses ist ein Container für Informationen wie den Bereitschaftszustand der Medien für die Wiedergabe sowie Referenzen zu mehrerenSourceBuffer-Objekten, die die verschiedenen Abschnitte der Medien repräsentieren, die den gesamten Stream ausmachen. MSE bietet uns eine feinere Kontrolle darüber, wie viel und wie oft Inhalte abgerufen werden, sowie eine gewisse Kontrolle über Details zur Speichernutzung, etwa wann Puffer gelöscht werden. Es legt den Grundstein für die Entwicklung von Clients für adaptives Streaming mit variabler Bitrate (wie die Verwendung von DASH oder HLS) auf seiner erweiterbaren API.

Die Erstellung von Medieninhalten, die mit MSE in modernen Browsern funktionieren, ist ein mühsamer Prozess, der viel Zeit, Rechenleistung und Energie erfordert. Die Verwendung externer Hilfsmittel ist erforderlich, um die Inhalte in ein geeignetes Format zu bringen. Während die Unterstützung der verschiedenen Mediencontainer mit MSE uneinheitlich ist, bietet die Verwendung des H.264-Videocodecs, des AAC-Audiocodecs und des MP4-Containerformats eine gemeinsame Basis. MSE bietet außerdem eine API zur Laufzeit-Erkennung von Container- und Codec-Unterstützung.

Wenn Sie keine explizite Kontrolle über die Videoqualität im Laufe der Zeit, die Rate, mit der Inhalte abgerufen werden, oder die Rate, mit der Speicher geleert wird, benötigen, können die<video>- und<source>-Tags eine einfache und angemessene Lösung darstellen.

DASH

Dynamic Adaptive Streaming over HTTP (DASH) ist ein Protokoll, das spezifiziert, wie adaptive Inhalte abgerufen werden sollen. Es ist effektiv eine Schicht, die auf MSE aufbaut, um Clients für adaptives Streaming mit variabler Bitrate zu erstellen. Während es andere Protokolle gibt (wie HTTP Live Streaming (HLS)), hat DASH die meiste Plattformunterstützung.

DASH verschiebt viel Logik aus dem Netzwerkprotokoll in die Applikationslogik auf Client-Seite und verwendet das einfachere HTTP-Protokoll zum Abrufen von Dateien. Tatsächlich kann man DASH mit einem einfachen statischen File-Server unterstützen, was auch für CDNs hervorragend ist. Dies steht im direkten Gegensatz zu früheren Streaming-Lösungen, die teure Lizenzen für proprietäre nicht standardisierte Client/Server-Protokoll-Implementierungen erforderten.

Die beiden häufigsten Anwendungsfälle für DASH beinhalten das Ansehen von Inhalten "on demand" oder "live". Bei On-Demand-Inhalten kann ein Entwickler seine Zeit damit verbringen, die Assets in mehrere Auflösungen von unterschiedlicher Qualität zu transkodieren.

Bei Live-Profil-Inhalten kann es aufgrund von Transkodierung und Übertragung zu Verzögerungen kommen, daher ist DASH nicht für Echtzeitkommunikation wieWebRTC geeignet. Es kann jedoch weitaus mehr Client-Verbindungen als WebRTC unterstützen.

Es gibt zahlreiche verfügbare kostenlose und Open-Source-Tools zum Transkodieren von Inhalten und zur Vorbereitung für die Verwendung mit DASH, DASH-File-Server und DASH-Client-Bibliotheken, die in JavaScript geschrieben sind. Der ArtikelDASH Adaptive Streaming for HTML video bietet ein Beispiel dafür, wie DASH mit MSE genutzt werden kann.

Verfügbarkeit in Workern

Ab Chrome 108 sind MSE-Funktionen in dediziertenWeb Workern verfügbar, was eine verbesserte Leistung bei der Manipulation vonMediaSource- undSourceBuffer-Objekten ermöglicht. Zur Wiedergabe der Medien wird dieMediaSource.handle-Eigenschaft verwendet, um eine Referenz zu einemMediaSourceHandle-Objekt zu erhalten, einem Proxy für dieMediaSource, die zurück an den Haupt-Thread übertragen und über dieHTMLMediaElement.srcObject-Eigenschaft einem Medienelement angehängt werden kann.

SieheMSE-in-Workers Demo von Matt Wolenetz für ein Live-Beispiel.

Schnittstellen

MediaSource

Repräsentiert eine Medienquelle, die über einHTMLMediaElement-Objekt abgespielt wird.

MediaSourceHandle

Ein Proxy für eineMediaSource, die von einem dedizierten Worker zurück an den Haupt-Thread übertragen und einem Medienelement über dieHTMLMediaElement.srcObject-Eigenschaft angehängt werden kann.

SourceBuffer

Repräsentiert ein Medienstück, das über einMediaSource-Objekt in einHTMLMediaElement eingespeist wird.

SourceBufferList

Eine einfache Containerliste für mehrereSourceBuffer-Objekte.

VideoPlaybackQuality

Enthält Informationen über die Qualität des von einem<video>-Element abgespielten Videos, wie die Anzahl der übersprungenen oder beschädigten Frames. Wird von der MethodeHTMLVideoElement.getVideoPlaybackQuality() zurückgegeben.

Erweiterungen zu anderen Schnittstellen

HTMLMediaElement.buffered

Gibt einTimeRanges-Objekt zurück, das die Bereiche der Medienquelle angibt, die der Browser zwischengespeichert hat (falls vorhanden), wenn diebuffered-Eigenschaft aufgerufen wird.

HTMLMediaElement.seekable

Gibt einTimeRanges-Objekt zurück, das die Zeitbereiche enthält, zu denen der Benutzer eventuell spulen kann.

HTMLMediaElement.srcObject

Ein Medienprovider-Objekt, das die abzuspielende oder in dem aktuellenHTMLMediaElement bereits abgespielte Medienressource repräsentiert, odernull, wenn nicht zugewiesen.

HTMLVideoElement.getVideoPlaybackQuality()

Gibt einVideoPlaybackQuality-Objekt für das gerade abgespielte Video zurück.

AudioTrack.sourceBuffer,VideoTrack.sourceBuffer,TextTrack.sourceBuffer

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

Spezifikationen

Siehe auch

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