You can create complex videos by composing multiple individual scenes (chunks). Each chunk is rendered from a URL or raw HTML content. You can set transitions (like fades) between these chunks and then combine them into a single multi-scene video.
- Create Chunks: Use
createChunkVideo to define individual scenes. - Wait for Rendering: Use
chunk.startAndWait() to ensure all chunks are rendered before proceeding. - Set Transitions: Use
chunk.setTransition() to define effects between chunks. - Compose Multi-Video: Use
createMultiVideo with an array of chunks to merge them into a final file. - Start Synthesis: Call
.start() on the multi-video instance and listen for the completed event.
import WebVideoCreator, { VIDEO_ENCODER, TRANSITION, logger } from "web-video-creator";
const wvc = new WebVideoCreator();
wvc.config({
mp4Encoder: VIDEO_ENCODER.NVIDIA.H264
});
// 1. Create chunks
const chunk1 = wvc.createChunkVideo({
url: "http://localhost:8080/scene-1.html",
width: 1280,
height: 720,
fps: 30,
duration: 10000,
showProgress: true
});
const chunk2 = wvc.createChunkVideo({
url: "http://localhost:8080/scene-2.html",
width: 1280,
height: 720,
fps: 30,
duration: 10000,
showProgress: true
});
// 2. Wait for chunks to render
await Promise.all([chunk1.startAndWait(), chunk2.startAndWait()]);
// 3. Set transitions
chunk1.setTransition({ id: TRANSITION.FADE, duration: 500 });
// 4. Create multi-video
const video = wvc.createMultiVideo({
width: 1280,
height: 720,
fps: 30,
chunks: [chunk1, chunk2],
outputPath: "./test.mp4",
showProgress: true
});
// 5. Listen and start
video.once("completed", result => {
logger.success(`Render Completed!!!\nvideo duration: ${Math.floor(result.duration / 1000)}s\ntakes: ${Math.floor(result.takes / 1000)}s\nRTF: ${result.rtf}`)
});
video.start();
