Equirectangular video

This adapter is available in the @photo-sphere-viewer/equirectangular-video-adapter package.

import { EquirectangularVideoAdapter } from '@photo-sphere-viewer/equirectangular-video-adapter';

const viewer = new Viewer({
    adapter: EquirectangularVideoAdapter,
    panorama: {
        source: 'path/video.mp4',
    },
    plugins: [VideoPlugin],
});

WARNING

This adapter requires to use the VideoPlugin.

Example

Configuration

autoplay

• type: boolean
• default: false

Automatically starts the video on load.

muted

• type: boolean
• default: false

Mute the video by default.

resolution

See the equirectangular adapter configuration.

Panorama options

When using this adapter, the panorama option and the setPanorama() method accept an object to configure the video.

source (required)

• type: string | MediaStream | HTMLVideoElement

Path of the video file. The video must not be larger than 4096 pixels or it won't be displayed on handled devices.

It can also be an existing MediaStream, for example to display the feed of an USB 360° camera, or a pre-existing HTMLVideoElement for more control over video playback.

const stream = await navigator.mediaDevices.getUserMedia({ video: true });

const viewer = new Viewer({
    container: 'photosphere',
    adapter: [EquirectangularVideoAdapter, {
        autoplay: true,
        muted: true,
    }],
    panorama: {
        source: stream,
    },
});

data

• type: object | function<Video, PanoData>

Can by used to define cropping information if the video does not cover a full sphere.

panorama: {
  source: 'path/video.mp4',
  data: {
    fullWidth: 6000,
    // "fullHeight" optional, always "fullWidth / 2"
    croppedX: 1000,
    croppedY: 500,
  },
}