MediaStreamTrackProcessor

Limited availability

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

Note: This feature is only available inDedicated Web Workers.

Warning:Browsers differ on which global context they expose this interface in (e.g., only window in some browsers and only dedicated worker in others), making them incompatible. Keep this in mind when comparing support.

TheMediaStreamTrackProcessor interface of theInsertable Streams for MediaStreamTrack API consumes a videoMediaStreamTrack object's source and generates a stream ofVideoFrame objects.

Constructor

MediaStreamTrackProcessor(): Creates a newMediaStreamTrackProcessor object.
window.MediaStreamTrackProcessor()Experimental Non-standard: Creates a newMediaStreamTrackProcessor object on the main thread that can process both video and audio.

Instance properties

MediaStreamTrackProcessor.readable: Returns aReadableStream.

Examples

The following example is from the articleUnbundling MediaStreamTrackProcessor and VideoTrackGenerator. Ittransfers a cameraMediaStreamTrack to a worker for processing. The worker creates a pipeline that applies a sepia tone filter to the video frames and mirrors them. The pipeline culminates in aVideoTrackGenerator whoseMediaStreamTrack is transferred back and played. The media now flows in real time through the transform off themain thread.

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);};