MediaStreamTrackProcessor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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 window in einigen Browsern und nur im dedizierten 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 verwendet 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 Hauptthread, das sowohl Video als auch Audio verarbeiten kann.
Instanzeigenschaften
MediaStreamTrackProcessor.discardedFrames-
Eine Zahl, die angibt, wie viele Frames vom Prozessor verworfen wurden.
MediaStreamTrackProcessor.readable-
Gibt einen
ReadableStreamzurück. MediaStreamTrackProcessor.totalFrames-
Eine Zahl, die angibt, wie viele Frames insgesamt vom Prozessor empfangen wurden.
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 abseits des Hauptthreads.
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:
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
| Spezifikation |
|---|
| MediaStreamTrack Insertable Media Processing using Streams # mediastreamtrackprocessor |
Browser-Kompatibilität
Siehe auch
VideoTrackGenerator- Insertable streams for MediaStreamTrack auf developer.chrome.com
Hinweis: Dieser Artikel wurde verfasst, bevor die API auf Worker und Video beschränkt wurde. Beachten Sie die Verwendung der nicht-standardmäßigen Version von
MediaStreamTrackProcessor, die im Hauptthread blockiert.