MediaStreamTrackProcessor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Diese Funktion ist nur in Dedicated Web Workers verfügbar.

Warnung: Browser unterscheiden sich darin, in welchem globalen Kontext sie diese Schnittstelle bereitstellen (z. B. nur im Fenster in einigen Browsern und nur im dedizierten Worker in anderen), wodurch sie inkompatibel werden. Beachten Sie dies beim Vergleich der Unterstützung.

Die MediaStreamTrackProcessor-Schnittstelle der Insertable Streams für MediaStreamTrack API verarbeitet die Quelle eines Video-MediaStreamTrack-Objekts und erzeugt einen Stream von VideoFrame-Objekten.

Konstruktor

MediaStreamTrackProcessor()

Erstellt ein neues MediaStreamTrackProcessor-Objekt.

window.MediaStreamTrackProcessor()

Erstellt ein neues MediaStreamTrackProcessor-Objekt im Main-Thread, das sowohl Video als auch Audio verarbeiten kann.

Instanzeigenschaften

MediaStreamTrackProcessor.readable

Gibt einen ReadableStream zurück.

Beispiele

Das folgende Beispiel stammt aus dem Artikel Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. Es überträgt einen Kamera-MediaStreamTrack an einen Worker zur Verarbeitung. Der Worker erstellt eine Pipeline, die einen sepiafarbenen Filter auf die Videobilder anwendet und sie spiegelt. Die Pipeline endet in einem VideoTrackGenerator, dessen MediaStreamTrack zurückübertragen und abgespielt wird. Die Medien fließen nun in Echtzeit durch die Transformation außerhalb des Main-Thread.

js
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();
const worker = new Worker("worker.js");
worker.postMessage({ track }, [track]);
const { data } = await new Promise((r) => (worker.onmessage = r));
video.srcObject = new MediaStream([data.track]);

worker.js:

js
onmessage = async ({ data: { track } }) => {
  const vtg = new VideoTrackGenerator();
  self.postMessage({ track: vtg.track }, [vtg.track]);
  const { readable } = new MediaStreamTrackProcessor({ track });
  await readable
    .pipeThrough(new TransformStream({ transform }))
    .pipeTo(vtg.writable);
};

Spezifikationen

Specification
MediaStreamTrack Insertable Media Processing using Streams
# track-processor-interface

Browser-Kompatibilität

Siehe auch