Skip to content

Component API

DashPlayer Class

The DashPlayer class is a rewrite of the original 8i Web Player that provides volumetric video playback capabilities using DASH streaming and WebGL rendering.

Constructor

constructor(
  renderer: WebGLRenderer,
  options: DashPlayerOptions
)

Parameters:

  • renderer: THREE.js WebGL renderer instance
  • options: Configuration options for the player

Configuration Options

The DashPlayerOptions interface allows customization of player behavior:

interface DashPlayerOptions {
  // Playback settings
  abr?: boolean;                    // Enable adaptive bitrate (default: true)
  loop?: boolean;                   // Loop playback (default: true)
  autoplay?: boolean;               // Auto-start playback (default: true)
  muted?: boolean;                  // Start muted (default: true)
  targetFPS?: number;               // Target frame rate (-1 for auto)

  // Video element
  video?: HTMLVideoElement | null;  // Custom video element

  // Rendering settings
  maximumTextureSize: number;       // Max texture size for WebGL
  enableDirectionalLight?: boolean; // Enable lighting (default: !isMobile)
  opacity?: number;                 // Initial opacity
  contrast?: number;                // Initial contrast

  // DRM
  licenseServerURL?: string;        // License server for DRM content

  // DRACO decoder configuration
  dracoDecoderPath?: string;        // The absolute URL to the DRACO libraries
  dracoDecoderType?: string;        // "wasm" (default) or "js"
}

Public Methods

Initialization & Setup

initialize(): Promise<void> - Initializes the player and sets up all necessary components - Must be called before loading manifests

loadManifest(src: string): Promise<void> - Loads and parses a DASH manifest from the provided URL - Triggers manifest loading and loaded events - Automatically initializes the player if not already initialized

reset(): Promise<void> - Resets the player state and clears current content - Useful for loading new manifests

Playback Control

play(): Promise<void> - Starts or resumes playback - Returns a promise that resolves when playback starts

pause(): Promise<void> - Pauses playback - Returns a promise that resolves when playback is paused

seek(time: number): Promise<void> - Seeks to the specified time in seconds - Returns a promise that resolves when seeking is complete

setTargetFPS(fps: number): Promise<void> - Sets the target frame rate for playback - Affects quality selection and playback timing

Audio Control

setVolume(value: number): void - Sets the audio volume (0.0 to 1.0)

setIsMuted(value: boolean): void - Mutes or unmutes the audio

State Queries

isMuted(): boolean - Returns whether the audio is currently muted

isPaused(): boolean - Returns whether playback is currently paused

getCurrentTime(): number - Returns the current playback time in seconds

getDuration(): number - Returns the total duration of the content in seconds

getCurrentFrame(): number - Returns the current frame number based on time and FPS

getVideo(): HTMLVideoElement - Returns the underlying video element

getMeshSourceBuffer(): MeshSourceBuffer - Returns the mesh source buffer instance

Frame Capture & Export

saveFrame(): Promise<void> - Saves the current frame as a 3D model - Automatically chooses format based on platform (USDZ for iOS, GLTF for others)

saveFrameAsGLTF(): Promise<{blob: Blob, filename: string}> - Saves the current frame as a GLTF file - Returns blob and filename

saveFrameAsUSDZ(): Promise<{blob: Blob, filename: string}> - Saves the current frame as a USDZ file (iOS AR compatible) - Returns blob and filename

saveFrameAsScreenshot(): Promise<{blob: Blob, filename: string}> - Saves the current frame as a screenshot image - Returns blob and filename

getFrameAsScreenshot(): Promise<Blob> - Returns the current frame as a screenshot blob - Does not trigger download

Visual Effects

setOpacity(value: number): void - Sets the opacity of the rendered content (0.0 to 1.0)

setContrast(value: number): void - Sets the contrast of the rendered content

Rendering Control

startRenderLoop(): void - Starts the render loop using requestAnimationFrame - Continuously updates the video and mesh

attachVideoFrameCallback(): void - Alternative render loop using requestVideoFrameCallback API - More efficient but not supported on all browsers

update(): void - Updates the video and mesh for the current frame - Called automatically by render loops

Cleanup

destroy(): void - Destroys the player instance and cleans up resources - Removes event listeners and disposes of THREE.js objects

Events

The DashPlayer extends EventTarget and dispatches the following custom events:

Player Events

  • initialized - Fired when player is fully initialized
  • manifest-loading - Fired when manifest loading starts
  • manifest-loaded - Fired when manifest is successfully loaded
  • error - Fired when an error occurs
  • destroy - Fired when player is destroyed

Quality Events

  • quality-change - Fired when video quality changes
  • framerate-change - Fired when frame rate changes