Installation

# pnpm (recommended)
pnpm add @designcombo/video

# npm
npm install @designcombo/video

# yarn
yarn add @designcombo/video

import { Studio, Video } from "@designcombo/video";

const studio = new Studio({
  width: 1920,
  height: 1080,
  fps: 30,
  bgColor: "#000000",
  canvas: document.getElementById("canvas") as HTMLCanvasElement, // Optional
});

// Load a video clip
const videoClip = await Video.fromUrl("video.mp4");

// Set display range (in microseconds)
// 0 to 5 seconds
videoClip.set({ display: { from: 0, to: 5e6 } });

// Add to studio
studio.addClip(videoClip);

// Play preview
studio.play();

import { Studio, type IStudioOpts } from "@designcombo/video";

const opts: IStudioOpts = {
  width: 1920,
  height: 1080,
  fps: 30
};

const studio = new Studio(opts);

<script type="module">
  import { Studio } from "https://cdn.jsdelivr.net/npm/@designcombo/video/+esm";

  const studio = new Studio({
    width: 1920,
    height: 1080,
    fps: 30,
    canvas: document.getElementById('my-canvas')
  });
</script>

import { Compositor } from "@designcombo/video";

// Check environment capabilities
const result = await Compositor.isSupported();

if (result) {
  console.log("Environment is supported");
} else {
  console.error("Video processing not supported in this environment");
}