Rendering

Rendering videos on the client side is made highly efficient by utilizing WebCodecs, a modern browser API that supports hardware-accelerated encoding. This allows for fast and optimized video processing directly in the browser.

Setup

To begin, you’ll need a Composition to render. Below is an example of setting up an empty Composition for demonstration purposes:

import * as core from '@diffusionstudio/core';
 
const composition = new core.Composition();

Next, create an encoder using the Composition:

const encoder = new core.Encoder(composition);

Configuring the Encoder

The encoder can be customized via its second argument, which allows you to configure various output settings. The default configuration is as follows:

{
  video: {
    enabled: true, // true by default
    codec: 'avc',
    bitrate: 10e6,
    fps: 30,
    resolution: 1,
  },
  audio: {
    enabled: true,
    sampleRate: 48000,
    numberOfChannels: 2,
    bitrate: 128e3,
    codec: 'aac',
  },
}

For example, to produce a 4K video at 60 FPS from a default 1080p Composition, you can configure the encoder like this:

const encoder = new core.Encoder(composition, {
  video: {
    fps: 60,
    resolution: 2,
  },
});

Rendering the Video

To start exporting the video, use the render method, which accepts a render target as an argument. The recommended approach is to use the showSaveFilePicker API:

const fileHandle = await window.showSaveFilePicker({
  suggestedName: 'untitled_video.mp4',
  types: [
    {
      description: 'Video File',
      accept: { 'video/mp4': ['.mp4'] },
    },
  ],
});
 
await encoder.render(fileHandle);

This approach writes the MP4 chunks directly to disk as they are generated, allowing you to render videos that exceed your available RAM. However, note that browser support for showSaveFilePicker is currently limited. In such cases, other export targets can be used:

const blob = await encoder.render();            // Returns the video as a Blob.
core.assert(blob.type == 'success');
const blob = res.data;
 
await encoder.render('myVideo.mp4');            // Downloads the result with a specified name.
await encoder.render((data: Uint8Array, position: number) => {
  console.log(data, position)
});                                             // Streams the video to a callback.

To ensure compatibility across browsers, you can provide a fallback for showSaveFilePicker:

if (!('showSaveFilePicker' in window)) {
  Object.assign(window, { showSaveFilePicker: async () => 'myVideo.mp4' });
}

This fallback ensures that the export process continues seamlessly even if showSaveFilePicker is not available.

Cancelling the export

You can cancel the export by calling the cancel method on the encoder:

encoder.cancel();

Getting the export progress

You can get the export progress by listening to the progress event on the encoder:

encoder.onProgress = (event) => {
  const { progress, total } = event;
 
  console.log(Math.round(progress * 100 / total) + '%');
};