VideoFrame: copyTo() method
Baseline
2024
Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Note: This feature is available in Dedicated Web Workers.
The copyTo() method of the VideoFrame interface copies the contents of the VideoFrame to an ArrayBuffer.
Syntax
copyTo(destination)
copyTo(destination, options)
Parameters
destination-
An
ArrayBuffer, aTypedArray, or aDataViewto copy to. optionsOptional-
An object containing the following:
rectOptional-
The rectangle of pixels to copy from the
VideoFrame. If unspecified, thevisibleRectwill be used. This is in the format of a dictionary object containing:x: The x-coordinate.y: The y-coordinate.width: The width of the frame.height: The height of the frame.
layoutOptional-
A list containing the following values for each plane in the
VideoFrame: formatOptional-
A pixel format for the pixel data in the
destination. Can be set to"RGBA","RGBX","BGRA","BGRX". If unspecified, theformatwill be used. colorSpaceOptional-
Specifies the color space of the pixel data in the
destination. Can be set to"srgb"for the sRGB color space or"display-p3"for the display-p3 color space. Only applicable for RGB pixel formats. If unspecified,"srgbwill be used.
Return value
A Promise that resolves to the layout of the copy when the copy has completed.
Examples
The following example copies the entire contents of videoFrame.
let buffer = new Uint8Array(videoFrame.allocationSize());
let layout = await videoFrame.copyTo(buffer);
The following example converts a portion of the videoFrame to RGB format.
const videoRect = {
x: 100,
y: 100,
width: 80,
height: 60,
};
const options = {
rect: videoRect,
format: "RGBX",
colorSpace: "display-p3",
};
const size = videoFrame.allocationSize(options);
const buffer = new ArrayBuffer(size);
const layout = await videoFrame.copyTo(buffer, options);
Specifications
| Specification |
|---|
| WebCodecs> # dom-videoframe-copyto> |
Browser compatibility
Loading…