Skip to main content

Convert a video

You can convert a video in the browser from one format to another using the convertMedia() function from @remotion/webcodecs.

💼 Important License Disclaimer
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.

The following input formats are supported:

  • MP4
  • WebM
  • AVI

The following output formats are supported:

  • MP4
  • WebM
  • WAV

The following output video codecs are supported:

  • VP8 (WebM only)
  • VP9 (WebM only)
  • H.264 (MP4 only)

The following output audio codecs are supported:

  • Opus (WebM only)
  • AAC (MP4 only)
  • PCM (WAV only)

Installation​

Install the @remotion/webcodecs and @remotion/media-parser packages:

npm i --save-exact @remotion/webcodecs@4.0.234 @remotion/media-parser@4.0.234
npm i --save-exact @remotion/webcodecs@4.0.234 @remotion/media-parser@4.0.234
This assumes you are currently using v4.0.234 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

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

Basic conversions​

Converting from an URL​

(needs to be CORS-enabled)

Converting an MP4 to a WebM
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
});
Converting an MP4 to a WebM
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
});

Converting from a File:​

Converting a file
tsx
import {convertMedia} from '@remotion/webcodecs';
import {webFileReader} from '@remotion/media-parser/web-file';
 
// Get an actual file from an <input type="file"> element
const file = new File([], 'video.mp4');
 
await convertMedia({
  src: file,
  container: 'webm',
  reader: webFileReader,
});
Converting a file
tsx
import {convertMedia} from '@remotion/webcodecs';
import {webFileReader} from '@remotion/media-parser/web-file';
 
// Get an actual file from an <input type="file"> element
const file = new File([], 'video.mp4');
 
await convertMedia({
  src: file,
  container: 'webm',
  reader: webFileReader,
});

Specifying the output codec​

You can specify the output codec by passing the videoCodec and audioCodec options:

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

Advanced conversions​

See Track Transformation for how you can get more control over the conversion.

See also​