MediaStreamTrackProcessor

Limited availability

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

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

Warnung: Browser unterscheiden sich darin, in welchem globalen Kontext sie dieses Interface darstellen (z. B. nur window in einigen Browsern und nur dedizierter Worker in anderen), was sie inkompatibel macht. Behalten Sie dies im Hinterkopf, wenn Sie die Unterstützung vergleichen.

Das MediaStreamTrackProcessor-Interface der Insertable Streams for MediaStreamTrack API konsumiert die Quelle eines Video-MediaStreamTrack-Objekts und erzeugt einen Strom 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.

Instanz-Eigenschaften

MediaStreamTrackProcessor.readable

Gibt einen ReadableStream zurück.

Beispiele

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

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
# mediastreamtrackprocessor

Browser-Kompatibilität

Siehe auch