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 window in einigen Browsern und nur dedizierter Worker in anderen), was sie inkompatibel macht. Beachten Sie dies, wenn Sie Unterstützung vergleichen.
Die MediaStreamTrackProcessor-Schnittstelle der Insertable Streams for MediaStreamTrack API konsumiert 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 Haupt-Thread, 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 eine 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 Haupt-Threads.
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. Seien Sie vorsichtig bei der Verwendung der nicht standardmäßigen Version von
MediaStreamTrackProcessor, die im Haupt-Thread blockiert.