ep_webrtc 0.1.77 → 0.1.81

package/README.md

@@ -2,7 +2,8 @@
 
 # ep_webrtc
 
-WebRTC-based audio/video chat with other users visiting the same pad.
+WebRTC-based audio/video chat and screen sharing with other users visiting the
+same pad.
 
 The audio and video streams are peer-to-peer: every user sends a copy of their
 audio/video streams directly to every other user visiting the same pad. Because

package/locales/en.json

@@ -5,9 +5,11 @@
     "ep_webrtc_error_permission_cam": "Failed to get permission to access your camera.",
     "ep_webrtc_error_permission_mic": "Failed to get permission to access your microphone.",
     "ep_webrtc_error_permission_cammic": "Failed to get permission to access your camera and microphone.",
+    "ep_webrtc_error_permission_screen": "Failed to get permission to access your screen.",
     "ep_webrtc_error_notFound_cam": "Failed to access your camera.",
     "ep_webrtc_error_notFound_mic": "Failed to access your microphone.",
     "ep_webrtc_error_notFound_cammic": "Failed to access your camera and microphone.",
+    "ep_webrtc_error_notFound_screen": "Failed to access your screen.",
     "ep_webrtc_error_notReadable": "Sorry, a hardware error occurred that prevented access to your camera and/or microphone:",
     "ep_webrtc_error_otherCantAccess": "Sorry, the browser doesn't have access to your camera and/or microphone. Please check permissions in your browser's settings. This is most likely not a hardware error:",
 

package/package.json

@@ -5,7 +5,7 @@
     "url": "git@github.com:ether/ep_webrtc.git",
     "type": "git"
   },
-  "version": "0.1.77",
+  "version": "0.1.81",
   "description": "WebRTC based audio/video chat to Etherpad",
   "author": "John McLear <john@mclear.co.uk>",
   "contributors": [],

package/static/css/styles.css

@@ -102,6 +102,12 @@
 #rtcbox .interface-btn.video-btn:before { content: '\e83b'; }
 #rtcbox .interface-btn.video-btn.off:before { content: '\e83c'; }
 
+#rtcbox .interface-btn.screenshare-btn:before {
+  content: "\f108";
+  font-family: "fontawesome-ep_webrtc";
+}
+#rtcbox .interface-btn.screenshare-btn.off:before { content: "\f109"; }
+
 #rtcbox .interface-btn.enlarge-btn:before { content: '\e840'; }
 #rtcbox .interface-btn.enlarge-btn.large:before { content: '\e83f'; }
 

package/static/js/index.js

@@ -44,6 +44,30 @@ const sessionId = Date.now();
 // Incremented each time a new RTCPeerConnection is created.
 let nextInstanceId = 0;
 
+const logErrorToServer = async (err, delay = 10000) => {
+  // Sleep to avoid logging benign errors caused by the user leaving the page (e.g., audio/video
+  // stream ended unexpectedly). If the user navigates away during this sleep the error will not
+  // be logged.
+  if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
+  // Mimick Etherpad core's global exception handler in pad_utils.js.
+  const {message = 'unknown', fileName = 'unknown', lineNumber = -1} = err;
+  let msg = message;
+  if (err.name != null && msg !== err.name && !msg.startsWith(`${err.name}: `)) {
+    msg = `${err.name}: ${msg}`;
+  }
+  await $.post('../jserror', {
+    errorInfo: JSON.stringify({
+      type: 'Plugin ep_webrtc',
+      msg,
+      url: window.location.href,
+      source: fileName,
+      linenumber: lineNumber,
+      userAgent: navigator.userAgent,
+      stack: err.stack,
+    }),
+  });
+};
+
 class Mutex {
   async lock() {
     while (this._locked != null) await this._locked;
@@ -60,6 +84,7 @@ class LocalTracks extends EventTargetPolyfill {
   constructor() {
     super();
     Object.defineProperty(this, 'stream', {value: new MediaStream(), writeable: false});
+    this.videoIsScreenshare = false;
   }
 
   _getTracks(kind) {
@@ -158,6 +183,7 @@ class PeerState extends EventTargetPolyfill {
               return await sender.replaceTrack(newTrack);
             } catch (err) {
               this._debug('renegotiation is required');
+              logErrorToServer(err);
             }
           }
           this._pc.removeTrack(sender);
@@ -184,7 +210,11 @@ class PeerState extends EventTargetPolyfill {
     }
   }
 
-  _resetConnection(peerIds = null) {
+  _resetConnection(err = null, peerIds = null) {
+    if (err != null) {
+      this._debug('resetting connection due to error:', err);
+      logErrorToServer(err);
+    }
     if (this._closed) {
       this._debug('ignoring _resetConnection() on closed PeerState');
       return;
@@ -217,7 +247,7 @@ class PeerState extends EventTargetPolyfill {
       } catch (err) {
         console.error('Error setting local description:', err);
         if (++this._failedSLDAttempts > 10) throw err; // Avoid an infinite loop.
-        this._resetConnection();
+        this._resetConnection(err);
         return;
       } finally {
         negotiationState.makingOffer = false;
@@ -226,7 +256,9 @@ class PeerState extends EventTargetPolyfill {
     pc.addEventListener('connectionstatechange', () => {
       this._debug(`connection state changed to ${pc.connectionState}`);
       switch (pc.connectionState) {
-        case 'closed': this._resetConnection(); break;
+        case 'closed':
+          this._resetConnection(new Error('connectionState changed to closed'));
+          break;
         case 'connected':
           if (this._remoteStream == null) this._setRemoteStream(this._disconnectedRemoteStream);
           break;
@@ -240,7 +272,7 @@ class PeerState extends EventTargetPolyfill {
         // seems that on at least Chrome 90 the 'failed' state is terminal (it can never go back to
         // working) so a new RTCPeerConnection must be made.
         case 'failed':
-          this._resetConnection();
+          this._resetConnection(new Error('connectionState changed to failed'));
           break;
       }
     });
@@ -325,26 +357,26 @@ class PeerState extends EventTargetPolyfill {
         return;
       }
       for (const idType of ['session', 'instance']) {
-        const newId = ids.from[idType];
+        const newId = (ids.from || {})[idType];
         const currentId = (this._ids.to || {})[idType];
         if (currentId == null || newId === currentId) continue;
         if (newId == null || newId < currentId) return;
         // The remote peer reloaded the page or experienced an error. Destroy and recreate the local
         // RTCPeerConnection to avoid browser quirks caused by state mismatches.
-        this._debug(`remote peer forced WebRTC renegotiation via new ${idType} ID ` +
-                    `(old ID ${currentId}, new ID ${newId})`);
-        this._resetConnection(ids.from);
+        this._resetConnection(new Error(
+            `remote peer forced WebRTC renegotiation via new ${idType} ID ` +
+            `(old ID ${currentId}, new ID ${newId})`), ids.from);
         break;
       }
       this._ids.to = ids.from;
     }
-    if (this._pc == null) this._resetConnection(this._ids.to);
+    if (this._pc == null) this._resetConnection(null, this._ids.to);
     try {
       if (description != null) await this._setRemoteDescription(description);
       if (candidate != null) await this._addIceCandidate(candidate);
     } catch (err) {
       console.error('Error processing message from peer:', err);
-      this._resetConnection();
+      this._resetConnection(err);
       return;
     }
   }
@@ -409,16 +441,17 @@ exports.rtc = new class {
       const {kind} = oldTrack || newTrack;
       $videoContainer.find(`.${kind}ended-error-btn`)
           .css('display', newTrack == null ? '' : 'none');
-      if (newTrack == null) {
-        this.logErrorToServer(new Error(`Local ${kind} track ended unexpectedly`));
-      }
+      if (newTrack == null) logErrorToServer(new Error(`Local ${kind} track ended unexpectedly`));
       ($videoContainer.data('updateMinSize') || (() => {}))();
 
       // Update the audio/video buttons to reflect the new state.
       if (newTrack != null) return;
       switch (oldTrack.kind) {
         case 'audio': this._selfViewButtons.audio.enabled = false; break;
-        case 'video': this._selfViewButtons.video.enabled = false; break;
+        case 'video':
+          this._selfViewButtons.video.enabled = false;
+          this._selfViewButtons.screenshare.enabled = false;
+          break;
       }
     });
     this._pad = null;
@@ -541,30 +574,6 @@ exports.rtc = new class {
     ($videoContainer.data('updateMinSize') || (() => {}))();
   }
 
-  async logErrorToServer(err, delay = 10000) {
-    // Sleep to avoid logging benign errors caused by the user leaving the page (e.g., audio/video
-    // stream ended unexpectedly). If the user navigates away during this sleep the error will not
-    // be logged.
-    if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
-    // Mimick Etherpad core's global exception handler in pad_utils.js.
-    const {message = 'unknown', fileName = 'unknown', lineNumber = -1} = err;
-    let msg = message;
-    if (err.name != null && msg !== err.name && !msg.startsWith(`${err.name}: `)) {
-      msg = `${err.name}: ${msg}`;
-    }
-    await $.post('../jserror', {
-      errorInfo: JSON.stringify({
-        type: 'Plugin ep_webrtc',
-        msg,
-        url: window.location.href,
-        source: fileName,
-        linenumber: lineNumber,
-        userAgent: navigator.userAgent,
-        stack: err.stack,
-      }),
-    });
-  }
-
   showUserMediaError(err) { // show an error returned from getUserMedia
     err.devices.sort();
     const devices = err.devices.join('');
@@ -625,7 +634,7 @@ exports.rtc = new class {
       sticky: true,
       class_name: 'error',
     });
-    this.logErrorToServer(err);
+    logErrorToServer(err);
   }
 
   // Performs the following steps for the local audio and/or video tracks:
@@ -646,27 +655,52 @@ exports.rtc = new class {
               (t) => t !== this._disabledSilence && t.readyState === 'live');
       if (addAudioTrack) devices.push('mic');
       const addVideoTrack = updateVideo && this._selfViewButtons.video.enabled &&
-          !this._localTracks.stream.getVideoTracks().some((t) => t.readyState === 'live');
+          (!this._localTracks.stream.getVideoTracks().some((t) => t.readyState === 'live') ||
+           this._localTracks.videoIsScreenshare);
       if (addVideoTrack) devices.push('cam');
-      if (addAudioTrack || addVideoTrack) {
+      const addScreenshareTrack = updateVideo && this._selfViewButtons.screenshare.enabled &&
+          !this._selfViewButtons.video.enabled && // Video button overrides screenshare button.
+          (!this._localTracks.stream.getVideoTracks().some((t) => t.readyState === 'live') ||
+           !this._localTracks.videoIsScreenshare);
+      const getUserMedia = async () => {
+        if (!addAudioTrack && !addVideoTrack) return new MediaStream();
         debug(`requesting permission to access ${devices.join(' and ')}`);
-        let stream;
-        try {
-          stream = await window.navigator.mediaDevices.getUserMedia({
-            audio: addAudioTrack,
-            video: addVideoTrack && {width: {ideal: 320}, height: {ideal: 240}},
-          });
-          debug('successfully accessed device(s)');
-        } catch (err) {
-          // Display but otherwise ignore the error. The button(s) will be toggled back to
-          // disabled below if we failed to access the microphone/camera. The user can re-click
-          // the button to try again.
-          err.devices = devices;
-          (async () => this.showUserMediaError(err))();
-          stream = new MediaStream();
-        }
-        for (const track of stream.getTracks()) this._localTracks.setTrack(track.kind, track);
-      }
+        const stream = await window.navigator.mediaDevices.getUserMedia({
+          audio: addAudioTrack,
+          video: addVideoTrack && {width: {ideal: 320}, height: {ideal: 240}},
+        });
+        debug('successfully accessed device(s)');
+        return stream;
+      };
+      const getDisplayMedia = async () => {
+        if (!addScreenshareTrack) return new MediaStream();
+        debug('requesting permission to access screen');
+        const stream = await window.navigator.mediaDevices.getDisplayMedia({
+          video: {cursor: 'always'},
+        });
+        debug('successfully accessed screen');
+        return new MediaStream(stream.getVideoTracks());
+      };
+      await Promise.all([[getUserMedia, devices], [getDisplayMedia, ['screen']]].map(
+          async ([getMedia, devices]) => {
+            let stream;
+            try {
+              stream = await getMedia();
+            } catch (err) {
+              // Display but otherwise ignore the error. The button(s) will be toggled back to
+              // disabled below if we failed to access the microphone/camera. The user can re-click
+              // the button to try again.
+              err.devices = devices;
+              (async () => this.showUserMediaError(err))();
+              stream = new MediaStream();
+            }
+            for (const track of stream.getTracks()) {
+              if (track.kind === 'video') {
+                this._localTracks.videoIsScreenshare = devices.includes('screen');
+              }
+              this._localTracks.setTrack(track.kind, track);
+            }
+          }));
       if (updateAudio) {
         for (const track of this._localTracks.stream.getAudioTracks()) {
           // Re-check the state of the button because the user might have clicked it while
@@ -680,12 +714,15 @@ exports.rtc = new class {
       if (updateVideo) {
         for (const track of this._localTracks.stream.getVideoTracks()) {
           // Re-check the state of the button because the user might have clicked it while
-          // getUserMedia() was running.
-          track.enabled = this._selfViewButtons.video.enabled;
+          // getUserMedia() or getDisplayMedia() was running.
+          track.enabled = this._localTracks.videoIsScreenshare
+            ? this._selfViewButtons.screenshare.enabled : this._selfViewButtons.video.enabled;
         }
         const hasVideo = this._localTracks.stream.getVideoTracks().some(
             (t) => t.enabled && t.readyState === 'live');
-        this._selfViewButtons.video.enabled = hasVideo;
+        this._selfViewButtons.video.enabled = hasVideo && !this._localTracks.videoIsScreenshare;
+        this._selfViewButtons.screenshare.enabled =
+            hasVideo && this._localTracks.videoIsScreenshare;
       }
     } finally {
       if (updateVideo) this._trackLocks.video.unlock();
@@ -739,8 +776,15 @@ exports.rtc = new class {
       const $rtcbox = $('#rtcbox');
       $rtcbox.empty(); // In case any peer videos didn't get cleaned up for some reason.
       $rtcbox.hide();
-      for (const track of this._localTracks.stream.getTracks()) {
-        this._localTracks.setTrack(track.kind, null);
+      await this._trackLocks.audio.lock();
+      await this._trackLocks.video.lock();
+      try {
+        for (const track of this._localTracks.stream.getTracks()) {
+          this._localTracks.setTrack(track.kind, null);
+        }
+      } finally {
+        this._trackLocks.video.unlock();
+        this._trackLocks.audio.unlock();
       }
     } finally {
       $checkbox.prop('disabled', false);
@@ -796,7 +840,7 @@ exports.rtc = new class {
         $video.data('automuted', true);
         return await this.playVideo($video);
       }
-      this.logErrorToServer(err);
+      logErrorToServer(err);
       $playErrorBtn.css({display: ''});
     }
     ($videoContainer.data('updateMinSize') || (() => {}))();
@@ -931,10 +975,11 @@ exports.rtc = new class {
     });
 
     // /////
-    // Disable Video button
+    // Video and Screen Sharing Buttons
     // /////
 
     let $videoBtn;
+    let $screenshareBtn;
     if (isLocal) {
       $videoBtn = $('<span>').addClass('interface-btn video-btn buttonicon').appendTo($interface);
       this._selfViewButtons.video = {
@@ -951,11 +996,43 @@ exports.rtc = new class {
       if (videoHardDisabled) {
         $videoBtn.attr('title', 'Video disallowed by admin').addClass('disallowed');
       }
+      const {navigator: {mediaDevices: {getDisplayMedia} = {}} = {}} = window;
+      $screenshareBtn = $('<span>')
+          .addClass('interface-btn screenshare-btn buttonicon')
+          .css('display', typeof getDisplayMedia === 'function' ? '' : 'none')
+          .appendTo($interface);
+      this._selfViewButtons.screenshare = {
+        get enabled() { return !$screenshareBtn.hasClass('off'); },
+        set enabled(val) {
+          $screenshareBtn
+              .toggleClass('off', !val)
+              .attr('title', val ? 'Stop screen share' : 'Start screen share');
+        },
+      };
+      this._selfViewButtons.screenshare.enabled = false;
       addAsyncEventHandlers($videoBtn, videoHardDisabled ? {} : {
         click: async () => {
           const videoEnabled = !this._selfViewButtons.video.enabled;
           _debug(`video button clicked to ${videoEnabled ? 'en' : 'dis'}able video`);
           this._selfViewButtons.video.enabled = videoEnabled;
+          // Unconditionally disable screen sharing. Either the camera was previously disabled in
+          // which case the user now wants to share camera video, or the camera was previously
+          // enabled in which case the user now wants to shut off all video.
+          this._selfViewButtons.screenshare.enabled = false;
+          await this.updateLocalTracks({updateVideo: true});
+          // Don't use `await` here -- see the comment for the audio button click handler above.
+          this.unmuteAndPlayAll();
+        },
+      });
+      addAsyncEventHandlers($screenshareBtn, {
+        click: async () => {
+          const screenshareEnabled = !this._selfViewButtons.screenshare.enabled;
+          _debug(`button clicked to ${screenshareEnabled ? 'en' : 'dis'}able screen sharing`);
+          // Unconditionally disable the camera. Either screen sharing was previously disabled in
+          // which case the user now wants to share the screen, or screen sharing was previously
+          // enabled in which case the user wants to shut off all video.
+          this._selfViewButtons.video.enabled = false;
+          this._selfViewButtons.screenshare.enabled = screenshareEnabled;
           await this.updateLocalTracks({updateVideo: true});
           // Don't use `await` here -- see the comment for the audio button click handler above.
           this.unmuteAndPlayAll();
@@ -1042,7 +1119,7 @@ exports.rtc = new class {
         {
           cls: 'videoended-error-btn',
           title: 'Video stopped unexpectedly. Click to retry.',
-          click: () => $videoBtn.click(),
+          click: () => (this._localTracks.videoIsScreenshare ? $screenshareBtn : $videoBtn).click(),
         },
       ] : []),
     ];
@@ -1224,7 +1301,7 @@ exports.rtc = new class {
         // The userLeave hook isn't called until it has been 8s since the peer left. Wait a bit
         // longer than that before logging the disconnect to the server.
         logDisconnectErrorTimeout =
-            setTimeout(() => this.logErrorToServer(new Error('RTC connection lost'), 0), 10000);
+            setTimeout(() => logErrorToServer(new Error('RTC connection lost'), 0), 10000);
         ($videoContainer.data('updateMinSize') || (() => {}))();
         await this.setStream(userId, this._blankStream);
       });