Canvas (Web API)

Browser (WASM)

An output that renders mixed video to the canvas and plays audio in current tab using browser API.

Usage

canvasOutputExample.tsx

import Smelter from "@swmansion/smelter-web-wasm";
import { View } from "@swmansion/smelter";

async function run() {
  const canvas = document.createElement("canvas");
  const smelter = new Smelter();
  await smelter.init();
  await smelter.registerOutput("example", <View />, {
    type: "canvas",
    video: {
      canvas,
      resolution: { width: 1920, height: 1080 },
    },
    audio: true,
  });
}
void run();

Reference

Type definitions

type RegisterCanvasOutput = {
  type: "canvas";
  video?: CanvasOutputVideo;
  audio?: boolean;
};

Properties

video

Parameters of an output video.

• Type: CanvasOutputVideo

---

audio

If true output audio will be played in the browser tab.

• Type: boolean
• Defaults to: false

CanvasOutputVideo

Type definitions

type RegisterCanvasOutput = {
  canvas: HTMLCanvasElement;
  resolution: { width: number; height: number };
};

Properties

canvas

Canvas element that video should be rendered on.

• Type: HTMLCanvasElement

resolution

Resolution of an output video

• Type: { width: number; height: number }