Chapter 701: Processing video with WebCodecs and @remotion/media-parser

Core Idea

:::warning We are phasing out Media Parser and are moving to Mediabunny!

Key Concepts

• Minimal example
• The importance of queueing
• How Remotion helps you work with WebCodecs
• Practical considerations
• Check if browser has VideoDecoder and AudioDecoder
• Check if the browser supports the codec
• Error handling
• Handling rotation

Code Examples

// ⚠️ Simple, but non-production ready example

const result = await parseMedia({
  src: 'https://remotion.media/video.mp4',
  onVideoTrack: ({track}) => {
    const decoder = new VideoDecoder({
      output: console.log,
      error: console.error,
    });

    decoder.configure(track);

    return (sample) => {
      decoder.decode(new EncodedVideoChunk(sample));
    };
  },
});

• What it demonstrates: Usage pattern for Processing video with WebCodecs and @remotion/media-parser from the official docs.

Key Takeaways

1. Understand minimal example when working with Processing video with WebCodecs and @remotion/media-parser.
2. Understand the importance of queueing when working with Processing video with WebCodecs and @remotion/media-parser.
3. Understand how remotion helps you work with webcodecs when working with Processing video with WebCodecs and @remotion/media-parser.
4. Understand practical considerations when working with Processing video with WebCodecs and @remotion/media-parser.
5. Understand check if browser has videodecoder and audiodecoder when working with Processing video with WebCodecs and @remotion/media-parser.

Connects To

• Download and Parse: related page in the Media Parser (@remotion/media-parser) section.
• Download and Parse Media: related page in the Media Parser (@remotion/media-parser) section.
• Fast and Slow: related page in the Media Parser (@remotion/media-parser) section.