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

js
copyTo(destination)
copyTo(destination, options)

Parameters

destination

An ArrayBuffer, a TypedArray, or a DataView to copy to.

options Optional

An object containing the following:

rect Optional

The rectangle of pixels to copy from the VideoFrame. If unspecified, the visibleRect will 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.
layout Optional

A list containing the following values for each plane in the VideoFrame:

offset

An integer representing the offset in bytes where the given plane begins.

stride

An integer representing the number of bytes, including padding, used by each row of the plane. Planes may not overlap. If no layout is specified, the planes will be tightly packed.

format Optional

A pixel format for the pixel data in the destination. Can be set to "RGBA", "RGBX", "BGRA", "BGRX". If unspecified, the format will be used.

colorSpace Optional

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, "srgb will 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.

js
let buffer = new Uint8Array(videoFrame.allocationSize());
let layout = await videoFrame.copyTo(buffer);

The following example converts a portion of the videoFrame to RGB format.

js
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

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
copyTo
Chrome – Full support
Chrome 94 (Release date: 2021-09-21)
footnote Full support
Edge – Full support
Edge 94 (Release date: 2021-09-24)
footnote Full support
Firefox – Full support
Firefox 130 (Release date: 2024-09-03)
footnote Full support
Opera – Full support
Opera 80 (Release date: 2021-10-05)
footnote Full support
Safari – Full support
Safari 16.4 (Release date: 2023-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 94 (Release date: 2021-09-21)
footnote Full support
Firefox for Android – Full support
Firefox for Android 130 (Release date: 2024-09-03)
footnote Full support
Opera Android – Full support
Opera Android 66 (Release date: 2021-12-15)
footnote Full support
Safari on iOS – Full support
Safari on iOS 16.4 (Release date: 2023-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 17 (Release date: 2022-05-04)
footnote Full support
WebView Android – Full support
WebView Android 94 (Release date: 2021-09-21)
footnote Full support
WebView on iOS – Full support
WebView on iOS 16.4 (Release date: 2023-03-27)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support