Merge pull request #97 from openreplay/dev

Assist fixes

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -137,7 +137,7 @@ export default class AssistManager {
       });
       this.peer = peer;
       peer.on('error', e => {
-        if (e.type === 'peer-unavailable') {
+        if (['peer-unavailable', 'network'].includes(e.type)) {
           if (this.peer && this.connectionAttempts++ < MAX_RECONNECTION_COUNT) {
             update({ peerConnectionStatus: ConnectionStatus.Connecting });
             console.log("peerunavailable")
@@ -167,9 +167,8 @@ export default class AssistManager {
     const id = this.peerID;
     console.log("trying to connect to", id)
     const conn = this.peer.connect(id, { serialization: 'json', reliable: true});
-
     conn.on('open', () => {
-      window.addEventListener("beforeunload", ()=>conn.send("unload"));
+      window.addEventListener("beforeunload", ()=>conn.open &&conn.send("unload"));
       console.log("peer connected")
       
       let i = 0;
@@ -179,6 +178,7 @@ export default class AssistManager {
 
       conn.on('data', (data) => {
         if (!Array.isArray(data)) { return this.handleCommand(data); }
+        this.mesagesRecieved = true;
         if (firstMessage) {
           firstMessage = false;
           this.md.setMessagesLoading(false);
@@ -290,11 +290,23 @@ export default class AssistManager {
   }
 
 
+
+  private mesagesRecieved: boolean = false;
   private handleCommand(command: string) {
     switch (command) {
       case "unload":
         this.onTrackerCallEnd();
-        this.dataConnection?.close();
+        this.mesagesRecieved = false;
+        setTimeout(() => {
+          if (this.mesagesRecieved) {
+            return;
+          }
+          // @ts-ignore
+          this.md.display(false);
+          this.dataConnection?.close();
+          update({ peerConnectionStatus: ConnectionStatus.Disconnected });
+        }, 8000); // TODO: more convenient way
+        //this.dataConnection?.close();
         return;
       case "call_end":
         this.onTrackerCallEnd();
@@ -322,6 +334,8 @@ export default class AssistManager {
     
     const call =  this.peer.call(this.peerID, localStream);
     call.on('stream', stream => {
+      //call.peerConnection.ontrack = (t)=> console.log('ontrack', t)
+
       update({ calling: CallingState.True });
       onStream(stream);
       this.send({ 

tracker/tracker-assist/src/CallWindow.ts

@@ -4,7 +4,6 @@ export default class CallWindow {
   private iframe: HTMLIFrameElement;
   private vRemote: HTMLVideoElement | null = null;
   private vLocal: HTMLVideoElement | null = null;
-  private aRemote: HTMLAudioElement | null = null;
   private audioBtn: HTMLAnchorElement | null = null;
   private videoBtn: HTMLAnchorElement | null = null;
   private userNameSpan: HTMLSpanElement | null = null;
@@ -52,8 +51,8 @@ export default class CallWindow {
         
         this.vLocal = doc.getElementById("video-local") as HTMLVideoElement;
         this.vRemote = doc.getElementById("video-remote") as HTMLVideoElement;
-        this.aRemote  = doc.getElementById("audio-remote") as HTMLAudioElement;
         this._trySetStreams();
+        //
         this.vLocal.parentElement && this.vLocal.parentElement.classList.add("d-none");
 
         this.audioBtn = doc.getElementById("audio-btn") as HTMLAnchorElement;
@@ -104,26 +103,26 @@ export default class CallWindow {
 
   private localStream: MediaStream | null = null;
   private remoteStream: MediaStream | null = null;
+  private setLocalVideoStream: (MediaStream) => void = () => {};
+  private videoRequested: boolean = true; // TODO: green camera light
   private _trySetStreams() {
     if (this.vRemote && this.remoteStream) {
       this.vRemote.srcObject = this.remoteStream;
     }
-    if (this.aRemote && this.localStream) {
-      this.aRemote.srcObject = this.localStream;
-    }
-    if (this.vLocal && this.videoStream) {
-      this.vLocal.srcObject = this.videoStream;
+    if (this.vLocal && this.localStream) {
+      this.vLocal.srcObject = this.localStream;
     }
   }
   setRemoteStream(rStream: MediaStream) {
     this.remoteStream = rStream;
     this._trySetStreams();
   }
-  setLocalStream(lStream: MediaStream) {    
-    this.localStream = lStream;
+  setLocalStream(lStream: MediaStream, setLocalVideoStream: (MediaStream) => void) {    
     lStream.getVideoTracks().forEach(track => {
       track.enabled = false;
     });
+    this.localStream = lStream;
+    this.setLocalVideoStream = setLocalVideoStream;
     this._trySetStreams();
   }
 
@@ -157,7 +156,6 @@ export default class CallWindow {
     }
   }
 
-  private videoStream: MediaStream | null = null;
   private _toggleVideoUI(enabled) {
     if (!this.videoBtn || !this.vLocal || !this.vLocal.parentElement) { return; } 
     if (enabled) {
@@ -172,16 +170,19 @@ export default class CallWindow {
   }
 
   toggleVideo() {
-    if (this.videoStream === null) {
+    if (!this.videoRequested) {
       navigator.mediaDevices.getUserMedia({video:true, audio:false}).then(vd => {
-        this.videoStream = vd;
-        this._trySetStreams();
+        this.videoRequested = true;
+        this.setLocalVideoStream(vd);
         this._toggleVideoUI(true);
+        this.localStream?.getVideoTracks().forEach(track => {
+          track.enabled = true;
+        })
       });
       return;
     }
     let enabled = true;
-    this.videoStream?.getVideoTracks().forEach(track => {
+    this.localStream?.getVideoTracks().forEach(track => {
       enabled = enabled && !track.enabled;
       track.enabled = enabled;
     });
@@ -190,7 +191,6 @@ export default class CallWindow {
   }
 
   remove() {
-    this.videoStream?.getTracks().forEach(t => t.stop());
     clearInterval(this.tsInterval);
     if (this.iframe.parentElement) {
       document.body.removeChild(this.iframe);   

tracker/tracker-assist/src/index.ts

@@ -116,7 +116,7 @@ export default function(opts: Partial<Options> = {})  {
           const mouse = new Mouse();
           let callUI;
 
-          navigator.mediaDevices.getUserMedia({video:false, audio:true})
+          navigator.mediaDevices.getUserMedia({video:true, audio:true})
           .then(lStream => {
             const onCallEnd = () => {
               console.log("on callend", call.open)
@@ -150,7 +150,18 @@ export default function(opts: Partial<Options> = {})  {
             call.on('error', initiateCallEnd);
 
             callUI = new CallWindow(initiateCallEnd);
-            callUI.setLocalStream(lStream);
+            callUI.setLocalStream(lStream, (stream) => {
+              //let videoTrack = stream.getVideoTracks()[0];
+              //lStream.addTrack(videoTrack);
+
+              //call.peerConnection.addTrack(videoTrack);
+
+              // call.peerConnection.getSenders()
+              // var sender = call.peerConnection.getSenders().find(function(s) {
+              //   return s.track .kind == videoTrack.kind;
+              // });
+              //sender.replaceTrack(videoTrack);
+            });
             call.on('stream', function(rStream) {
               callUI.setRemoteStream(rStream);
               dataConn.on('data', (data: any) => {