VideoFrame

Mô tả

Một đối tượng VideoFrame có thể được tạo hoặc truy cập theo nhiều cách. MediaStreamTrackProcessor chia một media track thành các đối tượng VideoFrame riêng lẻ.

VideoFrame là một nguồn ảnh và có hàm khởi tạo chấp nhận bất kỳ nguồn canvas nào khác ( một SVGImageElement, một HTMLVideoElement, một HTMLCanvasElement, một ImageBitmap, một OffscreenCanvas, hoặc một VideoFrame khác). Điều này có nghĩa là có thể tạo khung hình từ một phần tử ảnh hoặc video.

Hàm khởi tạo thứ hai cho phép tạo một VideoFrame từ biểu diễn pixel nhị phân của nó trong một ArrayBuffer, một TypedArray, hoặc một DataView.

Các khung hình đã tạo có thể được chuyển thành media track, ví dụ với giao diện MediaStreamTrackGenerator tạo một media track từ luồng khung hình.

Hàm khởi tạo

VideoFrame()

Tạo một đối tượng VideoFrame mới.

Thuộc tính phiên bản

VideoFrame.format Read only

Trả về định dạng pixel của VideoFrame.

VideoFrame.codedWidth Read only

Trả về chiều rộng của VideoFrame tính bằng pixel, có thể bao gồm phần đệm không hiển thị, và trước khi xem xét các điều chỉnh tỷ lệ khung hình tiềm năng.

VideoFrame.codedHeight Read only

Trả về chiều cao của VideoFrame tính bằng pixel, có thể bao gồm phần đệm không hiển thị, và trước khi xem xét các điều chỉnh tỷ lệ khung hình tiềm năng.

VideoFrame.codedRect Read only

Trả về một DOMRectReadOnly với chiều rộng và chiều cao khớp với codedWidth và codedHeight.

VideoFrame.visibleRect Read only

Trả về một DOMRectReadOnly mô tả hình chữ nhật hiển thị của các pixel cho VideoFrame này.

VideoFrame.displayWidth Read only

Trả về chiều rộng của VideoFrame khi được hiển thị sau khi áp dụng điều chỉnh aspect ratio.

VideoFrame.displayHeight Read only

Trả về chiều cao của VideoFrame khi được hiển thị sau khi áp dụng điều chỉnh tỷ lệ khung hình.

VideoFrame.duration Read only

Trả về một số nguyên cho biết thời lượng của video tính bằng microsecond.

VideoFrame.timestamp Read only

Trả về một số nguyên cho biết dấu thời gian của video tính bằng microsecond.

VideoFrame.colorSpace Read only

Trả về một đối tượng VideoColorSpace.

VideoFrame.flip Read only Experimental

Trả về liệu VideoFrame có bị phản chiếu theo chiều ngang hay không.

VideoFrame.rotation Read only Experimental

Trả về góc xoay (0, 90, 180, hoặc 270) tính bằng độ theo chiều kim đồng hồ được áp dụng cho VideoFrame. Các số tùy ý (bao gồm số âm) được làm tròn đến góc phần tư tiếp theo.

Phương thức phiên bản

VideoFrame.allocationSize()

Trả về số byte cần thiết để chứa VideoFrame được lọc theo các tùy chọn được truyền vào phương thức.

VideoFrame.copyTo()

Sao chép nội dung của VideoFrame vào một ArrayBuffer.

VideoFrame.clone()

Tạo một đối tượng VideoFrame mới tham chiếu đến cùng tài nguyên media với bản gốc.

VideoFrame.close()

Xóa tất cả trạng thái và giải phóng tham chiếu đến tài nguyên media.

Ví dụ

Trong ví dụ sau, các khung hình được trả về từ MediaStreamTrackProcessor, sau đó được mã hóa. Xem ví dụ đầy đủ và tìm hiểu thêm trong bài viết Video processing with WebCodecs.

let frameCounter = 0;

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

const reader = mediaProcessor.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 {
    frameCounter++;
    const insertKeyframe = frameCounter % 150 === 0;
    encoder.encode(frame, { keyFrame: insertKeyframe });
    frame.close();
  }
}

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Video processing with WebCodecs
• WebCodecs examples