Skip to main content

parseMedia()

Part of the @remotion/media-parser package. available from v4.0.190

warning

Unstable API: This package is experimental. We might change the API at any time, until we remove this notice.

Examples​

Parsing a hosted video
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});
 
console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}
Parsing a hosted video
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});
 
console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}
Parsing a local file
tsx
import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';
 
const result = await parseMedia({
  src: '/Users/jonnyburger/Downloads/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  reader: nodeReader,
});
Parsing a local file
tsx
import {parseMedia} from '@remotion/media-parser';
import {nodeReader} from '@remotion/media-parser/node';
 
const result = await parseMedia({
  src: '/Users/jonnyburger/Downloads/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  reader: nodeReader,
});

API​

warning

Unstable API: This package is experimental. We might change the API at any time, until we remove this notice.

src​

Either a local file path, or a URL, or a File or Blob object.
If you pass a local file path, you must also pass nodeReader as the reader argument.
If you pass a File object, you must also pass webFileReader as the reader argument.

fields?​

An object specifying which fields you'd like to receive.
If you like to receive the field, pass true as the value.
Possible fields are:

dimensions​

{width: number, height: number}

The dimensions of the video.
Any rotation is already applied - the dimensions are like a media player would show them.
Use unrotatedDimensions to get the dimensions before rotation.

durationInSeconds​

number | null

The duration of the video in seconds.

name​

string

The name of the file.

container​

"mp4" | "webm" | null

The container of the file.

size​

number | null

The size of the input in bytes.

boxes​

The internal structure of the video. Unstable, internal data structure, refer to the TypeScript types to see what's inside.

fps​

number | null

The frame rate of the video.

videoCodec​

The video codec of the file.
If multiple video tracks are present, this will be the first video track.
One of "h264", "h265", "vp8", "vp9", "av1", "prores" or null (in case of an unknown codec).

audioCodec​

The audio codec of the file.
If multiple audio tracks are present, this will be the first audio track.
One of 'aac', 'mp3', 'aiff', 'opus', 'pcm', 'unknown' (audio is there but not recognized) or null (in case of no audio detected).

tracks​

Returns two arrays videoTracks and audioTracks.
The data structure of them is not yet stable.

unrotatedDimensions​

{width: number, height: number}

The dimensions of the video before rotation.

rotation​

number

The rotation of the video in degrees (e.g. -90 for a 90° counter-clockwise rotation).

reader?​

A reader interface.
Default value: fetchReader, which uses fetch() to read the video.
If you pass nodeReader, you must also pass a local file path as the src argument. If you pass webFileReader, you must also pass a File as the src argument.

onVideoTrack?​

A callback that is called when a video track is detected.
It receives a VideoTrack object (API not yet stable).
You must return either null or a callback that is called for each sample that corresponds to the video track.

The sample has the type VideoSample and while not all fields are stable, it has all the mandatory fields for the EncodedVideoChunk constructor.

Reading video frames
tsx
import {parseMedia, OnVideoTrack} from '@remotion/media-parser';
 
const onVideoTrack: OnVideoTrack = (track) => {
  console.log(track);
 
  return (sample) => {
    console.log(new EncodedVideoChunk(sample));
  };
};
Reading video frames
tsx
import {parseMedia, OnVideoTrack} from '@remotion/media-parser';
 
const onVideoTrack: OnVideoTrack = (track) => {
  console.log(track);
 
  return (sample) => {
    console.log(new EncodedVideoChunk(sample));
  };
};

onAudioTrack?​

A callback that is called when an audio track is detected.
It receives a AudioTrack object (API not yet stable).
You must return either null or a callback that is called for each sample that corresponds to the audio track.

The sample has the type AudioSample and while not all fields are stable, it has all the mandatory fields for the EncodedAudioChunk constructor.

Reading audio frames
tsx
import {parseMedia, OnAudioTrack} from '@remotion/media-parser';
 
const onAudioTrack: OnAudioTrack = (track) => {
  console.log(track);
 
  return (sample) => {
    console.log(new EncodedAudioChunk(sample));
  };
};
Reading audio frames
tsx
import {parseMedia, OnAudioTrack} from '@remotion/media-parser';
 
const onAudioTrack: OnAudioTrack = (track) => {
  console.log(track);
 
  return (sample) => {
    console.log(new EncodedAudioChunk(sample));
  };
};

onParseProgress?​

A callback that is called from time to time when bytes have been read from the media.
It includes the following data:

tsx
import {ParseMediaProgress} from '@remotion/media-parser';
                
(alias) type ParseMediaProgress = {
    bytes: number;
    percentage: number | null;
    totalBytes: number | null;
}
import ParseMediaProgress
tsx
import {ParseMediaProgress} from '@remotion/media-parser';
                
(alias) type ParseMediaProgress = {
    bytes: number;
    percentage: number | null;
    totalBytes: number | null;
}
import ParseMediaProgress
note

You may make this an async function, and while it is not resolved, the parsing process will be paused.
This is useful if you want to add a small delay inbetween progress steps to keep the UI interactive.

logLevel?​

One of "error", "warn", "info", "debug", "trace".
Default value: "info", which logs only important information.

signal?​

An AbortSignal instance.
If the signal is aborted, the parser will stop reading the media and stop the decoding process and throw an error.

Callbacks​

Each field also has a callback that allows you to retrieve the value as soon as it is obtained without waiting for the function to resolve.
You must pass true as the value for the field in order for the callback to be called.

Using a callback
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  onDurationInSeconds: (durationInSeconds) => {
    console.log(durationInSeconds);
  },
  onDimensions: (dimensions) => {
    console.log(dimensions);
  },
});
Using a callback
tsx
import {parseMedia} from '@remotion/media-parser';
 
const result = await parseMedia({
  src: 'https://example.com/my-video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
  onDurationInSeconds: (durationInSeconds) => {
    console.log(durationInSeconds);
  },
  onDimensions: (dimensions) => {
    console.log(dimensions);
  },
});

See also​