Skip to main content

TypeScript Types Reference

The following types are part of the API of @remotion/web-renderer:

WebRendererContainer​

import type {WebRendererContainer} from '@remotion/web-renderer';
                      
(alias) type WebRendererContainer = "mp4" | "webm" | "mkv" | "mov" | "wav" | "mp3" | "aac" | "ogg" | "flac"
import WebRendererContainer

More values may be added in the future, this would not be considered a breaking change.

WebRendererVideoCodec​

import type {WebRendererVideoCodec} from '@remotion/web-renderer';
                      
(alias) type WebRendererVideoCodec = "h264" | "h265" | "vp8" | "vp9" | "av1"
import WebRendererVideoCodec

More values may be added in the future, this would not be considered a breaking change.

WebRendererAudioCodec​

import type {WebRendererAudioCodec} from '@remotion/web-renderer';
                      
(alias) type WebRendererAudioCodec = "aac" | "opus" | "mp3" | "vorbis" | "pcm-s16" | "flac"
import WebRendererAudioCodec

More values may be added in the future, this would not be considered a breaking change.

WebRendererQuality​

import type {WebRendererQuality} from '@remotion/web-renderer';
                     
(alias) type WebRendererQuality = "very-low" | "low" | "medium" | "high" | "very-high"
import WebRendererQuality

WebRendererOutputTarget​

import type {WebRendererOutputTarget} from '@remotion/web-renderer';
                       
(alias) type WebRendererOutputTarget = "arraybuffer" | "web-fs"
import WebRendererOutputTarget
  • 'arraybuffer': Returns the output as a Blob in memory
  • 'web-fs': Uses the File System Access API to write to a file

WebRendererPageResponsivenessv4.0.487​

import type {WebRendererPageResponsiveness} from '@remotion/web-renderer';
                          
(alias) type WebRendererPageResponsiveness = number | "disabled" | "low" | "medium" | "high"
import WebRendererPageResponsiveness

Controls intentional pauses while using renderMediaOnWeb(). See Page responsiveness for guidance. The default is "medium".

FrameRange​

import type {FrameRange} from '@remotion/web-renderer';
                 
(alias) type FrameRange = number | [number, number] | [number, null]
import FrameRange
  • A single number renders only that frame
  • A tuple [start, end] renders frames from start to end (inclusive)
  • A tuple [start, null] renders frames from start to the end of the compositionv4.0.421

RenderStillOnWebImageFormat​

Used when encoding a still to a Blob or object URL via renderStillOnWeb().

import type {RenderStillOnWebImageFormat} from '@remotion/web-renderer';
                         
(alias) type RenderStillOnWebImageFormat = "png" | "jpeg" | "webp"
import RenderStillOnWebImageFormat

RenderStillOnWebEncodeOptions​

import type {RenderStillOnWebEncodeOptions} from '@remotion/web-renderer';
                          
(alias) type RenderStillOnWebEncodeOptions = {
    format?: RenderStillOnWebImageFormat;
    quality?: number;
}
import RenderStillOnWebEncodeOptions

RenderStillOnWebResult​

import type {RenderStillOnWebResult} from '@remotion/web-renderer';
                       
(alias) type RenderStillOnWebResult = {
    internalState: InternalState;
    canvas(): Promise<OffscreenCanvas>;
    blob(options?: RenderStillOnWebEncodeOptions): Promise<Blob>;
    url(options?: RenderStillOnWebEncodeOptions): Promise<string>;
}
import RenderStillOnWebResult

RenderMediaOnWebProgress​

import type {RenderMediaOnWebProgress} from '@remotion/web-renderer';
                        
(alias) type RenderMediaOnWebProgress = {
    renderedFrames: number;
    encodedFrames: number;
    doneIn: number | null;
    renderEstimatedTime: number;
    progress: number;
}
import RenderMediaOnWebProgress

renderedFrames​

Deprecated

Kept for backward compatibility. Prefer progress for overall status updates.

The number of frames that have been rendered.

encodedFrames​

The number of frames that have been encoded.

doneIn​

The total time in milliseconds from render start until all frames were encoded, or null while encoding is still in progress.

renderEstimatedTime​

Estimated time remaining in milliseconds until rendering is done.

progress​

Overall progress as a number between 0 and 1.

RenderMediaOnWebProgressCallback​

import type {RenderMediaOnWebProgressCallback} from '@remotion/web-renderer';
                            
(alias) type RenderMediaOnWebProgressCallback = (progress: RenderMediaOnWebProgress) => void
import RenderMediaOnWebProgressCallback

RenderMediaOnWebResult​

import type {RenderMediaOnWebResult} from '@remotion/web-renderer';
                       
(alias) type RenderMediaOnWebResult = {
    getBlob: () => Promise<Blob>;
    internalState: InternalState;
}
import RenderMediaOnWebResult
  • getBlob(): Returns a Promise<Blob> containing the rendered video
  • internalState: Internal state object (not for public use)

RenderMediaOnWebOptions​

import type {RenderMediaOnWebOptions} from '@remotion/web-renderer';
                       
(alias) type RenderMediaOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>
import RenderMediaOnWebOptions

RenderStillOnWebOptions​

import type {RenderStillOnWebOptions} from '@remotion/web-renderer';
                       
(alias) type RenderStillOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = {
    frame: number;
} & {
    composition: CompositionCalculateMetadataOrExplicit<Schema, Props>;
} & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>
import RenderStillOnWebOptions

CanRenderMediaOnWebOptions​

import type {CanRenderMediaOnWebOptions} from '@remotion/web-renderer';
                         
(alias) type CanRenderMediaOnWebOptions = {
    container?: WebRendererContainer;
    videoCodec?: WebRendererVideoCodec | null;
    audioCodec?: WebRendererAudioCodec | null;
    width: number;
    height: number;
    scale?: number;
    transparent?: boolean;
    muted?: boolean;
    videoBitrate?: number | WebRendererQuality;
    audioBitrate?: number | WebRendererQuality;
    outputTarget?: WebRendererOutputTarget | null;
}
import CanRenderMediaOnWebOptions

CanRenderMediaOnWebResult​

import type {CanRenderMediaOnWebResult} from '@remotion/web-renderer';
                        
(alias) type CanRenderMediaOnWebResult = {
    canRender: boolean;
    issues: CanRenderIssue[];
    resolvedVideoCodec: WebRendererVideoCodec | null;
    resolvedAudioCodec: WebRendererAudioCodec | null;
    resolvedOutputTarget: WebRendererOutputTarget;
}
import CanRenderMediaOnWebResult
  • canRender: Whether the render can be performed
  • issues: An array of CanRenderIssue objects
  • videoCodec: The resolved video codec
  • audioCodec: The resolved audio codec
  • outputTarget: The resolved output target

CanRenderIssue​

import type {CanRenderIssue} from '@remotion/web-renderer';
                   
(alias) type CanRenderIssue = {
    type: CanRenderIssueType;
    message: string;
    severity: "error" | "warning";
}
import CanRenderIssue
  • type: The type of issue (e.g., 'video-codec-unsupported', 'webcodecs-unavailable')
  • message: A human-readable description of the issue
  • severity: Either 'error' or 'warning'

EmittedArtifact​

import type {EmittedArtifact} from '@remotion/web-renderer';
                   
(alias) type EmittedArtifact = {
    filename: string;
    content: string | Uint8Array;
    frame: number;
    downloadBehavior: DownloadBehavior | null;
}
import EmittedArtifact
  • filename: The name of the artifact file
  • content: The content of the artifact as a string or Uint8Array
  • frame: The frame number at which the artifact was emitted
  • downloadBehavior: How the artifact should be handled for download

WebRendererOnArtifact​

import type {WebRendererOnArtifact} from '@remotion/web-renderer';
                      
(alias) type WebRendererOnArtifact = (asset: EmittedArtifact) => void
import WebRendererOnArtifact

OnFrameCallback​

import type {OnFrameCallback} from '@remotion/web-renderer';
                   
(alias) type OnFrameCallback = (frame: VideoFrame) => VideoFrame | Promise<VideoFrame>
import OnFrameCallback

A callback that receives each rendered VideoFrame and can transform it before encoding.

GetEncodableVideoCodecsOptions​

import type {GetEncodableVideoCodecsOptions} from '@remotion/web-renderer';
                           
(alias) type GetEncodableVideoCodecsOptions = {
    videoBitrate?: number | WebRendererQuality;
}
import GetEncodableVideoCodecsOptions

GetEncodableAudioCodecsOptions​

import type {GetEncodableAudioCodecsOptions} from '@remotion/web-renderer';
                           
(alias) type GetEncodableAudioCodecsOptions = {
    audioBitrate?: number | WebRendererQuality;
}
import GetEncodableAudioCodecsOptions