Rendering
Client Side Rendering

Client Side Rendering

Client-side rendering is an emerging strategy within the Montagix SDK, designed to generate videos directly within the user's browser. By utilizing the capabilities of modern web technologies, it captures screenshots of the canvas and stitches them together, offering a unique approach to video creation.

Overview

The idea behind client-side rendering is to utilize the capabilities of the user's device to generate videos, without the need to rely on server resources. This offers a direct and immediate feedback loop, making it especially useful in certain scenarios where rapid iteration is essential.

Key Characteristics

Canvas Screenshot Approach

The core mechanism of client-side rendering in Montagix SDK is innovative: it takes sequential screenshots of the canvas displaying the video content. Once captured, these screenshots are compiled and combined, frame-by-frame, to produce the final video.

Development Phase

Client-side rendering is an exciting addition to Montagix SDK, but it's worth noting that it's still in active development. As we refine and enhance its capabilities, we appreciate your patience and feedback.

Suited for Short Videos

Given the current capabilities and the inherent nature of client-side processing, this rendering strategy is particularly suited for shorter videos. For projects where the video length is manageable and the need for rapid feedback is high, client-side rendering shines.

Potential Use Cases

Rapid Prototyping

If you're working on a short video concept and need to see how elements come together swiftly, client-side rendering can be a valuable tool.

Immediate Feedback

For situations where immediate user feedback is necessary, generating the video directly in the browser can be advantageous.

Lightweight Projects

When working on lightweight video projects that don't require heavy processing or long durations, client-side rendering can offer a quick and efficient solution.

Example

Setting up

const engine = new Engine({
  resolution: [1080, 1920],
  storageProvider: new LocalStorageProvider(),
  renderingStrategy: new ClientSideRenderingStrategy(),
});

Usage

const instance = engine.render();
 
instance.on("progress", (progress) => {
  console.log("progress", progress);
});
 
instance.on("complete", (video) => {
  console.log("video", video);
});
 
instance.on("error", (error) => {
  console.log("error", error);
});
 
instance.start();