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;
        pixelInspection?: { minScale: number };
        detectionFrames?: readonly DetectionFrame[];
        detectionSource?: DetectionFrameSource;
        detectionBuffer?: DetectionBufferOptions;
        detectionTimelineOrigin?: DetectionTimelineOrigin;
        depth?: MediaRendererDepthInput;
        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;
        annotationAntialiasing?: AnnotationAntialiasing;
        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;
        orientedBoxStyle?: OrientedBoxStyle | null;
        percentageBarStyle?: PercentageBarStyle | 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? pixelInspection? detectionFrames? detectionSource? detectionBuffer? detectionTimelineOrigin? depth? interaction? renderPreparation? diagnostics? editingEngine? maskBrush? createMaskBrush? previewOverlay? onFrame? onSource? onState? backgroundColor? annotationOverlayStyle? annotationAntialiasing? renderers? boxStyle? boxCornerStyle? focusStyle? interactionStyle? labelStyle? maskHaloStyle? maskStyle? markerStyle? orientedBoxStyle? percentageBarStyle? 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.

    pixelInspection?: { minScale: number }

    Show distinct source pixels when the media-to-screen scale reaches minScale CSS pixels per natural media pixel (including contain/cover fit). Below that positive, finite threshold, media is smoothly sampled. Omit to retain smooth sampling at every zoom. Annotation styles and the source pixels returned by captureFrame are unaffected.

    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.

    depth?: MediaRendererDepthInput

    Depth drawn by depth annotation renderers, separate from detection frames. A map whose aspect ratio differs from the media's puts the renderer in its error state. A manifest loads once the media's first frame is up; one that fails leaves the media playing without depth.

    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
    annotationAntialiasing?: AnnotationAntialiasing

    Smooth annotation edges independently of video and canvas resolution. Applies to fills, borders, focus and interaction overlays. Media region effects smooth their coverage while preserving the sampled video. true enables FXAA at output density; 2 captures at twice that density. Label backgrounds are smoothed while text stays sharp. Separated label runs share captures; overlaps split captures to preserve blending and draw order. Defaults to false. The 2× capture preserves more mask detail, up to the original resolution, increasing preparation work, cache bytes and GPU memory.

    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
    orientedBoxStyle?: OrientedBoxStyle | null
    percentageBarStyle?: PercentageBarStyle | null
    polygonStyle?: PolygonStyle | null
    polylineStyle?: PolylineStyle | null
    ellipseStyle?: EllipseStyle | null
    keypointStyle?: KeypointStyle | null
    visibility?: AnnotationVisibility

    Settings
    Member Visibility

    On This Page
    Properties