MediaStreamTrack API 的可插入流
注意：此功能仅在 专用 Web Worker 中可用。
MediaStreamTrack API 的可插入流 提供了一种在消耗 MediaStreamTrack 的视频帧时处理它们的方法。
概念与用法
在处理实时视频时，有时您需要插入视觉元素或以其他方式处理视频帧流。例如，一个应用程序可能包含两个需要合并的轨道，例如天气地图和解释地图的演示者视频。或者，您可能希望对一个轨道进行处理以模糊背景，或引入其他元素（例如为人物添加有趣的帽子等）。这里描述的 API 提供了对视频流的直接访问，允许您实时操作它。
为确保最佳性能，除非另有说明，否则这些 API 仅在 专用工作线程 中可用。
接口
MediaStreamTrackProcessor实验性-
消耗
MediaStreamTrack对象的源并产生视频帧流。 VideoTrackGenerator实验性-
创建一个用作
MediaStreamTrack视频源的WritableStream。 MediaStreamTrackGenerator实验性 非标准-
创建一个用作视频或音频
MediaStreamTrack源的WritableStream。仅在 主线程 上可用。
示例
以下示例来自文章 Unbundling MediaStreamTrackProcessor and VideoTrackGenerator。它将摄像头 MediaStreamTrack 传输 到工作线程进行处理。工作线程创建一个管道，对视频帧应用棕褐色滤镜并对其进行镜像。该管道最终通过 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 可插入媒体处理 |
浏览器兼容性
加载中…