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非標準版本的引用，該版本會阻塞 主執行緒。