fix(safari): Remove old remote tracks when a new track is received for an endpoint.

On Safari, MediaStream.onremovetrack is not fired when a remote desciption with a removed MSID is applied. As a result, new remote tracks for the same endpoint are not created causing issues where the video is not updated on Safari. Also, make sure local tracks on pc are updated when devices are changed while the user is in muted state.

modules/RTC/TPCUtils.js

@@ -1,7 +1,6 @@
 import { getLogger } from 'jitsi-meet-logger';
 import transform from 'sdp-transform';
 
-import * as JitsiTrackEvents from '../../JitsiTrackEvents';
 import * as MediaType from '../../service/RTC/MediaType';
 import RTCEvents from '../../service/RTC/RTCEvents';
 import browser from '../browser';
@@ -312,6 +311,17 @@ export class TPCUtils {
         if (oldTrack && newTrack) {
             const mediaType = newTrack.getType();
             const stream = newTrack.getOriginalStream();
+
+            // Ignore cases when the track is replaced while the device is in a muted state,like
+            // replacing camera when video muted or replacing mic when audio muted. These JitsiLocalTracks
+            // do not have a mediastream attached. Replace track will be called again when the device is
+            // unmuted and the track will be replaced on the peerconnection then.
+            if (!stream) {
+                this.pc.localTracks.delete(oldTrack.rtcId);
+                this.pc.localTracks.set(newTrack.rtcId, newTrack);
+
+                return Promise.resolve();
+            }
             const track = mediaType === MediaType.AUDIO
                 ? stream.getAudioTracks()[0]
                 : stream.getVideoTracks()[0];
@@ -339,23 +349,20 @@ export class TPCUtils {
                         this.pc._extractPrimarySSRC(ssrc));
                 });
         } else if (oldTrack && !newTrack) {
-            if (!this.removeTrackMute(oldTrack)) {
-                return Promise.reject(new Error('replace track failed'));
-            }
-            this.pc.localTracks.delete(oldTrack.rtcId);
-            this.pc.localSSRCs.delete(oldTrack.rtcId);
+            return this.removeTrackMute(oldTrack)
+                .then(() => {
+                    this.pc.localTracks.delete(oldTrack.rtcId);
+                    this.pc.localSSRCs.delete(oldTrack.rtcId);
+                });
         } else if (newTrack && !oldTrack) {
             const ssrc = this.pc.localSSRCs.get(newTrack.rtcId);
 
-            this.addTrackUnmute(newTrack)
+            return this.addTrackUnmute(newTrack)
                 .then(() => {
-                    newTrack.emit(JitsiTrackEvents.TRACK_MUTE_CHANGED, newTrack);
                     this.pc.localTracks.set(newTrack.rtcId, newTrack);
                     this.pc.localSSRCs.set(newTrack.rtcId, ssrc);
                 });
         }
-
-        return Promise.resolve();
     }
 
     /**

modules/RTC/TraceablePeerConnection.js

@@ -916,6 +916,13 @@ TraceablePeerConnection.prototype._createRemoteTrack = function(
 
     const existingTrack = remoteTracksMap.get(mediaType);
 
+    // Delete the existing track and create the new one because of a known bug on Safari.
+    // RTCPeerConnection.ontrack fires when a new remote track is added but MediaStream.onremovetrack doesn't so
+    // it needs to be removed whenever a new track is received for the same endpoint id.
+    if (existingTrack && browser.isSafari()) {
+        this._remoteTrackRemoved(existingTrack.getOriginalStream(), existingTrack.getTrack());
+    }
+
     if (existingTrack && existingTrack.getTrack() === track) {
         // Ignore duplicated event which can originate either from
         // 'onStreamAdded' or 'onTrackAdded'.
@@ -925,9 +932,7 @@ TraceablePeerConnection.prototype._createRemoteTrack = function(
 
         return;
     } else if (existingTrack) {
-        logger.error(
-            `${this} overwriting remote track for`
-                + `${ownerEndpointId} ${mediaType}`);
+        logger.error(`${this} overwriting remote track for ${ownerEndpointId} ${mediaType}`);
     }
 
     const remoteTrack