warning

This package is experimental.
We might change the API at any time, until we remove this notice.

createVideoDecoder()v4.0.307

This function is a wrapper around the VideoDecoder Web API.

Create a video decoder
tsx
import {createVideoDecoder} from '@remotion/webcodecs';
 
const decoder = createVideoDecoder({
  track,
  onFrame: console.log,
  onError: console.error,
});

Differences to `VideoDecoder`

Two new methods are added: .waitForQueueToBeLessThan() and .waitForFinish().
The dequeue event is not supported as it is not reliable across browsers.
In addition to EncodedVideoChunk, EncodedVideoChunkInit objects are also accepted for .decode().
A webcodecsController() instance can be passed in to the function, allowing for decoding to be paused, resumed and aborted.
.decode() is async, and returns a promise, allowing for a halt if the decoder is paused.
A logLevel can be passed in to the function, allowing the queue to be debugged.
The onFrame callback is being awaited. When rejected, the error lands in the onError callback. When resolved, only then the queue size counter will be decreased.

API

Takes an object with the following properties:

`track`

An VideoDecoderConfig object.
You may pass a MediaParserVideoTrack object from parseMedia(), which also is an VideoDecoderConfig object.

`onFrame`

A callback that is called when a frame is decoded.

Takes a single argument, which is a VideoFrame object.

If the passed callback is asynchronous, the queue size counter will be decreased only after the callback has been resolved.

However, the callback for the next frame may already be called while your callback is still running.
We do not ensure that callbacks are running sequentially.

`onError`

A callback that is called when an error occurs or the decode is aborted through the controller.

Takes a single argument, which is an Error object.

`controller?`

A webcodecsController() instance.

If provided, you can call .pause(), .resume() and .abort() on the controller to pause, resume and abort the decoding.

`logLevel?`

string LogLevel

One of "error", "warn", "info", "debug", "trace".
Default value: "info", which logs only important information.

Return type

Returns an object with the following properties:

`waitForQueueToBeLessThan(queueSize: number)`

A promise that resolves when the queue size is less than the given number.
The queue is only decremented when the onFrame callback resolves.

`flush()`

Flushes the decoder, forcing the queue to be cleared. Returns a promise that resolves when all frames have been cleared and the onFrame() callback has beeen resolved for all frames.

`reset()`

Clears the queue and resets the decoder. Same as VideoDecoder.reset() + VideoDecoder.configure().

`close()`

Closes the decoder. Same as AudioDecoder.close().

Example usage with `@remotion/media-parser`

Decode a video track
tsx
import {parseMedia} from '@remotion/media-parser';
import {createVideoDecoder} from '@remotion/webcodecs';
 
await parseMedia({
  src: 'https://parser.media/video.mp4',
  onVideoTrack: ({track, container}) => {
    const decoder = createVideoDecoder({
      track,
      onFrame: console.log,
      onError: console.error,
    });
 
    return async (sample) => {
      // Called on every sample
      await decoder.waitForQueueToBeLessThan(10);
      await decoder.decode(sample);
 
      return async () => {
        // Called when the track is done
        await decoder.flush();
        decoder.close();
      };
    };
  },
});

Differences to VideoDecoder​

API​

track​

onFrame​

onError​

controller?​

logLevel?​

Return type​

waitForQueueToBeLessThan(queueSize: number)​

flush()​

reset()​

close()​

Example usage with @remotion/media-parser​

See also​