Einfügbare Streams für MediaStreamTrack

Thomas Steiner

Veröffentlicht: 4. Mai 2021

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 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 Idee hinter einfügbaren Streams für MediaStreamTrack besteht darin, den Inhalt eines MediaStreamTrack als Sammlung von Streams (gemäß der WHATWG Streams API) 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

So erkennen Sie, ob einfügbare Streams für MediaStreamTrack unterstützt werden:

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 verwendet und einen Stream von Media-Frames generiert, insbesondere VideoFrame- oder AudioFrame-Objekte. Sie können sich das als eine Senke für Tracks vorstellen, die in der Lage ist, die nicht codierten Frames aus dem Track als ReadableStream verfügbar zu machen.
  • Die MediaStreamTrackGenerator, die einen Stream von Media-Frames verarbeitet und eine MediaStreamTrack-Schnittstelle bereitstellt. Er kann an jede Senke weitergeleitet 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 dem 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 das MediaStreamTrackGenerator geschrieben werden können, das selbst ein MediaStreamTrack ist. Wenn das Attribut kind auf "audio" festgelegt ist, 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 → Transformation → 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 Abschnitt oben 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 und zeigt einen erkannten und hervorgehobenen QR‑Code auf dem Smartphone an, das der Nutzer vor die Kamera des Laptops hält.

Überlegungen zu Sicherheit und Datenschutz

Die Sicherheit dieser API basiert auf vorhandenen Mechanismen auf der Webplattform. Da Daten über die Schnittstellen VideoFrame und AudioFrame bereitgestellt werden, gelten die Regeln dieser Schnittstellen für den Umgang mit Daten, die mit dem Ursprung verknüpft sind. Auf Daten aus ursprungsübergreifenden Ressourcen kann beispielsweise aufgrund bestehender Einschränkungen für den Zugriff auf solche Ressourcen nicht zugegriffen werden. So ist es 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 bestehenden 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 und eine Anleitung zur Reproduktion an und geben Sie Blink>MediaStream in das Feld Components (Komponenten) ein.

Unterstützung für die API

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. Diese Dokumentation wurde von Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout und François Beaufort geprüft.