Stills
Render a single frame to an image.
A still goes through the same pipeline as an export: same compositor, decoding and fonts. It shows what that frame will look like in the exported file.
Browser
import { renderProjectStill } from "@miraiclip/renderer";
const png = await renderProjectStill(project, { timeUs: 2_000_000 });
const url = URL.createObjectURL(png);| Option | Default | What it does |
|---|---|---|
timeUs | required | Composition time to render |
width, height | project size | Output size in pixels |
type | "image/png" | "image/png", "image/jpeg" or "image/webp" |
quality | browser default | 0 to 1, for JPEG and WebP |
factories | built-in kinds | Scene-node factories for custom clip kinds. Pass the player's |
openDemuxer, createDecoder | mediabunny + WebCodecs | Media adapters |
It resolves with a Blob. Each call sets up and tears down its own renderer, so it doesn't touch a running player.
Thumbnails
Render small JPEGs along the timeline, for example for a scrubber or a project list. Keep the composition's aspect ratio.
import { renderProjectStill } from "@miraiclip/renderer";
async function thumbnails(count: number, endUs: number): Promise<string[]> {
const urls: string[] = [];
for (let i = 0; i < count; i++) {
const timeUs = Math.round((endUs * (i + 0.5)) / count);
const blob = await renderProjectStill(project, {
timeUs,
width: 320,
height: 180,
type: "image/jpeg",
quality: 0.8,
});
urls.push(URL.createObjectURL(blob));
}
return urls;
}Render them one at a time: each call decodes media for its frame.
Server
From Node, createRenderSession from @miraiclip/server-export keeps one headless Chrome open, so each frame skips the browser launch.
import { createRenderSession } from "@miraiclip/server-export";
import type { ProjectDocument } from "@miraiclip/core";
import { writeFile } from "node:fs/promises";
declare const doc: ProjectDocument;
const stills = await createRenderSession({ assetsDir: "./media" });
try {
const png = await stills.renderStill(doc, { timeUs: 2_000_000, width: 640, height: 360 });
await writeFile("poster.png", png);
} finally {
await stills.close();
}renderProjectStill | RenderSession.renderStill | |
|---|---|---|
| Runs in | The browser | Node, through headless Chrome |
| Input | A Project | A ProjectDocument (project.toJSON()), passed per call |
| Output | Blob (PNG, JPEG or WebP) | Uint8Array (PNG only) |
| Options | timeUs, width, height, type, quality | timeUs, width, height |
Session options (assets, assetsDir, browser) and the browser rules are the same as for server export: see Server (Node). Calls on one session run one at a time.
The MCP server's preview_frame tool uses a render session, so an agent sees the same frames.