Video composition

Render a Composition

When you're done adding layers to a composition, it's time to render the composition to video with composition.encode().

There are two encode modes: synchronous and asynchronous.

Synchronous encoding

Synchronous encoding means that the call to encode will wait for encoding to finish, then return the video object.

Synchronous encoding is simpler than asynchronous encoding because it allows encoding and retrieval of the completed video with one line of code. The tradeoff is that the call to encode will take considerably longer to execute than calling it asynchronously.

To synchronously encode your video, set synchronously to true:

const video = await composition.encode({ synchronously: true });

Synchronous encoding in develop mode

In develop mode, synchronous encoding outputs information to the terminal, and automatically opens the video in the browser once it's ready.

Asynchronous encoding

Asynchronous encoding means that the call to encode will start the encoding process, then immediately return an EncodeResponse object.

Asynchronous encoding allows your code to execute faster because it only tells Editframe to start encoding the video, but doesn't wait for encoding to complete. The tradeoff is that you will need to set up a webhook endpoint (or manually implement your own system) to determine when encoding has completed and you can access the video.

To asynchronously encode your video, omit the options object, or set synchronously to false:

let response = await composition.encode();
// or
response = await composition.encode({ synchronously: false });

EncodeResponse Object

EncodeResponse is an object with the following properties:

idstringVideo ID. Use this ID to get the video later
statusstringThe video's status, e.g. 'processing'
timestampnumberUnix time stamp of the time composition.encode() was called

Example EncodeResponse:

  "id": "yKOqd7QnJZ",
  "timestamp": 1651671897,
  "status": "processing"
Layer configuration