The equirectangular video adapter loads video files in equirectangular format and maps them onto the sphere in real time.
Installation
npm install @photo-sphere-viewer/equirectangular-video-adapter
Usage
import { EquirectangularVideoAdapter } from '@photo-sphere-viewer/equirectangular-video-adapter';
import { VideoPlugin } from '@photo-sphere-viewer/video-plugin';
const viewer = new Viewer({
adapter: EquirectangularVideoAdapter,
panorama: {
source: 'path/video.mp4',
},
plugins: [VideoPlugin],
});
Adapter configuration
Automatically starts the video when the panorama is loaded.
Mutes the video by default.
Panorama options
The panorama option and the setPanorama() method accept an object with the following fields.
source
string | MediaStream | HTMLVideoElement
required
The video source. Can be:
- A URL string pointing to the video file. The video must not exceed 4096 pixels in either dimension.
- A
MediaStream — for example, the feed from a USB 360° camera.
- An
HTMLVideoElement — when you need full control over video playback externally.
// File URL
panorama: { source: 'path/video.mp4' }
// Live camera stream
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const viewer = new Viewer({
container: 'photosphere',
adapter: EquirectangularVideoAdapter.withConfig({
autoplay: true,
muted: true,
}),
panorama: { source: stream },
});
Cropping data for videos that do not cover the full sphere. Follows the same structure as the equirectangular adapter’s panoData.panorama: {
source: 'path/video.mp4',
data: {
fullWidth: 6000,
// fullHeight is optional, always fullWidth / 2
croppedX: 1000,
croppedY: 500,
},
}
