supervision-js
    Preparing search index...

    Interface MediaRendererOptions

    Lower-level renderer options.

    Most applications should prefer createMediaSession, which wires media preparation, detection buffering, and render preparation with defaults.

    interface MediaRendererOptions {
        container: HTMLElement;
        src?: string | URL | Request;
        source?: MediaRendererSource;
        autoPlay?: boolean;
        loop?: boolean;
        playbackRate?: number;
        muted?: boolean;
        fit?: MediaRendererFit;
        maxDevicePixelRatio?: number;
        detectionFrames?: readonly DetectionFrame[];
        detectionSource?: DetectionFrameSource;
        detectionBuffer?: DetectionBufferOptions;
        detectionTimelineOrigin?: DetectionTimelineOrigin;
        interaction?: MediaInteractionOptions;
        renderPreparation?: RenderPreparationOptions;
        diagnostics?: MediaRendererDiagnosticsOptions;
        editingEngine?: AnnotationEditingEngine;
        maskBrush?: MaskBrushPreviewOptions;
        createMaskBrush?: (
            dimensions: { width: number; height: number },
        ) => MaskBrushPreviewOptions;
        previewOverlay?: () => PreviewOverlayData | null;
        onFrame?: (diagnostics: MediaFrameDiagnostics) => void;
        onSource?: (state: MediaSourceState) => void;
        onState?: (state: MediaRendererState) => void;
        backgroundColor?: number;
        annotationOverlayStyle?: AnnotationOverlayStyle | null;
        renderers?: readonly AnnotationRenderer[];
        boxStyle?: BoxStyle | null;
        boxCornerStyle?: BoxCornerStyle | null;
        focusStyle?: FocusStyle | null;
        interactionStyle?: InteractionStyle | null;
        labelStyle?: LabelStyle | null;
        maskHaloStyle?: MaskHaloStyle | null;
        maskStyle?: MaskStyle | null;
        markerStyle?: MarkerStyle | null;
        polygonStyle?: PolygonStyle | null;
        polylineStyle?: PolylineStyle | null;
        ellipseStyle?: EllipseStyle | null;
        keypointStyle?: KeypointStyle | null;
        visibility?: AnnotationVisibility;
    }

    Hierarchy (View Summary)

    Index
    container src? source? autoPlay? loop? playbackRate? muted? fit? maxDevicePixelRatio? detectionFrames? detectionSource? detectionBuffer? detectionTimelineOrigin? interaction? renderPreparation? diagnostics? editingEngine? maskBrush? createMaskBrush? previewOverlay? onFrame? onSource? onState? backgroundColor? annotationOverlayStyle? renderers? boxStyle? boxCornerStyle? focusStyle? interactionStyle? labelStyle? maskHaloStyle? maskStyle? markerStyle? polygonStyle? polylineStyle? ellipseStyle? keypointStyle? visibility?
    container: HTMLElement
    src?: string | URL | Request
    source?: MediaRendererSource
    autoPlay?: boolean
    loop?: boolean
    playbackRate?: number
    muted?: boolean

    Nothing reads this. The renderer is video-only and audio playback is deferred, so setting it changes nothing either way.

    fit?: MediaRendererFit
    maxDevicePixelRatio?: number

    Caps Pixi's render resolution relative to device pixels.

    Lower values reduce GPU memory and fill-rate pressure. For example, capping a Retina display from DPR 2 to 1 renders one quarter as many pixels, which can be useful for long videos or browsers under load.

    detectionFrames?: readonly DetectionFrame[]
    detectionSource?: DetectionFrameSource
    detectionBuffer?: DetectionBufferOptions
    detectionTimelineOrigin?: DetectionTimelineOrigin

    Aligns detection timestamps with media whose first presentation timestamp is not zero. Defaults to MediaTimeline for backward compatibility.

    interaction?: MediaInteractionOptions
    renderPreparation?: RenderPreparationOptions
    diagnostics?: MediaRendererDiagnosticsOptions
    editingEngine?: AnnotationEditingEngine
    maskBrush?: MaskBrushPreviewOptions
    createMaskBrush?: (
        dimensions: { width: number; height: number },
    ) => MaskBrushPreviewOptions

    Creates a media-sized brush preview after the source metadata is known.

    previewOverlay?: () => PreviewOverlayData | null
    onFrame?: (diagnostics: MediaFrameDiagnostics) => void
    onSource?: (state: MediaSourceState) => void
    onState?: (state: MediaRendererState) => void
    backgroundColor?: number

    Renderer canvas color shown around media that is letterboxed or not yet presented. Hosts can update this with their color theme without recreating the media session.

    annotationOverlayStyle?: AnnotationOverlayStyle | null
    renderers?: readonly AnnotationRenderer[]

    Built-in renderers that contribute semantic annotations to the renderer-owned scene. When present, this list selects the enabled built-in layers. Style-backed descriptors resolve into their established presentation fields, while direct descriptors such as region retain their semantic configuration for the backend. Existing style fields remain supported for compatibility and source-specific presentation overrides.

    boxStyle?: BoxStyle | null
    boxCornerStyle?: BoxCornerStyle | null
    focusStyle?: FocusStyle | null
    interactionStyle?: InteractionStyle | null
    labelStyle?: LabelStyle | null
    maskHaloStyle?: MaskHaloStyle | null
    maskStyle?: MaskStyle | null
    markerStyle?: MarkerStyle | null
    polygonStyle?: PolygonStyle | null
    polylineStyle?: PolylineStyle | null
    ellipseStyle?: EllipseStyle | null
    keypointStyle?: KeypointStyle | null
    visibility?: AnnotationVisibility

    Settings
    Member Visibility

    On This Page
    Properties