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()
Experimental
-
Creates a new MediaStreamTrackProcessor
object.
Instance properties
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
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
MediaStreamTrackProcessor |
94 |
94 |
No |
No |
80 |
No |
94 |
94 |
No |
66 |
No |
17.0 |
MediaStreamTrackProcessor |
94Chrome incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
94Edge incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
No |
No |
80Opera incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
No |
94Chrome incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
94Chrome incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
No |
66Opera incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
No |
17.0Samsung Internet incorrectly exposes this interface only on the Window scope, rather than the DedicatedWorker scope as defined in the spec.
|
readable |
94 |
94 |
No |
No |
80 |
No |
94 |
94 |
No |
66 |
No |
17.0 |