Skip to content
Smelter logo Smelter logo Smelter

Canvas (Web API)

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

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()

RegisterCanvasOutput

import { RegisterCanvasOutput } from "@swmansion/smelter-web-wasm"
Type definitions 

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

Properties

video

Parameters of an output video.

audio

If true MediaStream track returned from a register will include audio track.

  • Type: boolean

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: { resolution: { width: number; height: number }}