1.0.0-beta.10
diffusionstudio/core1.0.0-beta.10Aug 20, 2024by k9p5
AI Summary
Introduces a new `CanvasEncoder` implementation that allows users to record videos directly from a canvas element without needing the `Composition` object.
Key Highlights
- Added `CanvasEncoder` implementation
- Enables video recording directly from canvas elements
- Ideal for capturing canvas-based games or animations
New Features
- CanvasEncoder implementation
Full Release Notes
### 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
```typescript
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();
```