feat(jitsi-video): support rendering local video; detect panoramic re…

…solution
arenaxr · Aug 3, 2022 · e853b15 · e853b15
1 parent c41e68d
commit e853b15
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/src/components/arena-user.js b/src/components/arena-user.js
@@ -102,6 +102,7 @@ AFRAME.registerComponent('arena-user', {
         hasVideo: {type: 'boolean', default: false},
         jitsiQuality: {type: 'number', default: 100.0},
         resolutionStep: {type: 'number', default: 180},
+        pano: {type: 'boolean', default: false},
     },
 
     init: function() {
@@ -430,7 +431,7 @@ AFRAME.registerComponent('arena-user', {
             const users = document.querySelectorAll('[arena-user]');
             users.forEach((user) => {
                 const data = user.components['arena-user'].data;
-                if (data.presence === 'Panoramic') {
+                if (data.pano || data.presence === 'Panoramic') {
                     panoIds.push(data.jitsiId);
                 }
                 if (data.resolutionStep > 0 && data.resolutionStep < 180) {
@@ -549,7 +550,7 @@ AFRAME.registerComponent('arena-user', {
                     inFieldOfView = arenaCameraComponent.viewIntersectsObject3D(this.videoCube.object3D);
                 }
             }
-            if (this.data.presence === 'Panoramic') {
+            if (this.data.pano || this.data.presence === 'Panoramic') {
                 this.evaluateRemoteResolution(1920);
             } else if (inFieldOfView == false) {
                 this.muteVideo();

diff --git a/src/components/jitsi-video.js b/src/components/jitsi-video.js
@@ -45,6 +45,13 @@ AFRAME.registerComponent('jitsi-video', {
             return;
         }
         if (this.data.displayName === '') return;
+        // check local video first
+        if (ARENA.Jitsi && ARENA.getDisplayName() === this.data.displayName) {
+            this.data.jitsiId = ARENA.Jitsi.getJitsiId();
+            this.updateVideo();
+            return;
+        }
+        // check remote video
         args.pl.forEach((user) => {
             if (user.dn === this.data.displayName) {
                 this.data.jitsiId = user.jid;
@@ -69,6 +76,14 @@ AFRAME.registerComponent('jitsi-video', {
     setVideoSrc: function() {
         if (this.el.tagName.toLowerCase() === 'a-videosphere'){
             this.el.setAttribute('src', `#${this.videoID}`); // video only! (no audio)
+            // ensure panoramic videospheres have max 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;
+                }
+            });
         } else {
             this.el.setAttribute('material', 'src', `#${this.videoID}`); // video only! (no audio)
         }
@@ -85,11 +100,17 @@ AFRAME.registerComponent('jitsi-video', {
         if (!ARENA.Jitsi) {
             return;
         }
-        this.videoID = `video${data.jitsiId}`;
-        if (!ARENA.Jitsi.getVideoTrack(data.jitsiId)) {
-            this.retryWaitVideoLoad();
-            return;
+
+        if (ARENA.Jitsi.getJitsiId() === data.jitsiId) {
+            this.videoID = 'cornerVideo';
+        } else {
+            this.videoID = `video${data.jitsiId}`;
+            if (!ARENA.Jitsi.getVideoTrack(data.jitsiId)) {
+                this.retryWaitVideoLoad();
+                return;
+            }
         }
+
         const jitsiVideo = document.getElementById(this.videoID);
         if (!jitsiVideo) {
             // if object not created yet, try to wait