VideoTrackGenerator

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

注意:此功能僅在 專用 Web Worker 中可用。

VideoTrackGenerator 介面屬於 Insertable Streams for MediaStreamTrack API,它有一個 WritableStream 屬性,該屬性透過接收 VideoFrame 幀流作為輸入,充當 MediaStreamTrack 的源。

建構函式

VideoTrackGenerator() Experimental

建立一個新的 VideoTrackGenerator 物件,該物件接受 VideoFrame 物件。

例項屬性

VideoTrackGenerator.muted Experimental

一個布林屬性,用於臨時暫停或恢復輸出軌道上的影片幀生成。

VideoTrackGenerator.track Experimental

輸出的 MediaStreamTrack

VideoTrackGenerator.writable Experimental

輸入的 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 可插入媒體處理
# videotrackgenerator

瀏覽器相容性

另見