The VideoFrame()
constructor creates a new VideoFrame
object representing a frame of a video.
The VideoFrame()
constructor creates a new VideoFrame
object representing a frame of a video.
js
new VideoFrame(image) new VideoFrame(image, options) new VideoFrame(data, options)
The first type of constructor (see above) creates a new VideoFrame
from an image. Its parameters are:
image
An image containing the image data for the new VideoFrame
. It can be one of the following objects: an SVGImageElement
, an HTMLVideoElement
, an HTMLCanvasElement
, an ImageBitmap
, an OffscreenCanvas
, or another VideoFrame
.
options
Optional
An object containing the following:
duration
Optional
An integer representing the duration of the frame in microseconds.
timestamp
An integer representing the timestamp of the frame in microseconds.
alpha
Optional
A string, describing how the user agent should behave when dealing with alpha channels. The default value is "keep".
"keep"
: Indicates that the user agent should preserve alpha channel data."discard"
: Indicates that the user agent should ignore or remove alpha channel data.visibleRect
Optional
An object representing the visible rectangle of the VideoFrame
, containing the following:
displayWidth
Optional
The width of the VideoFrame
when displayed after applying aspect-ratio adjustments.
displayHeight
Optional
The height of the VideoFrame
when displayed after applying aspect-ratio adjustments.
The second type of constructor (see above) creates a new VideoFrame
from an ArrayBuffer
. Its parameters are:
data
An ArrayBuffer
containing the data for the new VideoFrame
.
options
An object containing the following:
format
A string representing the video pixel format. One of the following strings, which are fully described on the page for the format
property:
"I420"
"I420A"
"I422"
"I444"
"NV12"
"RGBA"
"RGBX"
"BGRA"
"BGRX"
codedWidth
Width of the VideoFrame
in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
codedHeight
Height of the VideoFrame
in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
timestamp
An integer representing the timestamp of the frame in microseconds.
duration
Optional
An integer representing the duration of the frame in microseconds.
layout
Optional
A list containing the following values for each plane in the VideoFrame
:
visibleRect
Optional
An object representing the visible rectangle of the VideoFrame
, containing the following:
displayWidth
Optional
The width of the VideoFrame
when displayed after applying aspect ratio adjustments.
displayHeight
Optional
The height of the VideoFrame
when displayed after applying aspect ratio adjustments.
colorSpace
An object representing the color space of the VideoFrame
, containing the following:
primaries
A string representing the video color primaries, described on the page for the VideoColorSpace.primaries
property.
transfer
A string representing the video color transfer function, described on the page for the VideoColorSpace.transfer
property.
matrix
A string representing the video color matrix, described on the page for the VideoColorSpace.matrix
property.
fullRange
A Boolean. If true
, indicates that full-range color values are used.
The following examples are from the article Video processing with WebCodecs. In this first example, a VideoFrame
is created from a canvas.
js
const cnv = document.createElement("canvas"); // draw something on the canvas // ... let frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });
In the following example a VideoFrame
is created from a TypedArray
.
js
const pixelSize = 4; const init = { timestamp: 0, codedWidth: 320, codedHeight: 200, format: "RGBA", }; let data = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize); for (let x = 0; x < init.codedWidth; x++) { for (let y = 0; y < init.codedHeight; y++) { let offset = (y * init.codedWidth + x) * pixelSize; data[offset] = 0x7f; // Red data[offset + 1] = 0xff; // Green data[offset + 2] = 0xd4; // Blue data[offset + 3] = 0x0ff; // Alpha } } let frame = new VideoFrame(data, init);
Specification |
---|
WebCodecs # dom-videoframe-videoframe |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
VideoFrame |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame/VideoFrame