The VideoFrame
interface of the Web Codecs API represents a frame of a video.
VideoFrame
is a transferable object.
The VideoFrame
interface of the Web Codecs API represents a frame of a video.
VideoFrame
is a transferable object.
A VideoFrame
object can be created or accessed in a number of ways. The MediaStreamTrackProcessor
breaks a media track into individual VideoFrame
objects.
A VideoFrame
is an image source and has a constructor that accepts any other canvas source ( an SVGImageElement
, an HTMLVideoElement
, an HTMLCanvasElement
, an ImageBitmap
, an OffscreenCanvas
, or another VideoFrame
). This means that a frame can be created from an image or video element.
A second constructor enables the creation of a VideoFrame
from its binary pixel representation in an ArrayBuffer
, a TypedArray
, or a DataView
.
Created frames may then turned into a media track, for example with the MediaStreamTrackGenerator
interface that creates a media track from a stream of frames.
VideoFrame()
Creates a new VideoFrame
object.
VideoFrame.format
Read only
Returns the pixel format of the VideoFrame
.
VideoFrame.codedWidth
Read only
Returns the width of the VideoFrame
in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
VideoFrame.codedHeight
Read only
Returns the height of the VideoFrame
in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
VideoFrame.codedRect
Read only
Returns a DOMRectReadOnly
with the width and height matching codedWidth
and codedHeight
.
VideoFrame.visibleRect
Read only
Returns a DOMRectReadOnly
describing the visible rectangle of pixels for this VideoFrame
.
VideoFrame.displayWidth
Read only
Returns the width of the VideoFrame
when displayed after applying aspect ratio adjustments.
VideoFrame.displayHeight
Read only
Returns the height of the VideoFrame
when displayed after applying aspect ratio adjustments.
VideoFrame.duration
Read only
Returns an integer indicating the duration of the video in microseconds.
VideoFrame.timestamp
Read only
Returns an integer indicating the timestamp of the video in microseconds.
VideoFrame.colorSpace
Read only
Returns a VideoColorSpace
object.
VideoFrame.allocationSize()
Returns the number of bytes required to hold the VideoFrame
as filtered by options passed into the method.
VideoFrame.copyTo()
Copies the contents of the VideoFrame
to an ArrayBuffer
.
VideoFrame.clone()
Creates a new VideoFrame
object with reference to the same media resource as the original.
VideoFrame.close()
Clears all states and releases the reference to the media resource.
In the following example frames are returned from a MediaStreamTrackProcessor
, then encoded. See the full example and read more about it in the article Video processing with WebCodecs.
js
let frame_counter = 0; const track = stream.getVideoTracks()[0]; const media_processor = new MediaStreamTrackProcessor(track); const reader = media_processor.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 { frame_counter++; const insert_keyframe = frame_counter % 150 === 0; encoder.encode(frame, { keyFrame: insert_keyframe }); frame.close(); } }
Specification |
---|
WebCodecs # videoframe-interface |
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 |
VideoFrame |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
allocationSize |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
clone |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
close |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
codedHeight |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
codedRect |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
codedWidth |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
colorSpace |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
copyTo |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
displayHeight |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
displayWidth |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
duration |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
format |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
timestamp |
94 | 94 | No | No | 80 | 16.4 | 94 | 94 | No | 66 | 16.4 | 17.0 |
visibleRect |
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