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

    Hierarchy (View Summary)

    Index
    annotationOverlayStyle? autoPlay? backgroundColor? boxStyle? container createMaskBrush? detectionBuffer? detectionFrames? detectionSource? detectionTimelineOrigin? diagnostics? editingEngine? fit? focusStyle? interaction? interactionStyle? keypointStyle? labelStyle? loop? maskBrush? maskStyle? maxDevicePixelRatio? muted? onFrame? onSource? onState? playbackRate? polygonStyle? polylineStyle? previewOverlay? renderPreparation? source? src? visibility?
    annotationOverlayStyle?: AnnotationOverlayStyle | null
    autoPlay?: boolean
    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.

    boxStyle?: BoxStyle | null
    container: HTMLElement
    createMaskBrush?: (
        dimensions: { height: number; width: number },
    ) => MaskBrushPreviewOptions

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

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

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

    diagnostics?: MediaRendererDiagnosticsOptions
    editingEngine?: AnnotationEditingEngine
    fit?: MediaRendererFit
    focusStyle?: FocusStyle | null
    interaction?: MediaInteractionOptions
    interactionStyle?: InteractionStyle | null
    keypointStyle?: KeypointStyle | null
    labelStyle?: LabelStyle | null
    loop?: boolean
    maskBrush?: MaskBrushPreviewOptions
    maskStyle?: MaskStyle | null
    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.

    muted?: boolean

    No-op in the current video-only renderer. Audio playback is deferred.

    onFrame?: (diagnostics: MediaFrameDiagnostics) => void
    onSource?: (state: MediaSourceState) => void
    onState?: (state: MediaRendererState) => void
    playbackRate?: number
    polygonStyle?: PolygonStyle | null
    polylineStyle?: PolylineStyle | null
    previewOverlay?: () => PreviewOverlayData | null
    renderPreparation?: RenderPreparationOptions
    source?: MediaRendererSource
    src?: string | URL | Request
    visibility?: AnnotationVisibility

    Settings
    Member Visibility

    On This Page
    Properties