Skip to main content

@remotion/media-parser

warning

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

Media Parser

This is a package that parses video and audio files to extract metadata and samples.

Design goals:

Introduction video​


Installation​

npm i --save-exact @remotion/media-parser@4.0.365
This assumes you are currently using v4.0.365 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.

Hello World​

Get metadata from a video file - over 20 different fields are supported.

Get the duration and codec of a video
tsx
import {parseMedia} from '@remotion/media-parser';
 
const {durationInSeconds, videoCodec} = await parseMedia({
  src: 'https://remotion.media/video.mp4',
  fields: {
    durationInSeconds: true,
    videoCodec: true,
  },
});
 
console.log(durationInSeconds); // 5.056;
console.log(videoCodec); // 'h264';

Extract samples from a video file - supports WebCodecs.

Extract samples from a video
tsx
import {parseMedia} from '@remotion/media-parser';
 
await parseMedia({
  src: 'https://remotion.media/video.mp4',
  onVideoTrack: ({track}) => {
    // Get information about the
    console.log(track.width);
    console.log(track.height);
    return (sample) => {
      // Retrieve samples as they are extracted
      console.log(sample.timestamp); // 0
      console.log(sample.data); // Uint8Array(12345)
    };
  },
});
What are samples?

Samples contain audio or video data - but they are compressed using codecs like AAC for audio or H.264 for video.
You can turn audio samples into a waveform and video samples into images by decoding them.

Guide​

Getting video metadata
Simple examples of extracting video metadata
Available fields
Information you can get using the media parser
Fast and slow operations
Efficently use parseMedia()
Extract samples
Extract video and audio samples from a media file
Readers
Read from a variety of sources
Pause, resume and abort
Steer the parsing process
Seeking
Seek to a different position in a media file
Format support
What you can parse
Runtime support
Where you can run it
Extract ID3 tags and EXIF data
Get embedded tags from video files
Web Workers
Parse a media file in the browser on a separate thread.
Download and parse
Download a media file to disk and parse it simultaneously
Foreign file types
Get information from the errors when passing unsupported file types
WebCodecs
Decode video and audio frames in the browser
Stream selection
Choose which streams to use in a HLS Playlist

APIs​

The following APIs are available:

Readers​

Choose the appropriate reader for your file source:

Writers​

Choose how to store files downloaded using downloadAndParseMedia():

Types​

How does this compare to FFmpeg?​

  • Media Parser specializes for JavaScript and on the web.
    It is designed to embrace the language and make use of the APIs that JavaScript has to offer.
  • Unlike FFmpeg, Remotion Media Parser does not have functionality for decoding and encoding – it only parses media files.
    Instead, we hope you combine it with WebCodecs, the native API built into browsers.
  • Media Parser has no command line interface and cannot be integrated into native applications.

How does this compare to MP4Box.js?​

MP4Box.js does a better job at parsing the ISO Base Media Format (.mp4, .m4a, .mov) and supports reading more information from it.
Remotion Media Parser supports more container formats, with the goal that it can handle arbitrary user-provided media files.

Thank you​

Tella for boosting the development of @remotion/media-parser with $10.000!

License​

Remotion License