ep_webrtc 2.0.4 → 2.2.0

package/package.json

@@ -5,7 +5,7 @@
     "url": "git@github.com:ether/ep_webrtc.git",
     "type": "git"
   },
-  "version": "2.0.4",
+  "version": "2.2.0",
   "description": "WebRTC based audio/video chat to Etherpad",
   "author": "John McLear <john@mclear.co.uk>",
   "contributors": [],
@@ -15,7 +15,7 @@
   "dependencies": {
     "abort-controller": "^3.0.0",
     "lodash": "^4.17.21",
-    "node-fetch": "^3.2.1"
+    "node-fetch": "^3.2.3"
   },
   "funding": {
     "type": "individual",

package/static/js/index.js

@@ -87,7 +87,7 @@ class LocalTracks extends EventTargetPolyfill {
     this.videoIsScreenshare = false;
   }
 
-  _getTracks(kind) {
+  getTracks(kind) {
     return kind === 'audio' ? this.stream.getAudioTracks()
       : kind === 'video' ? this.stream.getVideoTracks()
       : this.stream.getTracks();
@@ -96,7 +96,7 @@ class LocalTracks extends EventTargetPolyfill {
   setTrack(kind, newTrack) {
     newTrack = newTrack || null; // Convert undefined to null.
     let oldTrack = null;
-    const tracks = this._getTracks(kind);
+    const tracks = this.getTracks(kind);
     for (const track of tracks) {
       if (track.kind !== kind) continue;
       if (track === newTrack) return; // No change.
@@ -109,7 +109,7 @@ class LocalTracks extends EventTargetPolyfill {
       debug(`adding ${kind} track ${newTrack.id} to local stream`);
       newTrack.addEventListener('ended', () => {
         debug(`local ${kind} track ${newTrack.id} ended`);
-        if (!this._getTracks(kind).includes(newTrack)) return;
+        if (!this.getTracks(kind).includes(newTrack)) return;
         this.setTrack(kind, null);
       });
       this.stream.addTrack(newTrack);
@@ -135,10 +135,6 @@ class ClosedEvent extends CustomEvent {
   }
 }
 
-// The WebRTC negotiation logic used here is based on the "Perfect Negotiation Example" at
-// https://www.w3.org/TR/2021/REC-webrtc-20210126/#perfect-negotiation-example. See there for
-// details about how it works.
-//
 // Events:
 //   * 'stream' (see StreamEvent): Emitted when the remote stream is ready. For every 'stream' event
 //     there will be a corresponding 'streamgone' event. Once a stream is added another stream will
@@ -148,15 +144,15 @@ class ClosedEvent extends CustomEvent {
 //   * 'closed' (see ClosedEvent): Emitted when the PeerState is closed, except when closed by a
 //     call to close(). The PeerState must not be used after it is closed.
 class PeerState extends EventTargetPolyfill {
-  constructor(pcConfig, polite, sendMessage, localTracks, debug) {
+  constructor(pcConfig, caller, sendMessage, localTracks, debug) {
     super();
     this._pcConfig = pcConfig;
-    this._polite = polite;
+    this._caller = caller;
     this._sendMessage = (msg) => sendMessage(Object.assign({ids: this._ids}, msg));
     this._localTracks = localTracks;
     this._failedSLDAttempts = 0;
     this._debug = debug;
-    this._debug(`I am the ${this._polite ? '' : 'im'}polite peer`);
+    this._debug(`I am the ${this._caller ? 'calling' : 'answering'} peer`);
     this._ids = {
       from: {
         // Only changes when the user reloads the page.
@@ -167,45 +163,42 @@ class PeerState extends EventTargetPolyfill {
     };
     this._closed = false;
     this._pc = null;
+    this._xcvrs = {};
     this._remoteStream = null;
-    this._onremovetrack =
-        () => { if (this._remoteStream.getTracks().length === 0) this._setRemoteStream(null); };
     this._ontrackchanged = async ({oldTrack, newTrack}) => {
-      if (this._pc == null || this._pc.connectionState === 'closed') return;
-      this._debug(`replacing ${oldTrack ? oldTrack.kind : newTrack.kind} track ` +
-                  `${oldTrack ? oldTrack.id : '(null)'} with ` +
-                  `${newTrack ? newTrack.id : '(null)'}`);
-      if (oldTrack != null) {
-        for (const sender of this._pc.getSenders()) {
-          if (sender.track !== oldTrack) continue;
-          if (newTrack != null) {
-            try {
-              return await sender.replaceTrack(newTrack);
-            } catch (err) {
-              this._debug('renegotiation is required');
-              logErrorToServer(err);
-            }
-          }
-          this._pc.removeTrack(sender);
-          break;
-        }
-      }
-      if (newTrack != null) this._pc.addTrack(newTrack, this._localTracks.stream);
+      const {kind} = oldTrack || newTrack;
+      await this._sendLocalTrack(kind, newTrack);
     };
     this._localTracks.addEventListener('trackchanged', this._ontrackchanged);
   }
 
+  async _sendLocalTrack(kind, track) {
+    if (this._pc == null || this._pc.connectionState === 'closed') return;
+    const {sender: {track: old} = {}} = this._xcvrs[kind] || {};
+    if ((old == null && track == null) || old === track) return;
+    this._debug(
+        `replacing ${kind} track ${old ? old.id : '(null)'} with ${track ? track.id : '(null)'}`);
+    const xcvr = this._xcvrs[kind];
+    if (!xcvr) return;
+    try {
+      if (track != null) xcvr.direction = 'sendrecv'; // Will throw if not already bidirectional.
+      await xcvr.sender.replaceTrack(track);
+    } catch (err) {
+      this._debug('renegotiation is required');
+      this._resetConnection(err);
+      return;
+    }
+  }
+
   _setRemoteStream(stream) {
     if (stream === this._remoteStream) return;
     if (this._remoteStream != null) {
       const oldStream = this._remoteStream;
-      oldStream.removeEventListener('removetrack', this._onremovetrack);
       this._remoteStream = null;
       this.dispatchEvent(new StreamEvent('streamgone', oldStream));
     }
     if (stream != null) {
       this._remoteStream = stream;
-      stream.addEventListener('removetrack', this._onremovetrack);
       this.dispatchEvent(new StreamEvent('stream', stream));
     }
   }
@@ -224,24 +217,21 @@ class PeerState extends EventTargetPolyfill {
     this._setRemoteStream(null);
     this._ids.from.instance = ++nextInstanceId;
     this._ids.to = peerIds;
-    // This negotiation state is captured in closures (instead of doing something like
-    // this._negotiationState) because this._resetConnection() needs to be sure that all of the
-    // event handlers for the old RTCPeerConnection do not mutate the negotiation state for the new
-    // RTCPeerConnection.
-    const negotiationState = {
-      makingOffer: false,
-      ignoreOffer: false,
-      isSettingRemoteAnswerPending: false,
-    };
     const pc = new RTCPeerConnection(this._pcConfig);
-    pc.addEventListener('track', ({track, streams}) => {
-      if (streams.length !== 1) throw new Error('Expected track to be in exactly one stream');
-      this._setRemoteStream(streams[0]);
+    pc.addEventListener('track', async ({track, transceiver}) => {
+      this._debug(`Received ${track.kind} track from peer, ID: ${track.id}`);
+      const stream = this._remoteStream || new MediaStream();
+      stream.addTrack(track);
+      this._setRemoteStream(stream);
+      if (!this._caller) {
+        this._xcvrs[track.kind] = transceiver;
+        // _sendLocalTrack might call _resetConnection, so it should be called last.
+        await this._sendLocalTrack(track.kind, this._localTracks.getTracks(track.kind)[0]);
+      }
     });
     pc.addEventListener('icecandidate', ({candidate}) => this._sendMessage({candidate}));
     pc.addEventListener('negotiationneeded', async () => {
       try {
-        negotiationState.makingOffer = true;
         await pc.setLocalDescription();
         this._failedSLDAttempts = 0;
         this._sendMessage({description: pc.localDescription});
@@ -250,8 +240,6 @@ class PeerState extends EventTargetPolyfill {
         if (++this._failedSLDAttempts > 10) throw err; // Avoid an infinite loop.
         this._resetConnection(err);
         return;
-      } finally {
-        negotiationState.makingOffer = false;
       }
     });
     pc.addEventListener('connectionstatechange', () => {
@@ -299,46 +287,33 @@ class PeerState extends EventTargetPolyfill {
 
     if (this._pc != null) this._pc.close();
     this._pc = pc;
-    this._setRemoteDescription = async (description) => {
-      const readyForOffer = !negotiationState.makingOffer &&
-          (pc.signalingState === 'stable' || negotiationState.isSettingRemoteAnswerPending);
-      const offerCollision = description.type === 'offer' && !readyForOffer;
-      negotiationState.ignoreOffer = !this._polite && offerCollision;
-      if (negotiationState.ignoreOffer) {
-        this._debug('ignoring offer due to offer collision');
-        return;
-      }
-      negotiationState.isSettingRemoteAnswerPending = description.type === 'answer';
-      await pc.setRemoteDescription(description);
-      // The "Perfect Negotiation Example" doesn't put this next line inside a `finally` block. It
-      // is unclear whether that is intentional. Fortunately it doesn't matter here: If the above
-      // pc.setRemoteDescription() call throws, _resetConnection() is called to restart the
-      // negotiation anyway.
-      negotiationState.isSettingRemoteAnswerPending = false;
-      if (description.type === 'offer') {
-        await pc.setLocalDescription();
-        this._sendMessage({description: pc.localDescription});
-      }
-    };
-    this._addIceCandidate = async (candidate) => {
-      try {
-        await pc.addIceCandidate(candidate);
-      } catch (err) {
-        if (!negotiationState.ignoreOffer) throw err;
-      }
-    };
-
-    const tracks = this._localTracks.stream.getTracks();
-    for (const track of tracks) {
-      this._debug(`start streaming ${track.kind} track ${track.id}`);
-      pc.addTrack(track, this._localTracks.stream);
+    this._xcvrs = {};
+
+    if (this._caller) {
+      // Adding transceivers triggers negotiation with the peer, which we want to do as soon as
+      // possible to warm up the peer connection (ICE takes a while). Adding a track implicitly adds
+      // a transceiver so we could do that instead, but:
+      //
+      //   * We might not have a local track yet (maybe the user hasn't yet allowed access to the
+      //     camera/mic).
+      //   * Using a dummy silence track until a real track is ready might result in two
+      //     unidirectional SDP m-lines (one in each direction) instead of a single bidirectional
+      //     m-line. This seems to trigger an echo bug in Safari.
+      //
+      // Using transceivers to warm up the connection is the approach taken in:
+      // https://www.w3.org/TR/2021/REC-webrtc-20210126/#advanced-peer-to-peer-example-with-warm-up
+      // Also see: https://webrtcstandards.info/ice-warm-up-m-line-webrtc-transceivers/
+      Promise.all(['audio', 'video'].map(async (t) => {
+        this._debug(`adding ${t} transceiver`);
+        this._xcvrs[t] = this._pc.addTransceiver(t);
+        await this._sendLocalTrack(t, this._localTracks.getTracks(t)[0]);
+      }));
+    } else {
+      // It is possible that the last invite sent to the peer was sent before the peer was ready to
+      // accept invites, so the peer might not know that it should call now. Send another invite
+      // just in case. The peer will ignore any superfluous invites.
+      this._sendMessage({invite: 'invite'});
     }
-    // Creating an RTCPeerConnection doesn't actually generate any control messages until
-    // RTCPeerConnection.addTrack() is called. It is possible that the last invite sent to the peer
-    // was sent before the peer was ready to accept invites. If that is the case and there are no
-    // local tracks to trigger a WebRTC message exchange, the peer won't know that it is OK to
-    // connect back. Send another invite just in case. The peer will ignore any superfluous invites.
-    if (tracks.length === 0) this._sendMessage({invite: 'invite'});
   }
 
   async receiveMessage(msg) {
@@ -374,8 +349,14 @@ class PeerState extends EventTargetPolyfill {
     }
     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);
+      if (description != null) {
+        await this._pc.setRemoteDescription(description);
+        if (description.type === 'offer') {
+          await this._pc.setLocalDescription();
+          this._sendMessage({description: this._pc.localDescription});
+        }
+      }
+      if (candidate != null) await this._pc.addIceCandidate(candidate);
     } catch (err) {
       err.peerMessage = msg;
       console.error('Error processing message from peer:', err);
@@ -396,14 +377,13 @@ class PeerState extends EventTargetPolyfill {
   }
 }
 
-const isPolite = (myId, otherId) => {
-  // Compare user IDs to determine which of the two users is the "polite" user.
-  const polite = myId.localeCompare(otherId) < 0;
-  if ((otherId.localeCompare(myId) < 0) === polite) {
-    // One peer must be polite and the other must be impolite.
+const isCaller = (myId, otherId) => {
+  // Compare user IDs to determine which of the two users will initiate the call.
+  const caller = myId.localeCompare(otherId) < 0;
+  if ((otherId.localeCompare(myId) < 0) === caller) {
     throw new Error(`Peer ID ${otherId} compares equivalent to own ID ${myId}`);
   }
-  return polite;
+  return caller;
 };
 
 // Periods in element IDs make it hard to build a selector string because period is for class match.
@@ -422,17 +402,7 @@ exports.rtc = new class {
   constructor() {
     this._activated = null;
     this._settings = null;
-    this._disabledSilence = (() => {
-      const ctx = new AudioContext();
-      const gain = ctx.createGain();
-      const dst = gain.connect(ctx.createMediaStreamDestination());
-      const track = dst.stream.getAudioTracks()[0];
-      track.enabled = false;
-      return track;
-    })();
-    this._blankStream = new MediaStream([this._disabledSilence]);
     this._localTracks = new LocalTracks();
-    this._localTracks.setTrack(this._disabledSilence.kind, this._disabledSilence);
     this._localTracks.addEventListener('trackchanged', ({oldTrack, newTrack}) => {
       // Normally the self-view UI only needs to be updated if the user clicks on something, but it
       // also needs to be updated if the browser decides to end the local stream for whatever
@@ -657,8 +627,7 @@ exports.rtc = new class {
     try {
       const devices = [];
       const addAudioTrack = updateAudio && this._selfViewButtons.audio.enabled &&
-          !this._localTracks.stream.getAudioTracks().some(
-              (t) => t !== this._disabledSilence && t.readyState === 'live');
+          !this._localTracks.stream.getAudioTracks().some((t) => t.readyState === 'live');
       if (addAudioTrack) devices.push('mic');
       const addVideoTrack = updateVideo && this._selfViewButtons.video.enabled &&
           (!this._localTracks.stream.getVideoTracks().some((t) => t.readyState === 'live') ||
@@ -711,7 +680,7 @@ exports.rtc = new class {
         for (const track of this._localTracks.stream.getAudioTracks()) {
           // Re-check the state of the button because the user might have clicked it while
           // getUserMedia() was running.
-          track.enabled = track !== this._disabledSilence && this._selfViewButtons.audio.enabled;
+          track.enabled = this._selfViewButtons.audio.enabled;
         }
         const hasAudio = this._localTracks.stream.getAudioTracks().some(
             (t) => t.enabled && t.readyState === 'live');
@@ -917,8 +886,9 @@ exports.rtc = new class {
             minWidth: iw > width ? `${iw}px` : '',
             minHeight: nh + ih > height ? `${nh + ih}px` : '',
           });
-        })
-        .appendTo($('#rtcbox'));
+        });
+    if (isLocal) $videoContainer.prependTo($('#rtcbox'));
+    else $videoContainer.appendTo($('#rtcbox'));
     this.updatePeerNameAndColor(this.getUserFromId(userId));
 
     // For tests it is important to know when an asynchronous event handler has finishing handling
@@ -1292,7 +1262,7 @@ exports.rtc = new class {
       _debug('creating PeerState');
       peer = new PeerState(
           {iceServers: this._settings.iceServers},
-          isPolite(this.getUserId(), userId),
+          isCaller(this.getUserId(), userId),
           (msg) => this.sendMessage(userId, msg),
           this._localTracks,
           _debug);
@@ -1315,7 +1285,7 @@ exports.rtc = new class {
         logDisconnectErrorTimeout =
             setTimeout(() => logErrorToServer(new Error('RTC connection lost'), 0), 10000);
         ($videoContainer.data('updateMinSize') || (() => {}))();
-        await this.setStream(userId, this._blankStream);
+        await this.setStream(userId, new MediaStream());
       });
       peer.addEventListener('closed', () => {
         _debug('PeerState closed');