VideoFrame.VideoFrame()
The VideoFrame()
constructor creates a new VideoFrame
object representing a frame of a video.
Syntax
new VideoFrame(image, init); new VideoFrame(data, init);
Parameters
The first type of constructor (see above) creates a new VideoFrame
from a CanvasImageSource
. Its parameters are:
image
-
A
CanvasImageSource
containing the image data for the newVideoFrame
. -
init
Optional -
A dictionary object containing the following:
duration
-
An integer representing the duration of the frame in microseconds.
timestamp
-
An integer representing the timestamp of the frame in microseconds.
alpha
-
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.
-
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 newVideoFrame
. init
-
A dictionary 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
-
An integer representing the timestamp of the frame in microseconds.
codedHeight
-
An integer representing the timestamp of the frame in microseconds.
timestamp
-
An integer representing the timestamp of the frame in microseconds.
-
duration
Optional -
An integer representing the duration of the frame in microseconds.
Examples
The following examples are from the article Video processing with WebCodecs. In this first example, a VideoFrame
is created from a canvas.
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 BufferSource
.
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);
Specifications
Specification |
---|
WebCodecs # dom-videoframe-videoframe |
Browser compatibility
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 |
No |
94 |
94 |
No |
No |
No |
No |
© 2005–2021 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