MediaStreamTrackProcessor

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

Constructor

MediaStreamTrackProcessor.MediaStreamTrackProcessor()

Creates a new MediaStreamTrackProcessor object.

Properties

MediaStreamTrackProcessor.readable

Returns a ReadableStream.

Examples

The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application, which transforms the stream accessed via MediaStreamTrackProcessor.readable by highlighting the barcode.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

Specifications

No specification found

No specification data found for api.MediaStreamTrackProcessor.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

No compatibility data found for api.MediaStreamTrackProcessor.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrackProcessor