Skip to main content

convertMedia()v4.0.229

Part of the @remotion/webcodecs package.

warning

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

Re-encodes a video using WebCodecs and @remotion/media-parser.

Converting a video
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  to: 'webm',
  videoCodec: 'vp8',
  audioCodec: 'opus',
});
Converting a video
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  to: 'webm',
  videoCodec: 'vp8',
  audioCodec: 'opus',
});

API​

src​

A string or File.
If it is a string, it must be a URL.
If it is a File, the reader field must be set to webFileReader.

reader​

A reader interface.
Default value: fetchReader, which uses fetch() to read the video.
If you pass webFileReader, you must also pass a File as the src argument.

to​

string ConvertMediaTo

The container format to convert to. Currently, only "webm" is supported.

videoCodec​

string ConvertMediaVideoCodec

The video codec to convert to. Currently, only "vp8" and "vp9" are supported.

audioCodec​

string ConvertMediaAudioCodec

The audio codec to convert to. Currently, only "opus" is supported.

logLevel?​

string LogLevel

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

onMediaStateUpdate?​

Function ConvertMediaOnMediaStateUpdate

Allows receiving progress updates. The following fields are available:

tsx
import type {
  ConvertMediaOnMediaStateUpdate,
  ConvertMediaState,
} from '@remotion/webcodecs';
 
export const onMediaStateUpdate: ConvertMediaOnMediaStateUpdate = ({
  decodedVideoFrames,
  decodedAudioFrames,
  encodedVideoFrames,
  encodedAudioFrames,
  bytesWritten,
  millisecondsWritten,
  expectedOutputDurationInMs,
  overallProgress,
}: ConvertMediaState) => {
  console.log(decodedVideoFrames);
                      
(parameter) decodedVideoFrames: number
  console.log(decodedAudioFrames);
                      
(parameter) decodedAudioFrames: number
  console.log(encodedVideoFrames);
                      
(parameter) encodedVideoFrames: number
  console.log(encodedAudioFrames);
                      
(parameter) encodedAudioFrames: number
  console.log(bytesWritten);
                   
(parameter) bytesWritten: number
  console.log(millisecondsWritten);
                      
(parameter) millisecondsWritten: number
  console.log(expectedOutputDurationInMs);
                          
(parameter) expectedOutputDurationInMs: number | null
  console.log(overallProgress);
                    
(parameter) overallProgress: number | null
};
tsx
import type {
  ConvertMediaOnMediaStateUpdate,
  ConvertMediaState,
} from '@remotion/webcodecs';
 
export const onMediaStateUpdate: ConvertMediaOnMediaStateUpdate = ({
  decodedVideoFrames,
  decodedAudioFrames,
  encodedVideoFrames,
  encodedAudioFrames,
  bytesWritten,
  millisecondsWritten,
  expectedOutputDurationInMs,
  overallProgress,
}: ConvertMediaState) => {
  console.log(decodedVideoFrames);
                      
(parameter) decodedVideoFrames: number
  console.log(decodedAudioFrames);
                      
(parameter) decodedAudioFrames: number
  console.log(encodedVideoFrames);
                      
(parameter) encodedVideoFrames: number
  console.log(encodedAudioFrames);
                      
(parameter) encodedAudioFrames: number
  console.log(bytesWritten);
                   
(parameter) bytesWritten: number
  console.log(millisecondsWritten);
                      
(parameter) millisecondsWritten: number
  console.log(expectedOutputDurationInMs);
                          
(parameter) expectedOutputDurationInMs: number | null
  console.log(overallProgress);
                    
(parameter) overallProgress: number | null
};

onVideoFrame?​

Function ConvertMediaOnVideoFrame

Allows you to hook into the video frames. The frames are VideoFrame objects.

tsx
import type {ConvertMediaOnVideoFrame} from '@remotion/webcodecs';
 
export const onVideoFrame: ConvertMediaOnVideoFrame = ({frame}) => {
  console.log(frame);
               
(parameter) frame: VideoFrame
 
  // Do something with the frame, for example:
  // - Draw to a canvas
  // - Modify the frame
 
  // Then return the frame to be used for encoding.
  return frame;
};
tsx
import type {ConvertMediaOnVideoFrame} from '@remotion/webcodecs';
 
export const onVideoFrame: ConvertMediaOnVideoFrame = ({frame}) => {
  console.log(frame);
               
(parameter) frame: VideoFrame
 
  // Do something with the frame, for example:
  // - Draw to a canvas
  // - Modify the frame
 
  // Then return the frame to be used for encoding.
  return frame;
};

The callback function may be async.

When the function returns, the returned frame is used for video encoding.
You may return the same frame or replace it with a new VideoFrame object.

After the function returns, convertMedia() will call .close() on the input and output frames.
This will destroy the frame and free up memory.

If you need a reference to the frame that lasts longer than the lifetime of this function, you must call .clone() on it.

If you return a different frame than the one you received, it must have the same values for codedWidth, codedHeight, displayWidth and displayHeight, timestamp and duration as the input frame.

signal?​

An AbortSignal to cancel the conversion process whenever the signal is aborted.

writer?​

object WriterInterface

A writer interface. The following interfaces are available:

Buffer writer
tsx
import {bufferWriter} from '@remotion/media-parser/buffer';
             
(alias) const bufferWriter: WriterInterface
import bufferWriter
Buffer writer
tsx
import {bufferWriter} from '@remotion/media-parser/buffer';
             
(alias) const bufferWriter: WriterInterface
import bufferWriter

Write to a resizable Array Buffer.

Web File System writer
tsx
import {canUseWebFsWriter, webFsWriter} from '@remotion/media-parser/web-fs';
                               
(alias) const webFsWriter: WriterInterface
import webFsWriter
 
await canUseWebFsWriter(); // boolean
Web File System writer
tsx
import {canUseWebFsWriter, webFsWriter} from '@remotion/media-parser/web-fs';
                               
(alias) const webFsWriter: WriterInterface
import webFsWriter
 
await canUseWebFsWriter(); // boolean

Use the Web File System API to write to a file.

By default the writer is webFsWriter.

onAudioTrack?​

Function ResolveAudioActionFn

Take control of what to do for each audio track in the file: Re-encoding, copying, or dropping.
The API for this feature is not yet documented as it is subject to change.

onVideoTrack?​

Function ResolveVideoActionFn

Take control of what to do for each video track in the file: Re-encoding, copying, or dropping.
The API for this feature is not yet documented as it is subject to change.

fields? and Callbacks​

You can obtain information about the video file while you are converting it.
This feature is inherited from parseMedia(), but only the callback-style API is available.

Converting a video
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  to: 'webm',
  videoCodec: 'vp8',
  audioCodec: 'opus',
  fields: {
    size: true,
  },
  onSize: (size) => {
    console.log(size);
                 
(parameter) size: number | null
  },
});
Converting a video
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  to: 'webm',
  videoCodec: 'vp8',
  audioCodec: 'opus',
  fields: {
    size: true,
  },
  onSize: (size) => {
    console.log(size);
                 
(parameter) size: number | null
  },
});

License​

See notes about @remotion/webcodecs.

See also​