Einfügbare Streams für MediaStreamTrack

Der Inhalt von MediaStreamTrack wird als Stream angezeigt, der manipuliert oder zum Generieren neuer Inhalte verwendet werden kann

Thomas Steiner

Hintergrund

Im Kontext der Media Capture und Streams API stellt die MediaStreamTrack-Schnittstelle einen einzelnen Medienspur in einem Stream dar. In der Regel sind dies Audio- oder Videospuren. Es können aber auch andere Arten von Tracks vorhanden sein. MediaStream-Objekte bestehen aus null oder mehr MediaStreamTrack-Objekten, die verschiedene Audio- oder Videospuren darstellen. Jedes MediaStreamTrack kann einen oder mehrere Kanäle haben. Der Kanal stellt die kleinste Einheit eines Medienstreams dar, z. B. ein mit einem bestimmten Lautsprecher verknüpftes Audiosignal, z. B. links oder rechts bei einer Stereoaudiospur.

Was sind einfügbare Streams für MediaStreamTrack?

Die Kernidee hinter einfügbaren Streams für MediaStreamTrack besteht darin, den Inhalt einer MediaStreamTrack als Sammlung von Streams verfügbar zu machen (gemäß Definition in der WhatWG-Streams API). Diese Streams können bearbeitet werden, um neue Komponenten einzuführen.

Wenn Sie Entwicklern direkten Zugriff auf den Video- oder Audiostream gewähren, können sie Änderungen direkt am Stream vornehmen. Im Gegensatz dazu müssen Entwickler zur Durchführung derselben Videobearbeitungsaufgabe mit herkömmlichen Methoden Mittel wie <canvas>-Elemente nutzen. Einzelheiten zu diesem Prozess finden Sie beispielsweise unter Video + Canvas = Magie.

Unterstützte Browser

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

Anwendungsfälle

Zu den Anwendungsfällen für einfügbare Streams für MediaStreamTrack gehören unter anderem:

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

Einfügbare Streams für MediaStreamTrack verwenden

Funktionserkennung

So können Sie für die MediaStreamTrack-Unterstützung einfügbare Streams nach Feature 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 den MediaStreamTrack konzeptionell in zwei Komponenten auf:

  • Das MediaStreamTrackProcessor, das die Quelle eines MediaStreamTrack-Objekts verwendet und einen Stream von Mediaframes generiert, insbesondere VideoFrame- oder AudioFrame-Objekte. Sie können sich dies als eine Track-Senke vorstellen, die die nicht codierten Frames aus dem Track als ReadableStream verfügbar machen kann.
  • Das MediaStreamTrackGenerator, das einen Stream von Mediaframes verarbeitet und eine MediaStreamTrack-Schnittstelle verfügbar macht. Sie kann für jede Senke bereitgestellt werden, genau wie ein Track von getUserMedia(). Sie nimmt Mediaframes als Eingabe an.

MediaStreamTrackProcessor

Ein MediaStreamTrackProcessor-Objekt stellt nur die Eigenschaft readable zur Verfügung. Sie ermöglicht das Lesen der Frames aus MediaStreamTrack. Wenn der Track ein Videotrack ist, sind aus readable gelesene Blöcke VideoFrame-Objekte. Wenn es sich bei dem Titel um einen Audiotrack handelt, sind die aus readable gelesenen Blöcke AudioFrame-Objekte.

MediaStreamTrackGenerator

Ein MediaStreamTrackGenerator-Objekt stellt ebenfalls eine Eigenschaft writable bereit. Dabei handelt es sich um ein WritableStream, mit dem Mediaframes in MediaStreamTrackGenerator geschrieben werden können, das wiederum 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 die Art "video" ist, akzeptiert der Stream VideoFrame-Objekte und schlägt bei jedem anderen Typ fehl. Wenn ein Frame in writable geschrieben wird, wird die close()-Methode des Frames automatisch aufgerufen. Die Medienressourcen des Frames sind dann nicht mehr über JavaScript zugänglich.

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

Alle Tipps umsetzen

Die Kernidee besteht darin, eine Verarbeitungskette wie folgt zu erstellen:

Plattform-Tracking → 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 die Demo zum QR-Code-Scanner aus dem obigen Abschnitt in einem Desktop- oder mobilen Browser in Aktion sehen. Halten Sie einen QR-Code vor die Kamera. Die App erkennt ihn und markiert ihn. Sie können den Quellcode der Anwendung auf Glitch sehen.

Ein QR-Code-Scanner, der auf einem Desktop-Browser-Tab ausgeführt wird und einen erkannten und markierten QR-Code auf dem Smartphone zeigt, das der Nutzer vor die Kamera des Laptops hält.

Sicherheits- und Datenschutzaspekte

Die Sicherheit dieser API stützt sich auf die vorhandenen Mechanismen in der Webplattform. Wenn Daten über die Schnittstellen VideoFrame und AudioFrame verfügbar gemacht werden, gelten die Regeln dieser Schnittstellen für den Umgang mit Daten mit Herkunftsorten. Beispielsweise ist der Zugriff auf Daten von ursprungsübergreifenden Ressourcen aufgrund bestehender Einschränkungen für den Zugriff auf diese Ressourcen nicht möglich. 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 Mediendaten, die diese API bereitstellt, 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 so funktioniert, wie Sie erwartet haben? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Sie können ein Spezifikationsproblem im entsprechenden GitHub-Repository melden oder Ihre Gedanken zu einem vorhandenen Problem hinzufügen.

Problem mit der Implementierung melden

Haben Sie einen Fehler bei der Implementierung von Chromium gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie Blink>MediaStream in das Feld Komponenten ein. Glitch eignet sich perfekt, um schnelle und einfache Reproduzierungen zu teilen.

Unterstützung für die API zeigen

Planst du, für MediaStreamTrack einfügbare Streams zu verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren und anderen Browseranbietern zu zeigen, wie wichtig es ist, sie zu unterstützen.

Sende einen Tweet mit dem Hashtag #InsertableStreams an @ChromiumDev und teile uns mit, wo und wie du den Dienst verwendest.

Danksagungen

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