Add HTMLVideoElement support for panorama video source (#1443)

mistic100 · Sep 25, 2024 · d5193ae · d5193ae
1 parent eb47efb
commit d5193ae
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/docs/guide/adapters/equirectangular-video.md b/docs/guide/adapters/equirectangular-video.md
@@ -69,11 +69,11 @@ When using this adapter, the `panorama` option and the `setPanorama()` method ac
 
 #### `source` (required)
 
--   type: `string | MediaStream`
+-   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.
+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.
 
 ```js
 const stream = await navigator.mediaDevices.getUserMedia({ video: true });

diff --git a/packages/shared/AbstractVideoAdapter.ts b/packages/shared/AbstractVideoAdapter.ts
@@ -4,7 +4,7 @@ import { BufferGeometry, Material, Mesh, VideoTexture } from 'three';
 import { createVideo } from './video-utils';
 
 export type AbstractVideoPanorama = {
-    source: string | MediaStream;
+    source: string | MediaStream | HTMLVideoElement;
 };
 
 export type AbstractVideoAdapterConfig = {
@@ -69,7 +69,7 @@ export abstract class AbstractVideoAdapter<
             return Promise.reject(new PSVError('Video adapters require VideoPlugin to be loaded too.'));
         }
 
-        const video = createVideo({
+        const video = panorama.source instanceof HTMLVideoElement ? panorama.source : createVideo({
             src: panorama.source,
             withCredentials: this.viewer.config.withCredentials,
             muted: this.config.muted,