MediaStreamTrackProcessor
注意：此功能仅在 专用 Web Worker 中可用。
警告： 浏览器在将此接口暴露给全局上下文方面存在差异（例如，有些浏览器仅在 window 中暴露，而另一些浏览器仅在专用 worker 中暴露），这导致它们不兼容。在比较支持度时请牢记这一点。
MediaStreamTrackProcessor 接口（属于 Insertable Streams for MediaStreamTrack API）会消耗 MediaStreamTrack 对象的视频源，并生成一个 VideoFrame 对象流。
构造函数
MediaStreamTrackProcessor()-
创建一个新的
MediaStreamTrackProcessor对象。 window.MediaStreamTrackProcessor()实验性的 非标准-
在 主线程上创建一个新的
MediaStreamTrackProcessor对象，它可以处理视频和音频。
实例属性
示例
以下示例来自文章 Unbundling MediaStreamTrackProcessor and VideoTrackGenerator。它将一个摄像头的 MediaStreamTrack 传输到一个 worker 中进行处理。该 worker 创建一个管道，对视频帧应用棕褐色滤镜并镜像它们。该管道最终导向一个 VideoTrackGenerator，其 MediaStreamTrack 被传输回并播放。媒体现在通过转换器实时地从 主线程流出。
js
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
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);
};
规范
| 规范 |
|---|
| 使用流进行 MediaStreamTrack 可插入媒体处理 # mediastreamtrackprocessor |
浏览器兼容性
加载中…
另见
VideoTrackGenerator- developer.chrome.com 上的 Insertable streams for MediaStreamTrack
注意： 本文写于 API 仅限于 worker 和视频之前。请注意其对
MediaStreamTrackProcessor非标准版本的引用，该版本会阻塞 主线程。