Skip to main content

Parsing on Web Workers

warning

Unstable API: This package is experimental. The API may change in the future.
The API for getting video metadata is stable and may be used in production.

Parsing using parseMedia() will block the main thread of JavaScript, which is undesirable if you are displaying a UI in the browser, or are serving requests on a web server.

You can run the parse on a Worker instead of on the main thread using parseMediaOnWebWorker().

The API takes care of exchanging messages between the main thread and the Web Worker, so that parseMediaOnWebWorker() can be used as a drop-in replacement for parseMedia().

Example​

Parsing a video on a Web Worker
tsx
import {parseMediaOnWebWorker} from '@remotion/media-parser/worker';
 
const result = await parseMediaOnWebWorker({
  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 on the server using a worker​

Bun also implements the Worker object.
To use it, you can use the parseMediaOnServerWorker() API.

Parsing a video on a Web Worker on Bun
tsx
import {parseMediaOnServerWorker} from '@remotion/media-parser/worker';
 
const result = await parseMediaOnServerWorker({
  src: '/tmp/video.mp4',
  fields: {
    durationInSeconds: true,
    dimensions: true,
  },
});
 
console.log(result.durationInSeconds); // 10
console.log(result.dimensions); // {width: 1920, height: 1080}

The difference to parseMediaOnWebWorker() is that it also supports from reading local file paths.

API Differences​

The parseMediaOnWebWorker and parseMediaOnServerWorker() APIs don't accept the reader field.

It is hardcoded to webReader and universalReader respectively.

See also​