MediaStreamTrackProcessor

The MediaStreamTrackProcessor interface of the Insertable Streams for MediaStreamTrack API consumes a video MediaStreamTrack object's source and generates a stream of VideoFrame objects.

Constructor

MediaStreamTrackProcessor()

Creates a new MediaStreamTrackProcessor object.

window.MediaStreamTrackProcessor() Experimental Non-standard

Creates a new MediaStreamTrackProcessor object on the main thread that can process both video and audio.

Instance properties

MediaStreamTrackProcessor.readable

Returns a ReadableStream.

Examples

The following example is from the article Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. It transfers a camera MediaStreamTrack 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 a VideoTrackGenerator whose MediaStreamTrack is transferred back and played. The media now flows in real time through the transform off the main 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);
};

Specifications

Browser compatibility

See also

• VideoTrackGenerator
• Insertable streams for MediaStreamTrack on developer.chrome.com

  Note: This article was written before the API was restricted to workers and video. Beware its use of the non-standard version of MediaStreamTrackProcessor which blocks on the main thread.