---
title: "VideoFrame | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface VideoFrame

The **`VideoFrame`** interface of the Web Codecs API represents a frame of a video.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame)

interface VideoFrame {  
    [codedHeight](#codedheight): number;  
    [codedRect](#codedrect): [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/) | null;  
    [codedWidth](#codedwidth): number;  
    [colorSpace](#colorspace): [VideoColorSpace](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoColorSpace/);  
    [displayHeight](#displayheight): number;  
    [displayWidth](#displaywidth): number;  
    [duration](#duration): number | null;  
    [format](#format): [VideoPixelFormat](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.VideoPixelFormat/) | null;  
    [timestamp](#timestamp): number;  
    [visibleRect](#visiblerect): [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/) | null;  
    [allocationSize](#allocationsize-1)(options?: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/)): number;  
    [clone](#clone-1)(): VideoFrame;  
    [close](#close-1)(): void;  
    [copyTo](#copyto-1)(  
        destination: [AllowSharedBufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AllowSharedBufferSource/),  
        options?: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/),  
    ): Promise<[PlaneLayout](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.PlaneLayout/)\[\]\>;  
}

##### Index

### Properties[](#properties)

[codedHeight](#codedheight) [codedRect](#codedrect) [codedWidth](#codedwidth) [colorSpace](#colorspace) [displayHeight](#displayheight) [displayWidth](#displaywidth) [duration](#duration) [format](#format) [timestamp](#timestamp) [visibleRect](#visiblerect)

### Methods[](#methods)

[allocationSize](#allocationsize) [clone](#clone) [close](#close) [copyTo](#copyto)

## Properties[](#properties-1)

### `Readonly`codedHeight[](#codedheight)

codedHeight: number

The **`codedHeight`** property of the VideoFrame interface returns the height of the VideoFrame in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/codedHeight)

### `Readonly`codedRect[](#codedrect)

codedRect: [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/) | null

The **`codedRect`** property of the VideoFrame interface returns a DOMRectReadOnly with the width and height matching VideoFrame.codedWidth and VideoFrame.codedHeight.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/codedRect)

### `Readonly`codedWidth[](#codedwidth)

codedWidth: number

The **`codedWidth`** property of the VideoFrame interface returns the width of the VideoFrame in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/codedWidth)

### `Readonly`colorSpace[](#colorspace)

colorSpace: [VideoColorSpace](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoColorSpace/)

The **`colorSpace`** property of the VideoFrame interface returns a VideoColorSpace object representing the color space of the video.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/colorSpace)

### `Readonly`displayHeight[](#displayheight)

displayHeight: number

The **`displayHeight`** property of the VideoFrame interface returns the height of the VideoFrame after applying aspect ratio adjustments.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/displayHeight)

### `Readonly`displayWidth[](#displaywidth)

displayWidth: number

The **`displayWidth`** property of the VideoFrame interface returns the width of the VideoFrame after applying aspect ratio adjustments.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/displayWidth)

### `Readonly`duration[](#duration)

duration: number | null

The **`duration`** property of the VideoFrame interface returns an integer indicating the duration of the video in microseconds.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/duration)

### `Readonly`format[](#format)

format: [VideoPixelFormat](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.VideoPixelFormat/) | null

The **`format`** property of the VideoFrame interface returns the pixel format of the VideoFrame.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/format)

### `Readonly`timestamp[](#timestamp)

timestamp: number

The **`timestamp`** property of the VideoFrame interface returns an integer indicating the timestamp of the video in microseconds.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/timestamp)

### `Readonly`visibleRect[](#visiblerect)

visibleRect: [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/) | null

The **`visibleRect`** property of the VideoFrame interface returns a DOMRectReadOnly describing the visible rectangle of pixels for this VideoFrame.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/visibleRect)

## Methods[](#methods-1)

### allocationSize[](#allocationsize)

-   allocationSize(options?: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/)): number[](#allocationsize-1)
    
    The **`allocationSize()`** method of the VideoFrame interface returns the number of bytes required to hold the video as filtered by options passed into the method.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/allocationSize)
    
    #### Parameters
    
    -   `Optional`options: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/)
    
    #### Returns number
    

### clone[](#clone)

-   clone(): VideoFrame[](#clone-1)
    
    The **`clone()`** method of the VideoFrame interface creates a new VideoFrame object referencing the same media resource as the original.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/clone)
    
    #### Returns VideoFrame
    

### close[](#close)

-   close(): void[](#close-1)
    
    The **`close()`** method of the VideoFrame interface clears all states and releases the reference to the media resource.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/close)
    
    #### Returns void
    

### copyTo[](#copyto)

-   copyTo(  
        destination: [AllowSharedBufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AllowSharedBufferSource/),  
        options?: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/),  
    ): Promise<[PlaneLayout](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.PlaneLayout/)\[\]\>[](#copyto-1)
    
    The **`copyTo()`** method of the VideoFrame interface copies the contents of the VideoFrame to an ArrayBuffer.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/VideoFrame/copyTo)
    
    #### Parameters
    
    -   destination: [AllowSharedBufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AllowSharedBufferSource/)
    -   `Optional`options: [VideoFrameCopyToOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VideoFrameCopyToOptions/)
    
    #### Returns Promise<[PlaneLayout](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.PlaneLayout/)\[\]\>