Media Source API

Video- und Audiowiedergabe ist seit einigen Jahren in Webanwendungen ohne Plugins möglich, aber die grundlegenden Funktionen waren bisher meist nur für das Abspielen einzelner kompletter Tracks nützlich. Zum Beispiel können wir keine Arraybuffers kombinieren/teilen. Streaming-Medien waren bis vor kurzem das Gebiet 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 übliche einzelne progressive src-URI, die an Medienelemente übergeben wird, durch einen Verweis auf ein MediaSource-Objekt zu ersetzen. Dieses dient als Container für Informationen wie den Bereitschaftszustand der Medien zur Wiedergabe und Verweise auf mehrere SourceBuffer-Objekte, die die verschiedenen Medienblöcke darstellen, aus denen der gesamte Stream besteht. MSE gibt uns eine feinere Kontrolle darüber, wie viel und wie oft Inhalte abgerufen werden, sowie etwas Kontrolle über Details der Speichernutzung, wie das Ausräumen von Puffern. Es legt den Grundstein für adaptive Bitrate-Streaming-Clients (wie diejenigen, 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 erhebliche Zeit, Rechenleistung und Energie erfordert. Die Verwendung externer Dienstprogramme zur Anpassung der Inhalte in ein geeignetes Format ist erforderlich. Während die Unterstützung der verschiedenen Mediencontainer mit MSE im Browser lückenhaft ist, bildet die Nutzung des H.264-Videocodecs, des AAC-Audiocodecs und des MP4-Containerformats eine gemeinsame Basis. MSE bietet auch eine API für die Laufzeit-Erkennung von Container- und Codec-Unterstützung.

Wenn Sie keine explizite Kontrolle über die Videoqualität im Laufe der Zeit, die Abrufrate der Inhalte oder die Speicherauslastung 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 zur Spezifizierung, wie adaptive Inhalte abgerufen werden sollen. Es ist effektiv eine Schicht, die auf MSE aufbaut, um adaptive Bitrate-Streaming-Clients zu erstellen. Während es andere Protokolle gibt (wie HTTP Live Streaming (HLS)), hat DASH die meiste 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 man DASH mit einem einfachen statischen Dateiserver unterstützen, was auch für CDNs ideal 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 beinhalten das "On-Demand"-Ansehen von Inhalten oder "Live"-Anzeigen. On-Demand ermöglicht einem Entwickler, sich Zeit zu nehmen, um die Assets in mehrere Auflösungen unterschiedlicher Qualität zu transkodieren.

Live-Profilinhalte können aufgrund ihrer Transkodierung und Übertragung Latenz einführen, daher ist DASH nicht für die Echtzeitkommunikation geeignet, wie es WebRTC ist. Es kann jedoch deutlich mehr Clientverbindungen als WebRTC unterstützen.

Es gibt zahlreiche verfügbare kostenlose und Open-Source-Tools für das Transkodieren von Inhalten und deren Vorbereitung für die Verwendung mit DASH, DASH-File-Servern 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 bei der Manipulation von MediaSources und SourceBuffers ermöglicht. Zum Abspielen der Medien wird die Eigenschaft MediaSource.handle verwendet, um eine Referenz auf ein MediaSourceHandle-Objekt zu erhalten, einen Proxy für das MediaSource, das zurück an den Hauptthread übertragen 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.

SourceBuffer

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

SourceBufferList

Eine einfache Containerliste für mehrere SourceBuffer-Objekte.

VideoPlaybackQuality

Enthält Informationen über die Videoqualität, die von einem <video>-Element abgespielt wird, wie die Anzahl der verlorenen oder beschädigten Frames. Wird von der Methode HTMLVideoElement.getVideoPlaybackQuality() zurückgegeben.

URL.createObjectURL()

Erstellt eine Objekt-URL, die auf ein MediaSource-Objekt zeigt, das dann als src-Wert eines HTML-Medienelements angegeben werden kann, um einen Medienstream abzuspielen.

HTMLMediaElement.seekable

Wenn ein MediaSource-Objekt von einem HTML-Medienelement abgespielt wird, gibt diese Eigenschaft ein TimeRanges-Objekt zurück, das die Zeitbereiche enthält, zu denen der Benutzer springen kann.

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.

• Transcodieren von Assets für 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.