To WebM

WebM is an open video format with royalty-free codecs. The native Node.js bindings (@cesdk/node-native) bundle the VP8, VP9, AV1, Opus and Vorbis encoders, so a WebM export works the same on macOS, Linux and Windows, with no system codec and no license for a platform encoder.

Export to WebM#

Call engine.block.exportVideo() with a page block and set mimeType to 'video/webm'. The method returns a Blob with the WebM file. Without other options, the export encodes VP9 video and Opus audio.

import fs from 'fs/promises';
import CreativeEngine from '@cesdk/node-native';

const engine = await CreativeEngine.init({ license: 'YOUR_CESDK_LICENSE_KEY' });

try {
  // Create a small video scene programmatically
  const scene = engine.scene.createVideo();
  const page = engine.block.create('page');
  engine.block.appendChild(scene, page);
  engine.block.setWidth(page, 1280);
  engine.block.setHeight(page, 720);
  engine.block.setDuration(page, 5);

  const block = engine.block.create('graphic');
  engine.block.setShape(block, engine.block.createShape('rect'));
  const fill = engine.block.createFill('color');
  engine.block.setColor(fill, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.1, a: 1 });
  engine.block.setFill(block, fill);
  engine.block.setPosition(block, 240, 160);
  engine.block.setWidth(block, 800);
  engine.block.setHeight(block, 400);
  engine.block.appendChild(page, block);

  // Export the page as a WebM video
  const blob = await engine.block.exportVideo(page, {
    mimeType: 'video/webm',
    onProgress: (renderedFrames, encodedFrames, totalFrames) => {
      console.log(`Encoded ${encodedFrames}/${totalFrames} frames`);
    },
  });

  await fs.writeFile('./output.webm', Buffer.from(await blob.arrayBuffer()));
} finally {
  engine.dispose();
}

Every other video option, such as targetWidth, framerate, videoBitrate, timeOffset and duration, works the same as for an MP4 export.

Choose the Codecs#

Set videoCodec and audioCodec to choose the codecs. A WebM file holds VP8, VP9 or AV1 video and Opus or Vorbis audio.

import { AudioCodec, VideoCodec } from '@cesdk/node-native';

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/webm',
  videoCodec: VideoCodec.AV1,
  audioCodec: AudioCodec.Vorbis,
  videoBitrate: 4_000_000,
});

VP8 is the oldest of the three video codecs, and almost every player decodes it. AV1 makes the smallest file at the same quality, but it takes the longest to encode.

When you ask for a codec that WebM cannot hold, such as H.264 or AAC, the export fails with an error. It does not change the codec for you.

Keep the Transparency#

Set exportAlpha to true to keep the transparent areas of the page. The WebM file then has a second video stream with the transparency. Only VP8 and VP9 keep it, so set videoCodec too.

// Hide the page background, so only the blocks on the page are opaque.
engine.block.setFillEnabled(page, false);

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/webm',
  videoCodec: VideoCodec.VP9,
  exportAlpha: true,
});

An export with exportAlpha and AV1, or with 'video/mp4', fails with ENCODE.VIDEO_ALPHA_UNSUPPORTED. Whether a player shows the transparency depends on the player. Chrome shows it.

Export the Audio Only#

Call engine.block.exportAudio() with mimeType set to 'audio/webm' to get the sound of a block as a WebM file. Set audioCodec to AudioCodec.Vorbis for Vorbis instead of Opus.

const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/webm' });
await fs.writeFile('./output-audio.webm', Buffer.from(await audioBlob.arrayBuffer()));

WebM Export Options#

The other options are the same as for an MP4 export. The MP4 guide lists them.

Troubleshooting#

• The export fails with ENCODE.VIDEO_CODEC_CONTAINER_MISMATCH or ENCODE.AUDIO_CODEC_CONTAINER_MISMATCH. The codec does not fit the file type. Use VP8, VP9 or AV1 with Opus or Vorbis for WebM, or leave the codecs at Auto.
• The exported video is black where the page is transparent. Set exportAlpha with VP8 or VP9, and play the file in a player that reads the transparency stream.

API Reference#

Next Steps#

• Export to MP4 - Export with H.264 or HEVC, and see every video export option
• Video limitations - Resolution, duration, codec and hardware details