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 可插入媒體處理 |
瀏覽器相容性
載入中…