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 diese Schnittstelle bereitstellen (z. B. nur window in einigen Browsern und nur dedizierter Worker in anderen), was sie inkompatibel macht. Beachten Sie dies, wenn Sie die Unterstützung vergleichen.

Die MediaStreamTrackProcessor-Schnittstelle der Insertable Streams for MediaStreamTrack API verbraucht 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 Sepia-Ton-Filter auf die Videoframes 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 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