### Initialize and Start Decoding Process

Source: https://github.com/w3c/webcodecs/blob/main/samples/video-decode-display/index.html

Sets up event listeners for the start button and initializes the WebCodecs worker. It selects the video codec and renderer based on user input and sends the canvas and configuration to the worker.

```javascript
// Play button.
const startButton = document.querySelector("#start");
startButton.addEventListener("click", () => {
    document.querySelectorAll("input").forEach(input => input.disabled = true);
    startButton.disabled = true;
    start();
}, {once: true});

// Status UI.
const status = {
    fetch: document.querySelector("#fetch"),
    demux: document.querySelector("#demux"),
    decode: document.querySelector("#decode"),
    render: document.querySelector("#render"),
};

function setStatus(message) {
    for (const key in message.data) {
        status[key].innerText = message.data[key];
    }
}

// Worker setup.
function start() {
    const videoCodec = document.querySelector("input[name=\"video_codec\"]:checked").value;
    const dataUri = `../data/bbb_video_${videoCodec}_frag.mp4`;
    const rendererName = document.querySelector("input[name=\"renderer\"]:checked").value;
    const canvas = document.querySelector("canvas").transferControlToOffscreen();
    const worker = new Worker("./worker.js");
    worker.addEventListener("message", setStatus);
    worker.postMessage({dataUri, rendererName, canvas}, [canvas]);
}
```

--------------------------------

### Transcoding or Offline Encode/Decode Example

Source: https://github.com/w3c/webcodecs/blob/main/explainer.md

This example demonstrates how to set up and use AudioEncoder, VideoEncoder, AudioDecoder, and VideoDecoder for transcoding or offline encode/decode operations. It includes functions for streaming encoded chunks, muxing media, handling codec errors, building and configuring encoders and decoders, and setting up the decoding pipeline.

```javascript
// App demuxes (decontainerizes) input and makes repeated calls to the provided
// callbacks to feed the decoders.
function streamEncodedChunks(decodeAudioCallback, decodeVideoCallback) { ... }

// App provides a way to demux  and mux (containerize) media.
function muxAudio(encodedChunk) { ... }
function muxVideo(encodedChunk) { ... }

// The app provides error handling (e.g. shutdown w/ UI message)
function onCodecError(error) { ... }

// Returns an object { audioEncoder, videoEncoder }.
// Encoded outputs sent immediately to app provided muxer.
async function buildAndConfigureEncoders() {
  // Build encoders.
  let audioEncoder = new AudioEncoder({ output: muxAudio, error: onCodecError });
  let videoEncoder = new VideoEncoder({ output: muxVideo, error: onCodecError });

  // Configure and reset if not supported. More sophisticated fallback recommended.
  try {
    await audioEncoder.configure({ codec: 'opus', ... });
  } catch (exception) {
    audioEncoder = null;
  }
  try {
    await videoEncoder.configure({ codec : 'vp8', ... });
  } catch (exception) {
    videoEncoder = null;
  }

  return { audioEncoder: audioEncoder, videoEncoder: videoEncoder };
}

// Returns an object { audioDecoder, videoDecoder }.
// Decoded outputs sent immediately to the corresponding encoder for re-encoding.
async function buildAndConfigureDecoders(audioEncoder, videoEncoder) {
  // Bind encode callbacks.
  const reEncodeAudio = audioEncoder.encode.bind(audioEncoder);
  const reEncodeVideo = videoEncode.encode.bind(videoEncoder);

  // Build decoders.
  const audioDecoder = new AudioDecoder({ output: reEncodeAudio, error: onCodecError });
  const videoDecoder = new VideoDecoder({ output: reEncodeVideo, error: onCodecError });

  // Configure and reset if not supported. More sophisticated fallback recommended.
  try {
    await audioDecoder.configure({ codec: 'aac', ... });
  } catch (exception) {
    audioDecoder = null;
  }
  try {
    await videoDecoder.configure({ codec : 'avc1.42001e', ... });
  } catch (exception) {
    videoDecoder = null;
  }

  return { audioDecoder: audioDecoder, videoDecoder: videoDecoder};
}

// Setup encoders.
let { audioEncoder, videoEncoder } = await buildAndConfigureEncoders();

// App handles unsupported configuration.
if (audioEncoder == null || videoEncoder == null)
  return;

// Setup decoders. Provide encoders to receive decoded output.
let { audioDecoder, videoDecoder } = await buildAndConfigureDecoders(audioEncoder, videoEncoder);

// App handles unsupported configuration.
if (audioDecoder == null || videoDecoder == null)
  return;

// Start streaming encoded chunks to the decoders, repeatedly calling
// the provided callbacks for each chunk.
// Decoded output will be fed to encoders for re-encoding.
// Encoded output will be fed to muxer.
streamEncodedChunks(audioDecoder.decode.bind(audioDecoder),
          videoDecoder.decode.bind(videoDecoder));
```

--------------------------------

### JavaScript: Start Video Recording

Source: https://github.com/w3c/webcodecs/blob/main/samples/capture-to-file/capture-to-file.html

Initiates video recording by requesting camera access, setting up the video stream, and starting the encoding process in a Web Worker. This function is triggered when the 'Record' button is clicked.

```javascript
let video = document.getElementById('src');
let button = document.getElementById('record');
let encodeWorker = null;
let stream = null;
let videoTrack = null;

async function startRecording() {
    console.assert(button.innerText == 'Record');
    button.disabled = true;
    handle = await window.showSaveFilePicker({
        startIn: 'videos',
        suggestedName: 'myVideo.webm',
        types: [
            {
                description: 'Video File',
                accept: {'video/webm': ['.webm']}
            },
        ],
    });
    videoTrack = stream.getTracks()[0];
    let trackSettings = videoTrack.getSettings();
    let trackProcessor = new MediaStreamTrackProcessor(videoTrack);
    let frameStream = trackProcessor.readable;

    // Encoder I/O and file writing happens in a Worker to keep the UI
    // responsive.
    encodeWorker = new Worker('./encode-worker.js');

    // Tell the worker to start encoding the frames and writing the file.
    // NOTE: transferring frameStream and reading it in the worker is more
    // efficient than reading frameStream here and transferring VideoFrames
    // individually. This allows us to entirely avoid processing frames on the
    // main (UI) thread.
    encodeWorker.postMessage({ type: 'start', fileHandle: handle, frameStream: frameStream, trackSettings: trackSettings }, [frameStream]);

    button.innerText = 'Stop';
    button.disabled = false;
}
```

--------------------------------

### Example of encode for live streaming upload

Source: https://github.com/w3c/webcodecs/blob/main/explainer.md

This example demonstrates how to use the WebCodecs API to encode audio and video tracks for live streaming upload. It shows the process of configuring encoders, feeding them raw media data, and handling the encoded output.

```javascript
// The app provides sources of audio and video, perhaps from getUserMedia.
const {audioTrack, videoTrack} = ...;

// The app provides a way to serialize/containerize encoded media and upload it.
// The browser provides the app byte arrays defined by a codec such as vp8 or opus
// (not in a media container such as mp4 or webm).
function muxAndSend(encodedChunk) { ... };

// The app provides error handling (e.g. shutdown w/ UI message)
function onEncoderError(error) { ... }

// Helper to feed raw media to encoders as fast as possible.
function readAndEncode(reader, encoder) {
  reader.read().then((result) => {
    // App handling for stream closure.
    if (result.done)
      return;

    // Encode!
    encoder.encode(result.value);

    // Keep reading until the stream closes.
    readAndEncode(reader, encoder);
  }
}

// First, the tracks are converted to ReadableStreams of unencoded audio and video.
// See https://w3c.github.io/mediacapture-transform/#track-processor.
const audio = (new MediaStreamTrackProcessor(audioTrack)).readable;
const video = (new MediaStreamTrackProcessor(videoTrack)).readable;

// Then build and configure the encoders.
const audioEncoder = new AudioEncoder({
  output: muxAndSend,
  error: onEncoderError,
});
const audioPromise = audioEncoder.configure({
  codec: 'opus',
  tuning: {
    bitrate: 60_000,
  }
});
const videoEncoder = new VideoEncoder({
  output: muxAndSend,
  error: onEncoderError,
});
const videoPromise = videoEncoder.configure({
  codec : 'vp8',
  tuning: {
    bitrate: 1_000_000,
    framerate: 24,
    width: 1024,
    height: 768
  }
});

try {
  let values = await Promise.all([audioPromise, videoPromise]);
} catch (exception) {
  // Configuration not supported. More elaborate fallback recommended.
  return;
}

// Finally, feed the encoders data from the track readers.
readAndEncode(audio.getReader(), audioEncoder);
readAndEncode(video.getReader(), videoEncoder);

```

--------------------------------

### Real-time communication example

Source: https://github.com/w3c/webcodecs/blob/main/explainer.md

Demonstrates setting up encoders and decoders for real-time audio and video communication, including track processing and streaming encoded chunks.

```javascript
// The app provides sources of audio and video, perhaps from getUserMedia().
const {audioTrack, videoTrack} = ...;
// The app also provides ways to send encoded audio and video bitstream.
function sendAudio(encodedAudio) { ... };
function sendVideo(encodedVideo) { ... };

// On the receive side, encoded media is likely received
// from an out-of-order p2p transport and then put into a buffer.
// The output of that buffer is the source of encoded audio and video here.
function streamEncodedChunks(decodeAudioCallback, decodeVideoCallback) { ... }

// App rendering audio in AudioWorklet
// TODO(chcunningham): source a demo.
function renderInAudioWorklet(audioFrame) { ... }

// See definition from earlier example.
function paintFrameToCanvas(videoFrame) { ... }

// Returns an object { audioEncoder, videoEncoder }.
// Encoded outputs sent immediately to app provided muxer.
async function buildAndConfigureEncoders() {
    // Encoded outputs immediately sent on the wire.
  let audioEncoder = new AudioEncoder({ output: sendAudio, error: onCodecError });
  let videoEncoder = new VideoEncoder({ output: sendVideo, error: onCodecError });

  // Rest matches earlier example.
  ...
}

// Returns an object { audioDecoder, videoDecoder }.
// Decoded outputs rendered immediately.
async function buildAndConfigureDecoders(audioEncoder, videoEncoder) {
  // Build decoders.
  const audioDecoder = new AudioDecoder({ output: renderInAudioWorklet, error: onCodecError });
  const videoDecoder = new VideoDecoder({ output: paintToCanvas, error: onCodecError });

  // Rest matches earlier example.
  ...
}

// Setup the encoders and check for unsupported configuration.
let { audioEncoder, videoEncoder } = buildAndConfigureEncoders();
if (audioEncoder == null || videoEncoder == null)
  return;  // More elaborate fallback recommended.

// Convert the camera tracks to ReadableStreams of AudioFrame and VideoFrame.
// See https://w3c.github.io/mediacapture-transform/#track-processor
const audio = (new MediaStreamTrackProcessor(audioTrack)).readable;
const video = (new MediaStreamTrackProcessor(videoTrack)).readable;

// Feed the encoders data from the track readers. Encoded outputs are
// immediately sent on the wire. See readAndEncode() definition from
// earlier examples.
readAndEncode(audio.getReader(), audioEncoder);
readAndEncode(video.getReader(), videoEncoder);

// Setup decoders and check for unsupported configuration.
let { audioDecoder, videoDecoder } = buildAndConfigureDecoders();
if (audioDecoder == null || videoDecoder == null)
  return;  // More elaborate fallback recommended.

// Start streaming encoded data, repeatedly calling decode callbacks for each chunk.
streamEncodedChunks(audioDecoder.decode.bind(audioDecoder),
          videoDecoder.decode.bind(videoDecoder));
```

--------------------------------

### Example of video rendering to Canvas for extremely low-latency streaming

Source: https://github.com/w3c/webcodecs/blob/main/explainer.md

This example demonstrates how to use the VideoDecoder to render video frames to a canvas element for applications requiring very low latency, such as cloud gaming. It includes error handling, stream processing, and canvas painting, emphasizing the importance of releasing frames.

```javascript
// The app provides error handling.
function onDecoderError(error) { ... }

// App provides stream of encoded chunks to decoder.
function streamEncodedChunks(decodeCallback) { ... }

// The document contains a canvas for displaying VideoFrames.
const canvasElement = document.getElementById("canvas");
const canvasContext = canvas.getContext('2d', canvasOptions)

// Paint every video frame ASAP for lowest latency.
function paintFrameToCanvas(videoFrame) {
  // VideoFrame is a CanvasImageSource.
  // See https://github.com/web-platform-tests/wpt/blob/master/webcodecs/videoFrame-drawImage.any.js for more examples.
  //
  // Alternaviely, paint using tex(Sub)Image(2D|3D).
  // See https://github.com/web-platform-tests/wpt/blob/master/webcodecs/videoFrame-texImage.any.js for more examples.
  canvasContext.drawImage(frame, 0, 0);

  // IMPORTANT: Release the frame to avoid stalling the decoder.
  frame.close();
}

const videoDecoder = new VideoDecoder({
  output: paintFrameToCanvas,
  error: onDecoderError
});

videoDecoder.configure({codec: 'vp8'}).then(() => {
  // The app fetches VP8 chunks, feeding each chunk to the decode
  // callback as fast as possible. Real apps must also monitor
  // decoder backpressure to ensure the decoder is keeping up.
  streamEncodedChunks(videoDecoder.decode.bind(videoDecoder));
}).catch(() => {
  // App provides fallback logic when config not supported.
  ...
});

```

--------------------------------

### Handle Playback Control

Source: https://github.com/w3c/webcodecs/blob/main/samples/audio-video-player/audio_video_player.html

Manages the play/pause functionality of the media player. It initializes the player on the first click and toggles between play and pause states on subsequent clicks. Audio playback can only start in response to a user gesture.

```javascript
let playButton = $('button'); playButton.onclick = async () => { if (!initDone) { document.querySelectorAll("input[name=\"video_codec\"]").forEach(input => input.disabled = true); playButton.innerText = "Loading..."; playButton.disabled = true; // Wait for worker initialization. Use metadata to init the WebAudioController. await new Promise(resolve => { const videoCodec = `${document.querySelector("input[name=\"video_codec\"]:checked").value}`; mediaWorker.postMessage( { command: 'initialize', audioFile: '../data/bbb_audio_aac_frag.mp4', videoFile: `../data/bbb_video_${videoCodec}_frag.mp4`, canvas: offscreenCanvas }, { transfer: [offscreenCanvas] } ); mediaWorker.addEventListener('message', (e) => { console.assert(e.data.command == 'initialize-done'); audioController.initialize(e.data.sampleRate, e.data.channelCount, e.data.sharedArrayBuffer); initDone = true; resolve(); }); }); playButton.innerText = "Play"; playButton.disabled = false; $('#volume').disabled = false; } // Enable play now that we're loaded if (playButton.innerText == "Play") { console.log("playback start"); // Audio can only start in reaction to a user-gesture. audioController.play().then(() => console.log('playback started')); mediaWorker.postMessage({ command: 'play', mediaTimeSecs: audioController.getMediaTimeInSeconds(), mediaTimeCapturedAtHighResTimestamp: performance.now() + performance.timeOrigin }); sendMediaTimeUpdates(true); playButton.innerText = "Pause"; } else { console.log("playback pause"); // Resolves when audio has effectively stopped, this can take some time if // using bluetooth, for example. audioController.pause().then(() => { console.log("playback paused"); // Wait to pause worker until context suspended to ensure we continue // filling audio buffer while audio is playing. mediaWorker.postMessage({command: 'pause'}); }); sendMediaTimeUpdates(false); playButton.innerText = "Play" } }
```

--------------------------------

### JavaScript: Button Click Handler

Source: https://github.com/w3c/webcodecs/blob/main/samples/capture-to-file/capture-to-file.html

Handles the click event for the record/stop button, toggling between starting and stopping the video recording process.

```javascript
async function onButtonClicked() {
    switch(button.innerText) {
        case 'Record':
            startRecording();
            break;
        case 'Stop':
            stopRecording();
            break;
    }
};
```

--------------------------------

### Initialize Media Player and Load Media

Source: https://github.com/w3c/webcodecs/blob/main/samples/audio-video-player/audio_video_player.html

Initializes the media player, loads audio and video files based on selected codec, and sets up the WebAudio controller. This code runs on the main thread and communicates with a media worker.

```javascript
import { WebAudioController } from "../lib/web_audio_controller.js"; // Transfer canvas to offscreen. Painting will be performed by worker without // blocking the Window main thread. window.$ = document.querySelector.bind(document); let canvas = $("canvas"); let offscreenCanvas = canvas.transferControlToOffscreen(); // Instantiate the "media worker" and start loading the files. The worker will // house and drive the demuxers and decoders. let mediaWorker = new Worker('./media_worker.js'); let initDone = false; let audioController = new WebAudioController(); // Set up volume slider. $('#volume').onchange = (e) => { audioController.setVolume(e.target.value); }
```

--------------------------------

### AudioData Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Initializes a new AudioData object. Ensure the provided init dictionary is valid.

```javascript
constructor(AudioDataInit init);
```

--------------------------------

### metadata()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Gets the VideoFrameMetadata associated with this frame. This includes information like presentation timestamp and duration.

```APIDOC
## metadata()

### Description
Gets the VideoFrameMetadata associated with this frame. This includes information like presentation timestamp and duration.

### Method
metadata

### Parameters
None

### Response
- **VideoFrameMetadata** - An object containing metadata for the video frame.

### Response Example
```javascript
const frameMetadata = videoFrame.metadata();
console.log(frameMetadata.timestamp);
```
```

--------------------------------

### Getting VideoFrame Metadata

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Retrieves the VideoFrameMetadata associated with this frame. Throws an error if the frame is detached.

```javascript
1. If {{platform object/[[Detached]]}} is `true`, throw an {{InvalidStateError}} {{DOMException}}.
2. Return the result of calling [=Copy VideoFrame metadata=] with {{VideoFrame/[[metadata]]}}.
```

--------------------------------

### configure

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Configures the audio encoder with the specified audio format. It's recommended to check for support using isConfigSupported() before calling this method.

```APIDOC
## configure(config)

### Description
Enqueues a control message to configure the audio encoder for encoding audio data as described by |config|. This method may trigger a NotSupportedError if the User Agent does not support the provided configuration.

### Method
configure

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **config** (AudioEncoderConfig) - Required - The configuration object for the audio encoder.
```

--------------------------------

### AudioData Methods

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Includes methods for calculating allocation size, copying data, cloning the object, and releasing resources.

```javascript
unsigned long allocationSize(AudioDataCopyToOptions options);
undefined copyTo(AllowSharedBufferSource destination, AudioDataCopyToOptions options);
AudioData clone();
undefined close();
```

--------------------------------

### CodecState Enum

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Represents the current state of a codec. Use 'unconfigured' before setup, 'configured' when ready, and 'closed' after release.

```javascript
enum CodecState {
  "unconfigured",
  "configured",
  "closed"
};
```

--------------------------------

### VideoColorSpace Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Initializes a new VideoColorSpace object with optional color space parameters.

```APIDOC
## VideoColorSpace Constructor

### Description
Initializes a new VideoColorSpace object. The constructor accepts an optional `VideoColorSpaceInit` dictionary to set the color primaries, transfer characteristics, matrix coefficients, and full-range flag.

### Method
`VideoColorSpace(init)`

### Parameters
#### Request Body
- **init** (VideoColorSpaceInit) - Optional - An object containing properties to initialize the VideoColorSpace.
  - **primaries** (VideoColorPrimaries) - Optional - The color primaries.
  - **transfer** (VideoTransferCharacteristics) - Optional - The transfer characteristics.
  - **matrix** (VideoMatrixCoefficients) - Optional - The matrix coefficients.
  - **fullRange** (boolean) - Optional - Indicates whether full-range color values are used.

### Response Example
```json
{
  "primaries": "bt709",
  "transfer": "bt709",
  "matrix": "bt709",
  "fullRange": true
}
```
```

--------------------------------

### configure

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Enqueues a control message to configure the video decoder for decoding chunks. It's recommended to check support first using isConfigSupported().

```APIDOC
## configure(config)

### Description
Enqueues a control message to configure the video decoder for decoding chunks as described by |config|. This method may trigger a {{NotSupportedError}} if the User Agent does not support the provided configuration. It is recommended to first check support by calling {{VideoDecoder/isConfigSupported()}}.

### Method
configure

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **config** (VideoDecoderConfig) - The configuration object for the video decoder.

### Request Example
```json
{
  "config": { ... } 
}
```

### Response
#### Success Response (200)
None

#### Response Example
None

ERROR HANDLING:
- {{NotSupportedError}}: If the User Agent does not support the provided |config|.
- {{TypeError}}: If |config| is not a valid VideoDecoderConfig.
- {{InvalidStateError}}: If the {{VideoDecoder/[[state]]}} is 'closed'.
```

--------------------------------

### AudioData Methods

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

These methods allow for calculating the memory required for audio data and copying audio samples to a destination buffer.

```APIDOC
## AudioData Methods

### allocationSize(options)

Returns the number of bytes required to hold the samples as described by |options|.

### copyTo(destination, options)

Copies the samples from the specified plane of the {{AudioData}} to the destination buffer. 
```

--------------------------------

### isConfigSupported(config)

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Checks if a given audio encoder configuration is supported by the user agent. Returns a promise with the support details.

```APIDOC
## isConfigSupported(config)

### Description
Returns a promise indicating whether the provided |config| is supported by the User Agent. The returned {{AudioEncoderSupport}} will contain only the dictionary members that the User Agent recognized. Unrecognized dictionary members will be ignored. Authors can detect unrecognized dictionary members by comparing {{AudioEncoderSupport/config}} to their provided |config|.

### Method
GET (or similar, as this is a query)

### Endpoint
`/audioencoder/config/supported` (Conceptual)

### Parameters
#### Query Parameters
- **config** (AudioEncoderConfig) - Required - The configuration object to check for support.

### Request Example
```json
{
  "config": {
    "codec": "opus",
    "sampleRate": 48000,
    "numberOfChannels": 2
  }
}
```

### Response
#### Success Response (Promise<AudioEncoderSupport>)
- **config** (AudioEncoderConfig) - The recognized configuration members.
- **supported** (boolean) - Indicates if the configuration is supported.

#### Response Example
```json
{
  "config": {
    "codec": "opus",
    "sampleRate": 48000,
    "numberOfChannels": 2
  },
  "supported": true
}
```
```

--------------------------------

### copyTo

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Asynchronously copies the planes of this frame into |destination| according to |options|.

```APIDOC
## copyTo(destination, options)

### Description

Asynchronously copies the planes of this frame into |destination| according to |options|. The format of the data is |options.format|, if it exists or this frame's {{VideoFrame/format}} otherwise.

### Method

POST (or equivalent for SDK)

### Parameters

#### Request Body

- **destination** (BufferSource) - Required - The destination buffer to copy the frame data into.
- **options** (VideoFrameCopyToOptions) - Required - Options for copying the video frame.

### Response

#### Success Response (200)

- A promise that resolves when the copy operation is complete.
```

--------------------------------

### isConfigSupported(config)

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Returns a promise indicating whether the provided configuration is supported by the User Agent. The returned object details the supported configuration.

```APIDOC
## isConfigSupported(config)

### Description
Checks if the provided video decoder configuration (`config`) is supported by the User Agent. It returns a promise that resolves with a `VideoDecoderSupport` object detailing the supported configuration.

### Method
N/A (Asynchronous method)

### Endpoint
N/A (Method call)

### Parameters
#### Request Body
- **config** (VideoDecoderConfig) - Required - The configuration object to check for support.

### Request Example
```javascript
const config = { codec: 'vp09.00.10.08' };
videoDecoder.isConfigSupported(config).then(support => {
  if (support.supported) {
    console.log('Configuration is supported:', support.config);
  } else {
    console.log('Configuration is not supported.');
  }
});
```

### Response
#### Success Response
- **config** (VideoDecoderConfig) - The configuration that is supported by the User Agent. Unrecognized dictionary members from the input config will be omitted.
- **supported** (boolean) - Indicates whether the provided configuration is fully supported.

#### Response Example
```json
{
  "config": {
    "codec": "vp09.00.10.08",
    "codedWidth": 1920,
    "codedHeight": 1080
  },
  "supported": true
}
```
```

--------------------------------

### clone()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Creates a new VideoFrame with a reference to the same media resource. This is a shallow copy and does not duplicate the underlying data.

```APIDOC
## clone()

### Description
Creates a new VideoFrame with a reference to the same media resource. This is a shallow copy and does not duplicate the underlying data.

### Method
clone

### Parameters
None

### Response
- **VideoFrame** - A new VideoFrame instance referencing the same media resource.

### Response Example
```javascript
const clonedFrame = videoFrame.clone();
```
```

--------------------------------

### AudioData Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Constructs a new AudioData object. It requires initialization parameters including format, sample rate, number of frames, number of channels, timestamp, and the audio data itself. It also supports an optional 'transfer' array for transferring underlying ArrayBuffers.

```APIDOC
## new AudioData(init)

### Description
Constructs a new AudioData object with the provided initialization parameters.

### Parameters
#### Request Body
- **init** (AudioDataInit) - Required - An object containing the audio data properties.
  - **format** (AudioSampleFormat) - Required - The audio sample format.
  - **sampleRate** (float) - Required - The sample rate in Hz.
  - **numberOfFrames** (unsigned long) - Required - The number of frames.
  - **numberOfChannels** (unsigned long) - Required - The number of audio channels.
  - **timestamp** (long long) - Required - The presentation timestamp in microseconds.
  - **data** (BufferSource) - Required - The audio sample data.
  - **transfer** (sequence<ArrayBuffer>) - Optional - An array of ArrayBuffers to transfer.
```

--------------------------------

### AudioDecoder Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Initializes a new AudioDecoder object. It sets up internal queues, callbacks, and initial states required for audio decoding.

```APIDOC
## AudioDecoder(init)

### Description
Constructs a new AudioDecoder object and initializes its internal state, including message queues, callbacks, and configuration flags.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`init` (object) - Initialization options for the AudioDecoder.
- `output` (function) - Callback function to handle decoded audio frames.
- `error` (function) - Callback function to handle errors during decoding.
```

--------------------------------

### reset()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Immediately resets all state including configuration, control messages, and pending callbacks. This operation is immediate.

```APIDOC
## reset()

### Description
Immediately resets all state of the VideoDecoder, including its configuration, any pending control messages in the queue, and all pending callbacks. This is a final operation.

### Method
N/A (Method call)

### Endpoint
N/A (Method call)

### Parameters
None

### Request Example
```javascript
videoDecoder.reset();
```

### Response
No explicit return value. The operation modifies the internal state of the VideoDecoder.
```

--------------------------------

### AudioData Methods

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Provides methods for managing AudioData objects, including calculating allocation size, copying data, cloning the object, and releasing resources.

```APIDOC
## AudioData Methods

### Description
These methods allow for efficient handling and management of AudioData objects, including copying, cloning, and resource deallocation.

### Methods
- **allocationSize(options)**
  - Description: Calculates the memory allocation size for copying the audio data.
  - Parameters:
    - **options** (AudioDataCopyToOptions) - Options for calculating allocation size.
  - Returns: unsigned long - The calculated allocation size.

- **copyTo(destination, options)**
  - Description: Copies the audio data to a destination buffer.
  - Parameters:
    - **destination** (AllowSharedBufferSource) - The destination buffer to copy the data to.
    - **options** (AudioDataCopyToOptions) - Options for the copy operation.
  - Returns: undefined

- **clone()**
  - Description: Creates a clone of the AudioData object, sharing the underlying media resource.
  - Returns: AudioData - A new AudioData object that is a clone of the original.

- **close()**
  - Description: Releases the reference to the underlying media resource associated with this AudioData object.
```

--------------------------------

### VideoEncoder Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Initializes a new VideoEncoder object, setting up internal queues and state variables.

```javascript
VideoEncoder(init)
1. Let e be a new {{VideoEncoder}} object.
2. Assign a new [=queue=] to {{VideoEncoder/[[control message queue]]}}.
3. Assign `false` to {{VideoEncoder/[[message queue blocked]]}}.
4. 
```

--------------------------------

### JavaScript: Initialize Media Stream

Source: https://github.com/w3c/webcodecs/blob/main/samples/capture-to-file/capture-to-file.html

Initializes the media stream by requesting user media (camera access) with specified video constraints and sets the video element's source object to the obtained stream. This function is called when the page body loads.

```javascript
async function main() {
    let constraints = {
        audio: false,
        video: {width: 1280, height: 720, frameRate: 30}
    };
    stream = await window.navigator.mediaDevices.getUserMedia(constraints);
    let video = document.getElementById('src');
    video.srcObject = stream;
}

document.body.onload = main;
```

--------------------------------

### reset()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Immediately resets all state including configuration, control messages in the control message queue, and all pending callbacks. This operation is immediate and discards any ongoing work.

```APIDOC
## reset()

### Description
Immediately resets all state including configuration, control messages in the control message queue, and all pending callbacks. This operation is immediate and discards any ongoing work.

### Method
Not applicable (JavaScript method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
videoEncoder.reset();
```

### Response
#### Success Response
This method does not return a value.

#### Response Example
None
```

--------------------------------

### AudioEncoder.configure

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Configures the AudioEncoder with the specified audio encoding settings. This method prepares the encoder for processing audio data according to the provided configuration.

```APIDOC
## configure(config)

### Description
Configures the AudioEncoder with the specified audio encoding settings.

### Method
configure

### Parameters
#### Request Body
- **config** (AudioEncoderConfig) - Required - The configuration object for the audio encoder.
```

--------------------------------

### VideoEncoderInit Dictionary

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Defines the initialization parameters for the VideoEncoder, including output and error callbacks.

```APIDOC
## VideoEncoderInit Dictionary

### Description
Specifies the required callbacks for handling encoded video chunks and errors.

### Fields
- **output (EncodedVideoChunkOutputCallback)**: Required. Callback function invoked with encoded chunks and metadata.
- **error (WebCodecsErrorCallback)**: Required. Callback function invoked when an error occurs.
```

--------------------------------

### Creating a VideoFrame

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Algorithm for creating a new VideoFrame with specified properties like output, timestamp, duration, and color space.

```javascript
1. Let |frame| be a new {{VideoFrame}}, constructed as follows:
   1. Assign `false` to {{platform object/[[Detached]]}}.
   2. Let |resource| be the [=media resource=] described by |output|.
   3. Let |resourceReference| be a reference to |resource|.
   4. Assign |resourceReference| to {{VideoFrame/[[resource reference]]}}.
   5. If |output| uses a recognized {{VideoPixelFormat}}, assign that format to {{VideoFrame/[[format]]}}. Otherwise, assign `null` to {{VideoFrame/[[format]]}}.
   6. Let |codedWidth| and |codedHeight| be the coded width and height of the |output| in pixels.
   8. Let |visibleLeft|, |visibleTop|, |visibleWidth|, and |visibleHeight| be the left, top, width and height for the visible rectangle of |output|.
   7. Let |displayWidth| and |displayHeight| be the display size of |output| in pixels.
   8. If |displayAspectWidth| and |displayAspectHeight| are provided, increase |displayWidth| or |displayHeight| until the ratio of |displayWidth| to |displayHeight| matches the ratio of |displayAspectWidth| to |displayAspectHeight|.
   9.
```

--------------------------------

### reset()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Immediately resets all state including configuration, control messages in the control message queue, and all pending callbacks.

```APIDOC
## reset()

### Description
Immediately resets all state including configuration, control messages in the control message queue, and all pending callbacks.

### Method
`reset`

### Parameters
None

### Request Example
```json
{}
```

### Response
This method does not return a value upon success.

### Error Handling
Runs the `Reset AudioDecoder` algorithm with an `AbortError`.
```

--------------------------------

### FlacEncoderConfig Dictionary

Source: https://github.com/w3c/webcodecs/blob/main/flac_codec_registration.src.html

Defines specific configuration options for FLAC encoding, including block size and compression level. Use blockSize 0 for default estimation.

```javascript
dictionary FlacEncoderConfig {
  [EnforceRange] unsigned long blockSize = 0;
  [EnforceRange] unsigned long compressLevel = 5;
};
```

--------------------------------

### VideoEncoder.configure

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Enqueues a control message to configure the video encoder for encoding video frames. This method may trigger a NotSupportedError if the User Agent does not support the provided configuration.

```APIDOC
## POST /videoencoder/configure

### Description
Configures the video encoder with the specified settings. This operation enqueues a control message that prepares the encoder for processing video frames according to the provided `config`.

### Method
POST

### Endpoint
/videoencoder/configure

### Parameters
#### Request Body
- **config** (VideoEncoderConfig) - Required - An object containing the configuration for the video encoder.

### Request Example
```json
{
  "config": {
    "codec": "vp08.00.51",
    "width": 1280,
    "height": 720,
    "bitrate": 5000000,
    "framerate": 30
  }
}
```

### Response
#### Success Response (200)
Indicates that the configuration message has been successfully enqueued.

#### Response Example
```json
{
  "status": "processed"
}
```
```

--------------------------------

### EncodedVideoChunk Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Creates a new EncodedVideoChunk object. It takes an EncodedVideoChunkInit dictionary which specifies the chunk's type, timestamp, duration, and data. Transferable ArrayBuffers can be specified for efficient data transfer.

```APIDOC
## EncodedVideoChunk Constructor

### Description
Creates a new EncodedVideoChunk object.

### Method
```
new EncodedVideoChunk(init: EncodedVideoChunkInit)
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **init** (EncodedVideoChunkInit) - Required - An object containing the initialization parameters for the chunk.
  - **type** (EncodedVideoChunkType) - Required - The type of the video chunk ('key' or 'delta').
  - **timestamp** (long long) - Required - The presentation timestamp in microseconds.
  - **duration** (unsigned long long) - Optional - The presentation duration in microseconds.
  - **data** (AllowSharedBufferSource) - Required - The encoded video data.
  - **transfer** (sequence<ArrayBuffer>) - Optional - An array of ArrayBuffers to transfer with the chunk.
```

--------------------------------

### AudioDataInit Dictionary

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Defines the structure for initializing an AudioData object, requiring format, sample rate, frame count, channel count, timestamp, and data.

```javascript
dictionary AudioDataInit {
  required AudioSampleFormat format;
  required float sampleRate;
  [EnforceRange]
  required unsigned long numberOfFrames;
  [EnforceRange]
  required unsigned long numberOfChannels;
  [EnforceRange]
  required long long timestamp; // microseconds
  required BufferSource data;
  sequence<ArrayBuffer> transfer = [];
};
```

--------------------------------

### VideoEncoderInit Dictionary

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Specifies the initialization parameters for a VideoEncoder, including output and error callbacks.

```javascript
dictionary VideoEncoderInit {
  required EncodedVideoChunkOutputCallback output;
  required WebCodecsErrorCallback error;
};
```

--------------------------------

### MP3 Codec Strings

Source: https://github.com/w3c/webcodecs/blob/main/mp3_codec_registration.src.html

Lists the equivalent codec strings for MP3 that can be used with WebCodecs.

```text
"mp3"
"mp4a.69"
"mp4a.6B"
```

--------------------------------

### VP9 Codec String Prefix

Source: https://github.com/w3c/webcodecs/blob/main/vp9_codec_registration.src.html

The codec string for VP9 begins with the prefix "vp09.". Further details are specified in the VP9 ISO Media File Format Binding.

```text
"vp09."
```

--------------------------------

### Cloning a VideoFrame

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Creates a new VideoFrame that references the same media resource as the original. This is a shallow copy.

```javascript
1. If the value of |frame|’s {{platform object/[[Detached]]}} internal slot is `true`, throw an {{InvalidStateError}} {{DOMException}}.
2. Return the result of running the [=Clone VideoFrame=] algorithm with [=this=].
```

--------------------------------

### AudioEncoder.isConfigSupported

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Asynchronously checks if a given AudioEncoderConfig is supported by the user agent. Returns a Promise that resolves with an AudioEncoderSupport object indicating support.

```APIDOC
## isConfigSupported(config)

### Description
Asynchronously checks if a given AudioEncoderConfig is supported by the user agent. Returns a Promise that resolves with an AudioEncoderSupport object indicating support.

### Method
static isConfigSupported

### Parameters
#### Request Body
- **config** (AudioEncoderConfig) - Required - The configuration object to check for support.

### Response
#### Success Response (Promise)
- **AudioEncoderSupport** - An object indicating whether the configuration is supported.
```

--------------------------------

### flush()

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Completes all control messages in the control message queue and emits all outputs. Returns a promise that resolves when the codec is flushed.

```APIDOC
## flush()

### Description
Completes all control messages in the control message queue and emits all outputs. This method returns a promise that resolves once the flushing process is complete.

### Method
N/A (Asynchronous method)

### Endpoint
N/A (Method call)

### Parameters
None

### Request Example
```javascript
videoDecoder.flush().then(() => {
  console.log('VideoDecoder flushed successfully.');
});
```

### Response
#### Success Response
- A Promise that resolves when all pending operations are completed.

#### Response Example
```json
// Promise resolves with no specific value, indicating completion.
```
```

--------------------------------

### EncodedAudioChunkInit Dictionary

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Defines the initialization parameters for an EncodedAudioChunk, including type, timestamp, duration, data, and optional transfer list.

```javascript
dictionary EncodedAudioChunkInit {
  required EncodedAudioChunkType type;
  [EnforceRange]
  required long long timestamp; // microseconds
  [EnforceRange]
  unsigned long long duration; // microseconds
  required AllowSharedBufferSource data;
  sequence<ArrayBuffer> transfer = [];
};
```

--------------------------------

### VideoFrame Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Constructs a new VideoFrame. It can be initialized either from a CanvasImageSource or raw buffer data.

```APIDOC
## VideoFrame Constructor

### Description
Constructs a new VideoFrame. It can be initialized either from a CanvasImageSource or raw buffer data.

### Method
- `VideoFrame(image: CanvasImageSource, init?: VideoFrameInit)`
- `VideoFrame(data: AllowSharedBufferSource, init: VideoFrameBufferInit)`

### Parameters

#### Constructor 1: `VideoFrame(image, init)`

- **image** (CanvasImageSource) - The image source to create the frame from.
- **init** (VideoFrameInit, optional) - Initialization options for the frame, such as duration, timestamp, visibleRect, rotation, flip, displayWidth, displayHeight, and metadata.

#### Constructor 2: `VideoFrame(data, init)`

- **data** (AllowSharedBufferSource) - The buffer containing the raw frame data.
- **init** (VideoFrameBufferInit) - Initialization options for the frame, including format, codedWidth, codedHeight, timestamp, duration, layout, visibleRect, rotation, flip, displayWidth, displayHeight, colorSpace, transfer, and metadata.

### Properties

- **format** (VideoPixelFormat | null) - The pixel format of the frame.
- **codedWidth** (unsigned long) - The coded width of the frame in pixels.
- **codedHeight** (unsigned long) - The coded height of the frame in pixels.
- **codedRect** (DOMRectReadOnly | null) - The coded rectangle of the frame.
- **visibleRect** (DOMRectReadOnly | null) - The visible rectangle of the frame.
- **rotation** (double) - The rotation to be applied to the frame in degrees clockwise.
- **flip** (boolean) - Whether a horizontal flip is applied to the frame.
- **displayWidth** (unsigned long) - The display width of the frame after aspect ratio adjustments.
- **displayHeight** (unsigned long) - The display height of the frame after aspect ratio adjustments.
- **duration** (unsigned long long | null) - The presentation duration in microseconds.
- **timestamp** (long long) - The presentation timestamp in microseconds.
- **colorSpace** (VideoColorSpace) - The color space associated with the frame.

### Methods

- **metadata()**: Returns the VideoFrameMetadata associated with this frame.
- **allocationSize(options?: VideoFrameCopyToOptions)**: Returns the size in bytes required for copying the frame.
- **copyTo(destination: AllowSharedBufferSource, options?: VideoFrameCopyToOptions)**: Asynchronously copies the frame data to a destination buffer.
- **clone()**: Creates a copy of the VideoFrame.
- **close()**: Closes the VideoFrame and releases its resources.
```

--------------------------------

### allocationSize

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Returns the minimum byte length for a valid destination {{BufferSource}} to be used with {{VideoFrame/copyTo()}} with the given options.

```APIDOC
## allocationSize(options)

### Description

Returns the minimum byte length for a valid destination {{BufferSource}} to be used with {{VideoFrame/copyTo()}} with the given options.

### Method

GET (or equivalent for SDK)

### Parameters

#### Query Parameters

- **options** (VideoFrameCopyToOptions) - Required - Options for copying the video frame.

### Response

#### Success Response (200)

- **allocationSize** (unsigned long) - The minimum byte length for the destination buffer.
```

--------------------------------

### Quantizer Setting for AV1

Source: https://github.com/w3c/webcodecs/blob/main/av1_codec_registration.src.html

Explains the 'quantizer' option for AV1 encoding. The quantizer index can range from 0 to 255, affecting the compression and quality of the encoded frames.

```text
quantizer

Sets per-frame quantizer value. In [[AV1]] the quantizer index can be varied from 0 to 255
```

--------------------------------

### EncodedAudioChunk Constructor

Source: https://github.com/w3c/webcodecs/blob/main/index.src.html

Constructs a new EncodedAudioChunk object. It takes an EncodedAudioChunkInit dictionary which specifies the type, timestamp, duration, and data for the chunk. The data can be transferred to release the original buffer.

```APIDOC
## EncodedAudioChunk Constructor

### Description
Initializes a new EncodedAudioChunk with the provided initialization dictionary.

### Method
`EncodedAudioChunk(init)`

### Parameters
#### Request Body
- **init** (EncodedAudioChunkInit) - Required - An object containing the initialization parameters for the chunk.
  - **type** (EncodedAudioChunkType) - Required - The type of the audio chunk ('key' or 'delta').
  - **timestamp** (long long) - Required - The presentation timestamp in microseconds.
  - **duration** (unsigned long long) - Optional - The presentation duration in microseconds.
  - **data** (AllowSharedBufferSource) - Required - The encoded audio data.
  - **transfer** (sequence<ArrayBuffer>) - Optional - An array of ArrayBuffers to transfer ownership of.

### Request Example
```json
{
  "type": "key",
  "timestamp": 123456,
  "duration": 7890,
  "data": "ArrayBuffer data here",
  "transfer": ["ArrayBuffer to transfer"]
}
```

### Response
#### Success Response (200)
- **EncodedAudioChunk** - A new EncodedAudioChunk object.

#### Response Example
```json
{
  "type": "key",
  "timestamp": 123456,
  "duration": 7890,
  "byteLength": 1024
}
```
```