fix(videosphere): update tracks with 2:1 aspect; remove Panoramic pre…

…sense selection
arenaxr · Aug 10, 2022 · d28c912 · d28c912
1 parent 662a7f0
commit d28c912
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -86,7 +86,6 @@ <h3><img alt="CONIX Logo" class="title-logo" src="static/images/xr-logo-v7.png"/
                             <select aria-label="Presence" class="form-select mb-3" id="presenceSelect">
                                 <option value="Standard">Standard</option>
                                 <option value="Portal">Portal</option>
-                                <option value="Panoramic">Panoramic</option>
                             </select>
                             <label for="presenceSelect">Select Presence Type</label>
                         </div>

diff --git a/src/arena.js b/src/arena.js
@@ -765,9 +765,8 @@ export class Arena {
                 this.Jitsi = ARENAJitsi.init(this.jitsiHost);
             } else if (!this.noav && allowJitsi) {
                 window.setupAV(() => {
-                    const pano = document.getElementById('presenceSelect').value == 'Panoramic';
                     // Initialize Jitsi videoconferencing after A/V setup window
-                    this.Jitsi = ARENAJitsi.init(this.jitsiHost, pano);
+                    this.Jitsi = ARENAJitsi.init(this.jitsiHost);
                 });
             }
 

diff --git a/src/components/arena-user.js b/src/components/arena-user.js
@@ -282,26 +282,6 @@ AFRAME.registerComponent('arena-user', {
         this.headModel.setAttribute('visible', false);
     },
 
-    drawVideoPano() {
-        const el = this.el;
-
-        // attach video to head
-        const videoCube = document.createElement('a-videosphere');
-        videoCube.setAttribute('id', this.videoID + 'cube');
-        videoCube.setAttribute('material', 'shader', 'flat');
-        videoCube.setAttribute('material', 'side', 'back');
-        videoCube.setAttribute('src', `#${this.videoID}`); // video only! (no audio)
-        videoCube.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
-        videoCube.setAttribute('material-extras', 'needsUpdate', 'true');
-        videoCube.setAttribute('position', '0 0 0');
-        videoCube.setAttribute('radius', '100');
-
-        el.appendChild(videoCube);
-        this.videoCube = videoCube;
-
-        this.headModel.setAttribute('visible', false);
-    },
-
     removeVideoCube() {
         const el = this.el;
         const data = this.data;
@@ -332,11 +312,7 @@ AFRAME.registerComponent('arena-user', {
             const jistiVideo = document.getElementById(this.videoID);
             if (jistiVideo) {
                 if (!this.videoCube) {
-                    if (data.presence === 'Panoramic') {
-                        this.drawVideoPano();
-                    } else {
-                        this.drawVideoCube();
-                    }
+                    this.drawVideoCube();
                 }
             }
         } else {
@@ -431,7 +407,7 @@ AFRAME.registerComponent('arena-user', {
             const users = document.querySelectorAll('[arena-user]');
             users.forEach((user) => {
                 const data = user.components['arena-user'].data;
-                if (data.pano || data.presence === 'Panoramic') {
+                if (data.pano) {
                     panoIds.push(data.jitsiId);
                 }
                 if (data.resolutionStep > 0 && data.resolutionStep < 180) {
@@ -550,7 +526,7 @@ AFRAME.registerComponent('arena-user', {
                     inFieldOfView = arenaCameraComponent.viewIntersectsObject3D(this.videoCube.object3D);
                 }
             }
-            if (this.data.pano || this.data.presence === 'Panoramic') {
+            if (this.data.pano) {
                 this.evaluateRemoteResolution(1920);
             } else if (inFieldOfView == false) {
                 this.muteVideo();

diff --git a/src/components/jitsi-video.js b/src/components/jitsi-video.js
@@ -74,22 +74,23 @@ AFRAME.registerComponent('jitsi-video', {
         }
     },
     setVideoSrc: function() {
-        if (this.el.tagName.toLowerCase() === 'a-videosphere'){
+        const pano = this.el.tagName.toLowerCase() === 'a-videosphere';
+        if (pano) {
             this.el.setAttribute('src', `#${this.videoID}`); // video only! (no audio)
-            // ensure panoramic videospheres have max resolution
+            // ensure panoramic videospheres have max download resolution
             const users = document.querySelectorAll('[arena-user]');
             users.forEach((user) => {
                 const data = user.components['arena-user'].data;
                 if (data.jitsiId === this.data.jitsiId) {
-                    data.pano = true;
+                    data.pano = pano;
                 }
             });
         } else {
             this.el.setAttribute('material', 'src', `#${this.videoID}`); // video only! (no audio)
+            this.el.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
+            this.el.setAttribute('material-extras', 'needsUpdate', 'true');
         }
         this.el.setAttribute('material', 'shader', 'flat');
-        this.el.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
-        this.el.setAttribute('material-extras', 'needsUpdate', 'true');
     },
     updateVideo: function() {
         const data = this.data;
@@ -102,6 +103,12 @@ AFRAME.registerComponent('jitsi-video', {
         }
 
         if (ARENA.Jitsi.getJitsiId() === data.jitsiId) {
+            const pano = this.el.tagName.toLowerCase() === 'a-videosphere';
+            if (pano) {
+                // ensure panoramic videosphere local has max upload resolution, update local tracks
+                ARENA.Jitsi.pano = pano;
+                ARENA.Jitsi.avConnect();
+            }
             this.videoID = 'cornerVideo';
         } else {
             this.videoID = `video${data.jitsiId}`;

diff --git a/src/jitsi.js b/src/jitsi.js
@@ -619,7 +619,7 @@ export class ARENAJitsi {
      * This function is called when we disconnect.
      */
     disconnect() {
-        console.warning('Conference server disconnected!');
+        console.warn('Conference server disconnected!');
         this.connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, this.onConnectionSuccess);
         this.connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, this.onConnectionFailed);
         this.connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, this.disconnect);