Skip to main content

TypeScript Types Reference

warning

Very experimental feature - expect bugs and breaking changes at any time. Track progress on GitHub and discuss in the #web-renderer channel on Discord.

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

WebRendererContainer​

tsx
import type {WebRendererContainer} from '@remotion/web-renderer';
                      
(alias) type WebRendererContainer = "mp4" | "webm"
import WebRendererContainer

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

WebRendererVideoCodec​

tsx
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​

tsx
import type {WebRendererAudioCodec} from '@remotion/web-renderer';
                      
(alias) type WebRendererAudioCodec = "aac" | "opus"
import WebRendererAudioCodec

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

WebRendererQuality​

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

WebRendererOutputTarget​

tsx
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

FrameRange​

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

RenderStillOnWebImageFormat​

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

RenderMediaOnWebProgress​

tsx
import type {RenderMediaOnWebProgress} from '@remotion/web-renderer';
                        
(alias) type RenderMediaOnWebProgress = {
    renderedFrames: number;
    encodedFrames: number;
}
import RenderMediaOnWebProgress
  • renderedFrames: The number of frames that have been rendered
  • encodedFrames: The number of frames that have been encoded

RenderMediaOnWebProgressCallback​

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

RenderMediaOnWebResult​

tsx
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​

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

RenderStillOnWebOptions​

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

CanRenderMediaOnWebOptions​

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

CanRenderMediaOnWebResult​

tsx
import type {CanRenderMediaOnWebResult} from '@remotion/web-renderer';
                        
(alias) type CanRenderMediaOnWebResult = {
    canRender: boolean;
    issues: CanRenderIssue[];
    resolvedVideoCodec: WebRendererVideoCodec;
    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​

tsx
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​

tsx
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​

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

OnFrameCallback​

tsx
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​

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

GetEncodableAudioCodecsOptions​

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