Panorama video viewer (copied from viewer)

source/core/ui/view/video/FFMPEG360View.js

@@ -0,0 +1,32 @@
+import FFMPEGView from './FFMPEGView';
+import YUV360Canvas from './YUV360Canvas';
+
+class FFMPEG360View extends FFMPEGView {
+	constructor(properties) {
+		super(properties);
+		this.fisheyeFovDeg = properties?.props360?.fisheyeFovDeg ?? 204;
+		this.projection = properties?.props360?.projection ?? 'equirectangular';
+		this.canvas360.setProjection(this.projection);
+		this.canvas360.setFisheyeFov(this.fisheyeFovDeg);
+	}
+
+	get canvas360() {
+		return /** @type {YUV360Canvas} */ (this.yuvCanvas);
+	}
+
+	createCanvas(width, height, style){
+		return new YUV360Canvas({width: width, height: height, fisheyeFovDeg: this.fisheyeFovDeg, projection: this.projection, contextOptions: {preserveDrawingBuffer: true}});
+	}
+
+	setFisheyeFov(fullFovDeg) {
+		this.fisheyeFovDeg = fullFovDeg;
+		if (this.yuvCanvas) this.canvas360.setFisheyeFov(fullFovDeg);
+	}
+
+	setProjection(projection) {
+		this.projection = projection;
+		if (this.yuvCanvas) this.canvas360.setProjection(projection);
+	}
+}
+
+export default FFMPEG360View;

source/core/ui/view/video/VideoView.js

@@ -1,6 +1,7 @@
 import MjpegView from "./MjpegView";
 import WebCodecView from "./WebCodecView";
 import FFMPEGView from "./FFMPEGView";
+import FFMPEG360View from "/lib/osh-js/source/core/ui/view/video/FFMPEG360View";
 import View from "../View";
 import {isDefined} from "../../../utils/Utils";
 
@@ -29,6 +30,7 @@ class VideoView extends View {
      * @param {Boolean} [properties.directPlay=false] - Enable or ignore the framerate play
      * @param {Boolean} [properties.showTime=false] - Enable or ignore the show timestamp text onto the canvas
      * @param {Boolean} [properties.showStats=false] - Enable or ignore the display stats (FPS number) onto the canvas
+     * @param {Object} [properties.props360={}] - Enable interactive 360 display
      * @param {Number} [properties.width=1920] - Set the default canvas width
      * @param {Number} [properties.height=1080] - Set the default canvas height
      * @param {Number} [properties.useWebCodecApi=true] - Use experimental WebCodecApi
@@ -41,13 +43,22 @@ class VideoView extends View {
         this.videoView = undefined;
         this.canvasResolve = undefined;
         this.useWebCodecApi = true;
+        if('props360' in properties) {
+            this.props360 = properties['props360'];
+        }
         if('useWebCodecApi' in properties) {
             this.useWebCodecApi = properties['useWebCodecApi'];
         }
     }
 
     createVideoView(compression) {
-        if(compression === 'jpeg') {
+        if (this.props360 != null) {
+            this.videoView = new FFMPEG360View({
+                ...this.properties,
+                codec: compression,
+                layers: []
+            });
+        } else if(compression === 'jpeg') {
             // create MJPEG View
             this.videoView = new MjpegView({
                 ...this.properties,