v1.0.0-beta.10

Added CanvasEncoder implementation

The CanvasEncoder is a powerful tool for creating video recordings directly from a canvas element in the browser, ideal for capturing canvas-based games or animations without the need for our Composition object.

Basic Example

import { CanvasEncoder } from '@diffusionstudio/core';

// Make sure to assign video dimensions
const canvas = new OffscreenCanvas(1920, 1080);

const encoder = new CanvasEncoder(canvas);

const ctx = canvas.getContext("2d")!;

for (let i = 0; i < 90; i++) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // background
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // text
    ctx.fillStyle = "white";
    ctx.font = "50px serif"; // animated Hello World
    ctx.fillText("Hello world", 10 + i * 20, 10 + i * 12);

    // Encode the current canvas state
    await encoder.encodeVideo();
}

const blob = await encoder.export();