RenderSession
The RenderSession class provides an async iterable interface for frame-by-frame rendering. It handles seeking to each frame and waiting for stability before yielding.
class RenderSession implements AsyncIterable<number> {
constructor(
helios: Helios,
options: RenderSessionOptions
)
[Symbol.asyncIterator](): AsyncIterator<number>
}
Constructor parameters
The Helios instance to render.
options
RenderSessionOptions
required
Configuration for the render session.
Methods
[Symbol.asyncIterator]
() => AsyncIterator<number>
Returns an async iterator that yields frame numbers. Each iteration seeks to the next frame and waits for stability.
RenderSessionOptions
Configuration options for creating a render session.
interface RenderSessionOptions {
startFrame: number;
endFrame: number;
abortSignal?: AbortSignal;
}
Starting frame number. Must be non-negative.
Ending frame number (inclusive). Must be >= startFrame.
Optional abort signal for canceling the render session.
HeliosTimeline
Defines a multi-track timeline structure for compositions.
interface HeliosTimeline {
tracks: HeliosTrack[];
}
Array of timeline tracks.
HeliosTrack
Represents a single track in the timeline.
interface HeliosTrack {
id: string;
name?: string;
clips: HeliosClip[];
}
Optional human-readable track name.
Array of clips in this track.
HeliosClip
Represents a clip within a track.
interface HeliosClip {
id: string;
source: string;
start: number;
duration: number;
track?: number;
props?: Record<string, any>;
}
Source identifier or composition reference.
Start time in seconds within the timeline.
Clip duration in seconds.
Optional track number for layering.
Optional properties passed to the clip composition.
HeliosComposition
Extends HeliosConfig with timeline support for multi-layer compositions.
interface HeliosComposition<TInputProps = Record<string, any>>
extends HeliosConfig<TInputProps> {
timeline?: HeliosTimeline;
}
Optional timeline definition with tracks and clips.
StabilityCheck
Callback type for custom stability checks.
type StabilityCheck = () => Promise<void>;
helios.registerStabilityCheck() to block waitUntilStable() until external operations complete.
DiagnosticReport
Runtime capability detection report.
interface DiagnosticReport {
waapi: boolean;
webCodecs: boolean;
offscreenCanvas: boolean;
webgl: boolean;
webgl2: boolean;
webAudio: boolean;
colorGamut: 'srgb' | 'p3' | 'rec2020' | null;
videoCodecs: {
h264: boolean;
vp8: boolean;
vp9: boolean;
av1: boolean;
};
audioCodecs: {
aac: boolean;
opus: boolean;
};
videoDecoders: {
h264: boolean;
vp8: boolean;
vp9: boolean;
av1: boolean;
};
audioDecoders: {
aac: boolean;
opus: boolean;
};
userAgent: string;
}
Helios.diagnose(). All codec support fields are boolean values indicating availability.
Web Animations API support (document.timeline).
colorGamut
'srgb' | 'p3' | 'rec2020' | null
Highest supported color gamut.
Video encoding support for h264, vp8, vp9, and av1.
Audio encoding support for aac and opus.
Video decoding support for h264, vp8, vp9, and av1.
Audio decoding support for aac and opus.
Browser or runtime user agent string.
Usage examples
Render session
import { Helios, RenderSession } from '@helios/core';
const helios = new Helios({
duration: 10,
fps: 30
});
const session = new RenderSession(helios, {
startFrame: 0,
endFrame: 299, // 10 seconds at 30fps
abortSignal: AbortSignal.timeout(60000) // 1 minute timeout
});
// Render each frame
for await (const frame of session) {
console.log(`Rendering frame ${frame}`);
// Capture canvas, encode video, etc.
}
Timeline composition
import { HeliosComposition } from '@helios/core';
const composition: HeliosComposition = {
duration: 30,
fps: 30,
timeline: {
tracks: [
{
id: 'main',
name: 'Main Timeline',
clips: [
{
id: 'intro',
source: 'intro-composition',
start: 0,
duration: 5,
props: { theme: 'dark' }
},
{
id: 'main',
source: 'main-composition',
start: 5,
duration: 20
},
{
id: 'outro',
source: 'outro-composition',
start: 25,
duration: 5
}
]
}
]
}
};
Diagnostic check
import { Helios } from '@helios/core';
const report = await Helios.diagnose();
console.log('WebCodecs:', report.webCodecs);
console.log('H264 encoding:', report.videoCodecs.h264);
console.log('Color gamut:', report.colorGamut);
if (!report.webCodecs) {
console.warn('WebCodecs not supported, rendering may be slower');
}