Style + unmute delay fix.

src/widgets/call-panel.jsx

@@ -36,6 +36,8 @@ class CallPanel extends React.PureComponent {
       // If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer.
       callInitialSetupComplete: false,
       audioOnly: props.callAudioOnly,
+      // Video mute/unmute in progress.
+      videoToggleInProgress: false,
     };
 
     this.localStreamConstraints = {
@@ -153,9 +155,9 @@ class CallPanel extends React.PureComponent {
   emptyVideoTrack() {
     const width = 640;
     const height = 480;
-    let canvas = Object.assign(document.createElement("canvas"), {width, height});
+    const canvas = Object.assign(document.createElement("canvas"), {width, height});
     canvas.getContext('2d').fillRect(0, 0, width, height);
-    let stream = canvas.captureStream();
+    const stream = canvas.captureStream(0);
     return Object.assign(stream.getVideoTracks()[0], {enabled: false});
   }
 
@@ -178,8 +180,7 @@ class CallPanel extends React.PureComponent {
         if (!this.localStreamConstraints.video) {
           // Starting an audio-only call. Create a dummy video track
           // (so video can be enabled during the call if the user desires).
-          const dummy = this.emptyVideoTrack();
+          stream.addTrack(this.emptyVideoTrack());
-          stream.addTrack(dummy);
         }
         this.setState({localStream: stream, waitingForPeer: true});
         this.localRef.current.srcObject = stream;
@@ -338,8 +339,8 @@ class CallPanel extends React.PureComponent {
     if (event.track.kind == 'video') {
       // Redraw the screen when remote video stream state changes.
       event.track.onended = _ => { this.forceUpdate(); };
-      event.track.onmute = () => { this.forceUpdate(); };
+      event.track.onmute = _ => { this.forceUpdate(); };
-      event.track.onunmute = () => { this.forceUpdate(); };
+      event.track.onunmute = _ => { this.forceUpdate(); };
     }
     // Make sure we display the title (peer's name) over the remote video.
     this.forceUpdate();
@@ -441,6 +442,7 @@ class CallPanel extends React.PureComponent {
     t.stop();
 
     stream.removeTrack(t);
+    this.setState({videoToggleInProgress: false});
   }
 
   unmuteVideo() {
@@ -462,11 +464,16 @@ class CallPanel extends React.PureComponent {
         this.localRef.current.srcObject = this.state.localStream;
       })
       .catch(this.handleGetUserMediaError)
-      .finally(() => { this.forceUpdate() }); // Make sure we redraw the mute/unmute icons (e.g. camera -> camera_off).
+      .finally(_ => { this.setState({videoToggleInProgress: false}); }); // Make sure we redraw the mute/unmute icons (e.g. camera -> camera_off).
   }
 
   handleToggleCameraClick() {
+    if (this.state.videoToggleInProgress) {
+      // Toggle currently in progress.
+      return;
+    }
     const tracks = this.state.localStream.getVideoTracks();
+    this.setState({videoToggleInProgress: true});
     if (tracks && tracks.length > 0 && tracks[0].enabled && tracks[0].readyState == 'live') {
       this.muteVideo();
     } else {

umd/index.dev.js

@@ -10702,7 +10702,8 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       previousOnInfo: undefined,
       waitingForPeer: false,
       callInitialSetupComplete: false,
-      audioOnly: props.callAudioOnly
+      audioOnly: props.callAudioOnly,
+      videoToggleInProgress: false
     };
     this.localStreamConstraints = {
       audio: true,
@@ -10797,12 +10798,12 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
   emptyVideoTrack() {
     const width = 640;
     const height = 480;
-    let canvas = Object.assign(document.createElement("canvas"), {
+    const canvas = Object.assign(document.createElement("canvas"), {
       width,
       height
     });
     canvas.getContext('2d').fillRect(0, 0, width, height);
-    let stream = canvas.captureStream();
+    const stream = canvas.captureStream(0);
     return Object.assign(stream.getVideoTracks()[0], {
       enabled: false
     });
@@ -10818,8 +10819,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     }
     navigator.mediaDevices.getUserMedia(this.localStreamConstraints).then(stream => {
       if (!this.localStreamConstraints.video) {
-        const dummy = this.emptyVideoTrack();
+        stream.addTrack(this.emptyVideoTrack());
-        stream.addTrack(dummy);
       }
       this.setState({
         localStream: stream,
@@ -10956,10 +10956,10 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       event.track.onended = _ => {
         this.forceUpdate();
       };
-      event.track.onmute = () => {
+      event.track.onmute = _ => {
         this.forceUpdate();
       };
-      event.track.onunmute = () => {
+      event.track.onunmute = _ => {
         this.forceUpdate();
       };
     }
@@ -11041,6 +11041,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     t.enabled = false;
     t.stop();
     stream.removeTrack(t);
+    this.setState({
+      videoToggleInProgress: false
+    });
   }
   unmuteVideo() {
     const pc = this.state.pc;
@@ -11055,12 +11058,20 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       return sender.replaceTrack(track);
     }).then(_ => {
       this.localRef.current.srcObject = this.state.localStream;
-    }).catch(this.handleGetUserMediaError).finally(() => {
+    }).catch(this.handleGetUserMediaError).finally(_ => {
-      this.forceUpdate();
+      this.setState({
+        videoToggleInProgress: false
+      });
     });
   }
   handleToggleCameraClick() {
+    if (this.state.videoToggleInProgress) {
+      return;
+    }
     const tracks = this.state.localStream.getVideoTracks();
+    this.setState({
+      videoToggleInProgress: true
+    });
     if (tracks && tracks.length > 0 && tracks[0].enabled && tracks[0].readyState == 'live') {
       this.muteVideo();
     } else {