@remotion/media-parser

available from v4.0.190

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

Design goals:

• Support all major containers: .mp4, .mov, .webm, .mkv, .avi, .m3u8, .ts, .mp3, .wav, .aac, .m4a and .flac.
• Easily get various information from multimedia files
• Work in the browser, Node.js and Bun
• Satisfy your query with minimal fetching
• Functional TypeScript API
• Be useful when passing unsupported media
• Allow decoding video frames and audio samples using WebCodecs
• Pausable, resumable and cancellable
• Be able to seek to a different position in a media file
• No dependencies

Installation

npm

npm i --save-exact @remotion/media-parser@4.0.305

yarn

pnpm i @remotion/media-parser@4.0.305

pnpm

bun i @remotion/media-parser@4.0.305

bun

yarn --exact add @remotion/media-parser@4.0.305

This assumes you are currently using v4.0.305 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://parser.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://parser.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()

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:

parseMedia()

Parse a media file.

downloadAndParseMedia()

Download and parse a media file.

parseMediaOnWebWorker()

Parse a media file in the browser on a separate thread.

parseMediaOnServerWorker()

Parse a media file on the server on a separate thread.

mediaParserController()

Pause, resume and abort the parsing.

hasBeenAborted()

Determine from an error if the parsing has been aborted.

WEBCODECS_TIMESCALE

The global timescale (1_000_000) of WebCodecs as a constant.

Readers

Choose the appropriate reader for your file source:

nodeReader

Read a file from the local file system.

webReader

Read a file from a File or from a URL.

universalReader

Read a file from a File, from a URL or from the local file system

Writers

Choose how to store files downloaded using downloadAndParseMedia():

nodeWriter

Write a file to the local file system using Node.

Types

TypeScript types

Reference for the types returned by Media Parser.

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