Der Inhalt von MediaStreamTrack
wird als Stream angezeigt, der manipuliert oder zum Generieren neuer Inhalte verwendet werden kann
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 einesMediaStreamTrack
-Objekts verwendet und einen Stream von Mediaframes generiert, insbesondereVideoFrame
- oderAudioFrame
-Objekte. Sie können sich dies als eine Track-Senke vorstellen, die die nicht codierten Frames aus dem Track alsReadableStream
verfügbar machen kann. - Das
MediaStreamTrackGenerator
, das einen Stream von Mediaframes verarbeitet und eineMediaStreamTrack
-Schnittstelle verfügbar macht. Sie kann für jede Senke bereitgestellt werden, genau wie ein Track vongetUserMedia()
. 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.
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.
Nützliche Links
- Entwurf der Spezifikation
- Erklärung
- ChromeStatus
- Chromium-Programmfehler
- TAG-Überprüfung
- GitHub-Repository
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