v1.7.0/video calling

app/src/Api.js

@@ -11,8 +11,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
 /*global chrome*/
 
-// const API_HOST = 'https://api.chromewatchparty.com';
-const API_HOST = 'http://localhost:5000/watch-party-crx/us-central1/widgets';
+const API_HOST = 'https://api.chromewatchparty.com';
+// const API_HOST = 'http://localhost:5000/watch-party-crx/us-central1/widgets';
 
 export const PLAYER_STATUS = {
   PLAYING: 'PLAYING',

app/src/CallManager.js

@@ -27,13 +27,14 @@ export default class CallManager {
     this.__sessionInitialized = false;
     this.__admin = false;
     this.__adminOnly = true;
+    this.__useVideo = false;
   }
   toggleCall(onCall, conference, admin, adminOnly, useVideo) {
-    console.log('USE VIDEO', useVideo);
     try {
       this.listener({ callActionPending: true });
       this.__admin = admin;
       this.__adminOnly = adminOnly;
+      this.__useVideo = useVideo;
       if (onCall === true) this.leaveCall();
       else this.boot(conference, useVideo);
     } catch (e) {
@@ -46,8 +47,15 @@ export default class CallManager {
     this.listener({ muted: !muted, callActionPending: false });
   }
   toggleVideo(useVideo) {
-    console.log(useVideo);
-    this.listener({ usingVideo: useVideo });
+    if (useVideo === true) {
+      VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant).then(() => {
+        this.listener({ usingVideo: useVideo });
+      });
+    } else {
+      VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant).then(() => {
+        this.listener({ usingVideo: useVideo });
+      });
+    }
   }
   async boot(conference, useVideo) {
     await this.initialize();
@@ -93,6 +101,7 @@ export default class CallManager {
                   onCall: false,
                   muted: false,
                   callActionPending: false,
+                  usingVideo: false,
                 });
                 console.error('Update Voxeet API Error', err);
                 return false;
@@ -105,6 +114,7 @@ export default class CallManager {
               onCall: false,
               muted: false,
               callActionPending: false,
+              usingVideo: false,
             });
             console.error('Failed to update party Voxeet');
           }
@@ -123,11 +133,15 @@ export default class CallManager {
           onCall: false,
           muted: false,
           callActionPending: false,
+          usingVideo: false,
         });
         this.notify('Unable to join call. Try again in a moment.');
         console.error('Error joining call', e);
-        return true;
+        return false;
       });
+    if (joined === true) {
+      this.listener({ usingVideo: useVideo });
+    }
     // Leave changes as comment for later
     // if (!joined) {
     //   this.startCall(useVideo);
@@ -136,7 +150,19 @@ export default class CallManager {
   async leaveCall() {
     VoxeetSDK.conference.leave().then(() => {
       VoxeetSDK.session.close();
-      this.listener({ onCall: false, muted: false, callActionPending: false, usingVideo: false });
+      this.listener({
+        onCall: false,
+        muted: false,
+        callActionPending: false,
+        usingVideo: false,
+        conference: null,
+      });
+      document.querySelectorAll('.vxt-video').forEach((v) => {
+        v.srcObject.getTracks().forEach((track) => {
+          track.stop();
+        });
+        v.remove();
+      });
     });
   }
   async openSession() {
@@ -167,7 +193,7 @@ export default class CallManager {
     VoxeetSDK.conference.on('participantUpdated', () => this.usersListHandle());
 
     VoxeetSDK.conference.on('joined', () => {
-      this.listener({ onCall: true, callActionPending: false });
+      this.listener({ onCall: true, callActionPending: false, usingVideo: this.__useVideo });
     });
 
     VoxeetSDK.conference.on('left', () => {
@@ -175,14 +201,47 @@ export default class CallManager {
         onCall: false,
         callActionPending: false,
         usersOnCall: {},
+        usingVideo: false,
       });
     });
 
     VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
+      this.listener({ callActionPending: true });
+      if (this.__useVideo === true) {
+        const vid = 'video#' + LocalData().userUid;
+        if (!document.querySelector(vid)) {
+          const vidNode = document.createElement('video');
+          vidNode.id = LocalData().userUid;
+          vidNode.classList.add('vxt-video');
+          document.querySelector('.vxt-video-container').appendChild(vidNode);
+          navigator
+            .getUserMedia({
+              video: true,
+              audio: false,
+            })
+            .then((stream) => {
+              vidNode.srcObject = stream;
+              vidNode.onloadedmetadata = vidNode.play;
+            })
+            .catch((err) => {
+              //ignore
+            });
+        }
+      }
       this.listener({ callActionPending: false });
     });
 
     VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
+      const vid = 'video#' + participant.id;
+      if (document.querySelector(vid)) {
+        document
+          .querySelector(vid)
+          .srcObject.getTracks()
+          .forEach((track) => {
+            track.stop();
+          });
+        document.querySelector(vid).remove();
+      }
       this.listener({ callActionPending: false });
     });
 
@@ -194,11 +253,11 @@ export default class CallManager {
     ) {
       await GetVoxeetTokenApi({ partyName: LocalData().partyName })
         .then((res) => res.json())
-        .then((tokenResult) => {
+        .then(async (tokenResult) => {
           if (tokenResult.status <= 299) {
             const { access_token, refresh_token } = tokenResult;
             this.updateTokens(access_token, refresh_token);
-            VoxeetSDK.initializeToken(access_token, refresh_token);
+            await VoxeetSDK.initializeToken(access_token, refresh_token);
           } else {
             console.error('Get Voxeet Token API Result Error', tokenResult);
           }
@@ -207,7 +266,7 @@ export default class CallManager {
           console.error('Get Voxeet Token API error', err);
         });
     } else {
-      VoxeetSDK.initializeToken(this.__accessToken, this.__refreshToken);
+      await VoxeetSDK.initializeToken(this.__accessToken, this.__refreshToken);
     }
   }
   async refreshToken() {

app/src/Chat.js

@@ -394,7 +394,7 @@ export default class Chat extends Component {
         const overlay = document.createElement('div');
         overlay.innerHTML = `
           <div id="mic-highlight"></div>
-          <h4 id="mic-text">Grant Mic Permission</h4>
+          <h4 id="mic-text">Grant Mic / Camera Permission</h4>
         `;
         overlay.id = 'mic-permission-overlay';
         document.body.appendChild(overlay);
@@ -803,6 +803,7 @@ export default class Chat extends Component {
             } else return null;
           })}
         </div>
+        <div className="vxt-video-container"></div>
         <Thread setReplyTo={this.setReplyTo} sentMessages={messages} />
         <Thread
           isSending={true}

app/src/index.css

@@ -965,3 +965,14 @@ button.giphy-list-item {
   text-align: center;
   float: right;
 }
+
+.vxt-video-container {
+  display: flex;
+  justify-content: space-evenly;
+}
+.vxt-video {
+  max-width: calc(50% - 20px) !important;
+  border-radius: 10px;
+  margin: 10px 15px;
+  display: inline-flex;
+}