VideoFrame

描述

VideoFrame 物件可以透過多種方式建立或訪問。MediaStreamTrackProcessor 將媒體軌道分解為單獨的 VideoFrame 物件。

VideoFrame 是一個影像源，其建構函式可以接受任何其他畫布源（例如 SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或另一個 VideoFrame）。這意味著幀可以從影像或影片元素建立。

第二個建構函式允許從 ArrayBuffer、TypedArray 或 DataView 中的二進位制畫素表示形式建立 VideoFrame。

建立的幀隨後可以轉換為媒體軌道，例如使用 MediaStreamTrackGenerator 介面，該介面從幀流建立媒體軌道。

建構函式

VideoFrame()

建立一個新的 VideoFrame 物件。

例項屬性

VideoFrame.format 只讀

返回 VideoFrame 的畫素格式。

VideoFrame.codedWidth 只讀

返回 VideoFrame 的寬度（畫素），可能包含非可見填充，並且在考慮潛在的比例調整之前。

VideoFrame.codedHeight 只讀

返回 VideoFrame 的高度（畫素），可能包含非可見填充，並且在考慮潛在的比例調整之前。

VideoFrame.codedRect 只讀

返回一個 DOMRectReadOnly，其寬度和高度與 codedWidth 和 codedHeight 匹配。

VideoFrame.visibleRect 只讀

返回一個 DOMRectReadOnly，描述此 VideoFrame 的可見畫素矩形。

VideoFrame.displayWidth 只讀

返回應用 縱橫比 調整後顯示的 VideoFrame 的寬度。

VideoFrame.displayHeight 只讀

返回應用縱橫比調整後顯示的 VideoFrame 的高度。

VideoFrame.duration 只讀

返回一個整數，表示影片的持續時間（微秒）。

VideoFrame.timestamp 只讀

返回一個整數，表示影片的時間戳（微秒）。

VideoFrame.colorSpace 只讀

返回一個 VideoColorSpace 物件。

VideoFrame.flip 只讀 實驗性

返回 VideoFrame 是否水平翻轉。

VideoFrame.rotation 只讀 實驗性

返回應用於 VideoFrame 的順時針旋轉角度（0、90、180 或 270 度）。任意數字（包括負數）將四捨五入到下一個四分之一轉。

例項方法

VideoFrame.allocationSize()

返回容納 VideoFrame 所需的位元組數，該位元組數由傳遞給方法的選項進行過濾。

VideoFrame.copyTo()

將 VideoFrame 的內容複製到 ArrayBuffer。

VideoFrame.clone()

建立一個新的 VideoFrame 物件，該物件引用與原始物件相同的媒體資源。

VideoFrame.close()

清除所有狀態並釋放對媒體資源的引用。

示例

在以下示例中，幀從 MediaStreamTrackProcessor 返回，然後進行編碼。請參閱完整的示例，並在文章 使用 WebCodecs 進行影片處理 中瞭解更多資訊。

let frame_counter = 0;

const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);

const reader = media_processor.readable.getReader();
while (true) {
  const result = await reader.read();
  if (result.done) break;

  let frame = result.value;
  if (encoder.encodeQueueSize > 2) {
    // Too many frames in flight, encoder is overwhelmed
    // let's drop this frame.
    frame.close();
  } else {
    frame_counter++;
    const insert_keyframe = frame_counter % 150 === 0;
    encoder.encode(frame, { keyFrame: insert_keyframe });
    frame.close();
  }
}

規範

瀏覽器相容性

另見

• 使用 WebCodecs 進行影片處理
• WebCodecs 示例