Media Source API

Das Abspielen von Video und Audio war in Webanwendungen bereits seit einigen Jahren ohne Plugins möglich, aber die angebotenen Basisfunktionen waren meist nur zum Abspielen einzelner kompletter Tracks nützlich. Wir können beispielsweise nicht arraybuffers kombinieren/teilen. Streaming-Medien waren bis vor Kurzem noch die Domäne von Flash, wobei Technologien wie Flash Media Server Videostreams über das RTMP-Protokoll bereitstellten.

Mit den Media Source Extensions (MSE) ändert sich das. MSE ermöglicht es uns, die üblicherweise einfachen progressiven src-URIs, die den Medienelementen zugeführt werden, durch einen Verweis auf ein MediaSource-Objekt zu ersetzen. Dieses Objekt ist ein Container für Informationen wie den Bereitschaftszustand der Medien zur Wiedergabe und Verweise auf mehrere SourceBuffer-Objekte, die die verschiedenen Medienabschnitte repräsentieren, aus denen der gesamte Stream besteht. MSE gibt uns eine feinere Kontrolle darüber, wie viel und wie oft Inhalte abgerufen werden, sowie teilweise Kontrolle über Details der Speichernutzung, wie das Entfernen von Puffern. Es legt den Grundstein für adaptive Bitraten-Streaming-Clients (wie solche, die DASH oder HLS verwenden), die auf seiner erweiterbaren API aufgebaut werden können.

Das Erstellen von Assets, die mit MSE in modernen Browsern funktionieren, ist ein mühsamer Prozess, der erheblich Zeit, Rechenleistung und Energie erfordert. Die Verwendung von externen Dienstprogrammen, um die Inhalte in ein geeignetes Format zu bringen, ist erforderlich. Während die Unterstützung von Browsern für die verschiedenen Mediencontainer mit MSE unterschiedlich ist, sind die Verwendung des H.264-Videocodecs, des AAC-Audiocodecs und des MP4-Containerformats eine gängige Basis. MSE bietet auch eine API zur Laufzeiterkennung von Container- und Codec-Unterstützung.

Wenn Sie keine explizite Kontrolle über die Videoqualität im Zeitverlauf, die Geschwindigkeit, mit der Inhalte abgerufen werden, oder die Geschwindigkeit, mit der Speicherplatz freigegeben wird, benötigen, könnten die <video> und <source> Tags eine einfache und ausreichende Lösung sein.

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 adaptive Bitraten-Streaming-Clients 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 Anwendungslogik auf der Client-Seite, indem das einfachere HTTP-Protokoll zum Abrufen von Dateien verwendet wird. Tatsächlich kann DASH mit einem einfachen statischen Dateiserver unterstützt werden, was auch für CDNs großartig ist. Dies steht im direkten Gegensatz zu früheren Streaming-Lösungen, die teure Lizenzen für proprietäre nicht-standardisierte Client-/Server-Protokollimplementierungen erforderten.

Die zwei häufigsten Anwendungsfälle für DASH sind das "On-Demand"-Ansehen von Inhalten oder "live". On-Demand ermöglicht es einem Entwickler, sich Zeit zu nehmen, um die Assets in mehreren Auflösungen unterschiedlicher Qualität zu transkodieren.

Live-Profil-Inhalte können aufgrund ihrer Transkodierung und Übertragung Latenzen einführen, sodass DASH nicht für Echtzeitkommunikation wie WebRTC geeignet ist. Es kann jedoch signifikant mehr Clientverbindungen als WebRTC unterstützen.

Es gibt zahlreiche verfügbare kostenlose und Open-Source-Tools zum Transkodieren von Inhalten und zur Vorbereitung auf die Nutzung mit DASH, DASH-Dateiservern und DASH-Client-Bibliotheken, die in JavaScript geschrieben sind.

Ab Chrome 108 sind MSE-Funktionen in dedizierten Web Workern verfügbar, was eine verbesserte Leistung beim Manipulieren von MediaSource- und SourceBuffer-Objekten ermöglicht. Um die Medien abzuspielen, wird die MediaSource.handle-Eigenschaft verwendet, um eine Referenz zu einem MediaSourceHandle-Objekt zu erhalten, einem Proxy für die MediaSource, der an den Hauptthread zurückgegeben und über seine HTMLMediaElement.srcObject-Eigenschaft an ein Medienelement angehängt werden kann.

Sehen Sie sich das MSE-in-Workers-Demo von Matt Wolenetz für ein Live-Beispiel an.

MediaSource

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

MediaSourceHandle

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

SourceBuffer

Stellt einen Abschnitt von Medien dar, der über ein MediaSource-Objekt in ein HTMLMediaElement übergeben werden soll.

SourceBufferList

Eine einfache Containerliste für mehrere SourceBuffer-Objekte.

VideoPlaybackQuality

Enthält Informationen über die Qualität des Videos, das von einem <video>-Element abgespielt wird, wie z.B. die Anzahl der fallengelassenen oder beschädigten Frames. Wird von der HTMLVideoElement.getVideoPlaybackQuality()-Methode zurückgegeben.

HTMLMediaElement.buffered

Gibt ein TimeRanges-Objekt zurück, das die Bereiche der Medienquelle anzeigt, die der Browser (falls vorhanden) im Moment des Zugriffs auf die buffered-Eigenschaft gepuffert hat.

HTMLMediaElement.seekable

Gibt ein TimeRanges-Objekt zurück, das die Zeitbereiche enthält, die der Benutzer anpeilen kann, falls vorhanden.

HTMLMediaElement.srcObject

Ein Medienanbieterobjekt, das die Medienressource darstellt, die im aktuellen HTMLMediaElement abgespielt werden soll oder wurde, oder null, wenn nicht zugewiesen.

HTMLVideoElement.getVideoPlaybackQuality()

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

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

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

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