Skip to main content

Convert a video

warning

We are phasing out Remotion WebCodecs and are moving to Mediabunny!

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:

  • ISO Base Media (.mp4, .mov, .m4a)
  • Matroska (.mkv, .webm)
  • .avi
  • MPEG Transport Stream (.ts)
  • .wav,
  • .mp3
  • .flac
  • .aac
  • HLS (.m3u8)

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:

npx remotion add @remotion/webcodecs @remotion/media-parser

🚧 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
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
});

const blob = await result.save();

Converting from a File:​

Converting a file
import {convertMedia} from '@remotion/webcodecs';

// Get an actual file from an <input type="file"> element
const file = new File([], 'video.mp4');

const result = await convertMedia({
  src: file,
  container: 'webm',
});

const blob = await result.save();

Specifying the output codec​

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

Converting to VP9
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  videoCodec: 'vp9',
  audioCodec: 'opus',
});

const blob = await result.save();

Saving the converted video​

The convertMedia() function returns a result object with a save() method that you need to call to get the converted video as a Blob.

Download the converted video​

Download converted video
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
});

const blob = await result.save();

// Create download link
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'converted-video.webm';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

Upload the converted video​

Upload converted video
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
});

const blob = await result.save();

// Upload to server
const formData = new FormData();
formData.append('video', blob, 'converted-video.webm');

await fetch('/api/upload', {
  method: 'POST',
  body: formData,
});

Display the converted video​

Display converted video
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
});

const blob = await result.save();

// Display in video element
const url = URL.createObjectURL(blob);
const video = document.createElement('video');
video.src = url;
video.controls = true;
document.body.appendChild(video);

// Don't forget to clean up when done
// URL.revokeObjectURL(url);

Advanced conversions​

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

See also​