Fixing a MediaRecorder video

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

When recording a video with the MediaRecorder and getUserMedia() API, a WebM file gets created that may have some playback and compatibility issues.

Namely, it:

• does not show the video duration in the browser
• can be slow to seek around
• does not play in all browsers (Safari)

To fix these issues, you should either re-encode or re-mux the video.

• Re-encoding will decode and re-encode the frames (if you want to a different codec).
  It will be slower, but allows to use a more compatible format like MP4.
• Re-muxing will leave the frames, but disassemble and reassemble the file to allow for seeking points and duration metadata to be inserted.
  It is very fast, but does not allow for codec changes.

Why does this happen?

The reason is that while recording, browsers open a file and append video chunks to the end.
However, the important metadata such as duration and seeking points should be at the beginning of the file for them to be useful.

By placing the metadata at the beginning, the video player has the information it needs to seek around the video and display the duration.

Re-encoding on the server

The traditional way is to use a server and run FFmpeg on it:

ffmpeg -i input.webm -c:v libx264 -c:a aac output.mp4

or for re-muxing:

ffmpeg -i input.webm -c copy output.webm

Re-encoding using @remotion/webcodecs

You can also re-encode the video in the browser using the new and experimental @remotion/webcodecs package.

import {convertMedia} from '@remotion/webcodecs';

// The video get from the MediaRecorder as a Blob
const blob = new Blob([], {type: 'video/webm'});

await convertMedia({
  src: blob,
  container: 'mp4',
  videoCodec: 'h264',
  audioCodec: 'aac',
});

import {LicenseDisclaimer} from './LicenseDisclaimer'; import {UnstableDisclaimer} from './UnstableDisclaimer';

Re-muxing using @remotion/webcodecs

Instead of re-encoding to an MP4, you can also re-mux the video to a new WebM file:

import {convertMedia} from '@remotion/webcodecs';

// The video get from the MediaRecorder as a Blob
const blob = new Blob([], {type: 'video/webm'});

await convertMedia({
  src: blob,
  container: 'webm',
});

convertMedia() will move the metadata and seek information to the beginning of the video.

Sample application

Use remotion.dev/convert to fix a MediaRecorder video online using WebCodecs.
See the source code for a reference on how to implement it.

See also

• @remotion/webcodecs
• Convert a video
• convertMedia()
• @remotion/media-parser