Added new beta 10 canvas encoder example and documentation

Author: k9p5

README.md

@@ -5,8 +5,9 @@
 
 <p align="center">
   <img src="https://img.shields.io/badge/Made with-Typescript-blue?color=000000&logo=typescript&logoColor=ffffff" alt="Static Badge">
-  <a href="https://vitejs.dev"><img src="https://img.shields.io/badge/Powered%20by-Vite-000000?style=flat" alt="powered by vite"></a>
+  <a href="https://vitejs.dev"><img src="https://img.shields.io/badge/Powered%20by-Vite-000000?style=flat&logo=Vite&logoColor=ffffff" alt="powered by vite"></a>
   <a href="https://discord.gg/h5QGXw8m"><img src="https://img.shields.io/discord/1115673443141156924?style=flat&logo=discord&logoColor=fff&color=000000" alt="discord"></a>
+  <a href="https://x.com/diffusionstudi0"><img src="https://img.shields.io/badge/Follow for-Updates-blue?color=000000&logo=X&logoColor=ffffff" alt="Static Badge"></a>
 </p>
 <br/>
 

docs/guide/canvas.md

@@ -0,0 +1,87 @@
+# Canvas Encoder
+
+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.
+
+## Installation
+
+To use the `CanvasEncoder`, import it into your project:
+
+```typescript
+import { CanvasEncoder } from '@diffusionstudio/core';
+```
+
+## Basic Usage
+
+Start by creating a canvas element and setting its dimensions to match your desired video resolution:
+
+```typescript
+// Make sure to assign video dimensions
+const canvas = new OffscreenCanvas(1920, 1080);
+
+const encoder = new CanvasEncoder(canvas);
+```
+
+### Configuration Options
+
+The `CanvasEncoder` constructor accepts an optional second argument to configure the output settings. The default configurations are:
+
+```typescript
+{
+    sampleRate: 44100,        // Audio sample rate in Hz
+    numberOfChannels: 2,      // Number of audio channels
+    videoBitrate: 10e6,       // Video bitrate in bits per second
+    fps: 30,                  // Frames per second for the video
+}
+```
+
+## Video Encoding
+
+After setting up the encoder, you can encode individual frames from the canvas to create your video. The following example creates a 3-second video by encoding 90 frames:
+
+```typescript
+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();
+}
+```
+
+## Audio Encoding (Optional)
+
+To add audio to your video, you can use the Web Audio API. The `CanvasEncoder` supports encoding audio buffers along with the video:
+
+```typescript
+const response = await fetch('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/audio/sfx/tada.mp3');
+const arrayBuffer = await response.arrayBuffer();
+const context = new OfflineAudioContext(2, 1, 48e3);
+
+// Decode the audio data to get an AudioBuffer
+const audioBuffer = await context.decodeAudioData(arrayBuffer);
+
+// Encode the audio buffer
+await encoder.encodeAudio(audioBuffer);
+```
+
+The audio will be automatically resampled to match the output configuration, so you don't need to worry about sample rate differences.
+
+> Note: By adding the audio, the resulting video duration will be 6 seconds, as that's the duration of the sound effect. In production you want to keep the video and audio durations synced.
+
+## Exporting the Video
+
+Once you've encoded all the video frames and audio data, finalize the encoding process and export the result as an MP4 file:
+
+```typescript
+const blob = await encoder.export();
+```
+
+The `export` method returns a `Blob` containing the video with a `video/mp4` MIME type. You can then save or process this blob as needed.

docs/guide/models.md

@@ -54,3 +54,5 @@ timestamp.frames;  // 30
 timestamp.millis;  // 1000
 timestamp.seconds; // 1
 ```
+
+**Next:** [Canvas Encoder](/docs/guide/canvas.md)

docs/guide/video.md

@@ -8,6 +8,7 @@ This guide provides a comprehensive overview of using the Diffusion Studio libra
 * [Image Clip](/docs/guide/image.md)
 * [Text Clip](/docs/guide/text.md)
 * [Models](/docs/guide/models.md)
+* [Canvas Encoder](/docs/guide/canvas.md)
 
 ## Setting Up a Composition
 

examples/scripts/canvas-encoder.ts

@@ -0,0 +1,71 @@
+import { Application, buildGeometryFromPath, GraphicsPath, Mesh, Texture } from 'pixi.js';
+import { CanvasEncoder, downloadObject } from '@diffusionstudio/core';
+
+// Create a new application
+const app = new Application();
+
+// Initialize the application
+await app.init({
+  backgroundColor: 'brown',
+  height: 1080,
+  width: 1920,
+});
+
+document.body.appendChild(app.canvas);
+
+const path = new GraphicsPath()
+  .rect(-50, -50, 100, 100)
+  .circle(80, 80, 50)
+  .circle(80, -80, 50)
+  .circle(-80, 80, 50)
+  .circle(-80, -80, 50);
+
+const geometry = buildGeometryFromPath({
+  path,
+});
+
+const meshes: Mesh[] = [];
+
+for (let i = 0; i < 200; i++) {
+  const x = Math.random() * app.screen.width;
+  const y = Math.random() * app.screen.height;
+
+  const mesh = new Mesh({
+    geometry,
+    texture: Texture.WHITE,
+    x,
+    y,
+    tint: Math.random() * 0xffffff,
+  });
+
+  app.stage.addChild(mesh);
+
+  meshes.push(mesh);
+}
+
+// create new encoder with a framerate of 30FPS
+const encoder = new CanvasEncoder(app.canvas);
+
+for (let i = 0; i < 180; i++) {
+  // render to canvas
+  app.render();
+  // encode current canvas state
+  await encoder.encodeVideo();
+  // animate
+  meshes.forEach((mesh) => {
+    mesh.rotation += 0.02;
+  });
+}
+
+// optionally create audio buffer
+// using the WebAudio API
+const response = await fetch('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/audio/sfx/tada.mp3');
+const arrayBuffer = await response.arrayBuffer();
+const context = new OfflineAudioContext(1, 1, 48e3);
+const audioBuffer = await context.decodeAudioData(arrayBuffer);
+
+// encode audio buffer (sample rate will be adapted for you)
+await encoder.encodeAudio(audioBuffer);
+
+// finalize encoding/muxing and download result
+downloadObject(await encoder.export(), 'test.mp4');

package-lock.json

@@ -14,6 +14,6 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "@diffusionstudio/core": "^1.0.0-beta.9"
+    "@diffusionstudio/core": "^1.0.0-beta.10"
   }
 }