Einfügbare Streams für MediaStreamTrack

Der Inhalt eines MediaStreamTrack wird als Stream bereitgestellt, der manipuliert oder zum Generieren neuer Inhalte verwendet werden kann.

Thomas Steiner

Hintergrund

Im Kontext der Media Capture and Streams API stellt die Schnittstelle MediaStreamTrack einen einzelnen Mediatrack in einem Stream dar. In der Regel handelt es sich dabei um Audio- oder Videotracks, es können aber auch andere Tracktypen vorhanden sein. MediaStream-Objekte bestehen aus null oder mehr MediaStreamTrack-Objekten, die verschiedene Audio- oder Videotracks darstellen. Jede MediaStreamTrack kann einen oder mehrere Channels haben. Der Channel ist die kleinste Einheit eines Media-Streams, z. B. ein Audiosignal, das einem bestimmten Lautsprecher zugeordnet ist, z. B. links oder rechts in einem Stereo-Audio-Track.

Was sind einfügbare Streams für MediaStreamTrack?

Die grundlegende Idee hinter einfügbaren Streams für MediaStreamTrack besteht darin, den Inhalt eines MediaStreamTrack als Sammlung von Streams (wie in der WHATWG Streams API definiert) verfügbar zu machen. Diese Streams können manipuliert werden, um neue Komponenten einzuführen.

Wenn Entwickler direkten Zugriff auf den Video- oder Audiostream erhalten, können sie Änderungen direkt auf den Stream anwenden. Im Gegensatz dazu müssen Entwickler bei der Umsetzung derselben Videobearbeitungsaufgabe mit herkömmlichen Methoden Zwischenelemente wie <canvas>-Elemente verwenden. Weitere Informationen zu dieser Art von Prozess finden Sie beispielsweise unter video + canvas = magic.

Unterstützte Browser

Einfügbare Streams für MediaStreamTrack werden ab Chrome 94 unterstützt.

Anwendungsfälle

Anwendungsfälle für einfügbare Streams für MediaStreamTrack:

  • Videokonferenz-Gadgets wie „lustige Hüte“ oder virtuelle Hintergründe.
  • Sprachverarbeitung wie Software-Vocoder.

Einfügbare Streams für MediaStreamTrack verwenden

Funktionserkennung

So kannst du die Unterstützung von einfügbaren Streams für MediaStreamTrack erkennen:

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Wichtige Konzepte

Einfügbare Streams für MediaStreamTrack basieren auf Konzepten, die zuvor von WebCodecs vorgeschlagen wurden, und teilen MediaStreamTrack konzeptionell in zwei Komponenten auf:

  • Die MediaStreamTrackProcessor, die die Quelle eines MediaStreamTrack-Objekts nutzt und einen Stream von Media-Frames generiert, insbesondere VideoFrame- oder AudioFrame-Objekte. Sie können sich das als Track-Senke vorstellen, die die nicht codierten Frames des Tracks als ReadableStream verfügbar machen kann.
  • Die MediaStreamTrackGenerator, die einen Stream von Media-Frames verarbeitet und eine MediaStreamTrack-Schnittstelle bereitstellt. Er kann an jede Senke weitergegeben werden, genau wie ein Track aus getUserMedia(). Sie verwendet Media-Frames als Eingabe.

MediaStreamTrackProcessor

Ein MediaStreamTrackProcessor-Objekt stellt eine Eigenschaft bereit: readable. Dadurch können die Frames aus MediaStreamTrack gelesen werden. Wenn der Track ein Videotrack ist, sind die aus readable gelesenen Chunks VideoFrame-Objekte. Wenn es sich bei dem Track um einen Audiotrack handelt, sind die aus readable gelesenen Chunks AudioFrame-Objekte.

MediaStreamTrackGenerator

Ein MediaStreamTrackGenerator-Objekt stellt ebenfalls eine Eigenschaft bereit, writable, die ein WritableStream ist, mit dem Media-Frames in den MediaStreamTrackGenerator geschrieben werden können, der selbst ein MediaStreamTrack ist. Wenn das Attribut kind den Wert "audio" hat, akzeptiert der Stream AudioFrame-Objekte und schlägt bei jedem anderen Typ fehl. Wenn „kind“ "video" ist, akzeptiert der Stream VideoFrame-Objekte und schlägt bei jedem anderen Typ fehl. Wenn ein Frame in writable geschrieben wird, wird automatisch die close()-Methode des Frames aufgerufen, sodass seine Media-Ressourcen nicht mehr über JavaScript zugänglich sind.

Ein MediaStreamTrackGenerator ist ein Track, für den eine benutzerdefinierte Quelle implementiert werden kann, indem Media-Frames in das Feld writable geschrieben werden.

Zusammenfassung

Die Grundidee besteht darin, eine Verarbeitungskette zu erstellen, die so aussieht:

Plattform-Track → Prozessor → Transformieren → Generator → Plattform-Senken

Das folgende Beispiel veranschaulicht diese Kette für eine Barcode-Scanner-Anwendung, die erkannte Barcodes in einem Live-Videostream hervorhebt.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Demo

Sie können sich die Demo des QR‑Code-Scanners aus dem obigen Abschnitt in einem Desktop- oder mobilen Browser ansehen. Halten Sie einen QR‑Code vor die Kamera. Die App erkennt ihn und hebt ihn hervor. Den Quellcode der Anwendung finden Sie auf GitHub.

Ein QR-Code-Scanner wird in einem Desktopbrowser-Tab ausgeführt. Auf dem Smartphone, das der Nutzer vor die Laptopkamera hält, wird ein erkannter und hervorgehobener QR-Code angezeigt.

Überlegungen zu Sicherheit und Datenschutz

Die Sicherheit dieser API basiert auf vorhandenen Mechanismen auf der Webplattform. Da Daten über die Schnittstellen VideoFrame und AudioFrame verfügbar gemacht werden, gelten die Regeln dieser Schnittstellen für den Umgang mit Daten, die mit dem Ursprung verknüpft sind. So kann beispielsweise aufgrund bestehender Einschränkungen für den Zugriff auf solche Ressourcen nicht auf Daten aus ursprungsübergreifenden Ressourcen zugegriffen werden. Es ist beispielsweise nicht möglich, auf die Pixel eines ursprungsübergreifenden Bild- oder Videoelements zuzugreifen. Außerdem unterliegt der Zugriff auf Mediendaten von Kameras, Mikrofonen oder Bildschirmen der Nutzerautorisierung. Die über diese API bereitgestellten Media-Daten sind bereits über andere APIs verfügbar.

Feedback

Das Chromium-Team möchte mehr über Ihre Erfahrungen mit einfügbaren Streams für MediaStreamTrack erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melden Sie einen Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und geben Sie Blink>MediaStream in das Feld Components (Komponenten) ein.

API-Support zeigen

Planen Sie, einfügbare Streams für MediaStreamTrack zu verwenden? Ihr öffentlicher Support hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #InsertableStreams und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Danksagungen

Die Spezifikation für einfügbare Streams für MediaStreamTrack wurde von Harald Alvestrand und Guido Urdaneta geschrieben. Dieser Artikel wurde von Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout und François Beaufort geprüft. Hero-Image von Chris Montgomery auf Unsplash.