Add suport for Safari 11 and Microsoft Edge

app/lib/components/RemoteVideo.jsx

@@ -104,7 +104,7 @@ export default class RemoteVideo extends React.Component
 		let videoTrack = this.props.stream.getVideoTracks()[0];
 		let videoEnabled = videoTrack && videoTrack.enabled;
 		let stream = this.props.stream;
-		let msid = stream.id;
+		let msid = stream.jitsiRemoteId || stream.id;
 
 		if (videoEnabled)
 		{

app/lib/components/Room.jsx

@@ -41,6 +41,9 @@ export default class Room extends React.Component
 		this._client = null;
 		// Timer to retrieve RTC stats.
 		this._statsTimer = null;
+
+		// TODO: TMP
+		global.ROOM = this;
 	}
 
 	render()
@@ -221,6 +224,13 @@ export default class Room extends React.Component
 	{
 		logger.debug('handleLocalResolutionChange()');
 
+		if (!utils.canChangeResolution())
+		{
+			logger.warn('changing local resolution not implemented for this browser');
+
+			return;
+		}
+
 		this._client.changeVideoResolution();
 	}
 
@@ -395,8 +405,23 @@ export default class Room extends React.Component
 
 			let peers = this.state.peers;
 
+			peer = peers[peer.id];
+			if (!peer)
+				return;
+
 			delete peers[peer.id];
-			this.setState({ peers });
+
+			// NOTE: This shouldn't be needed but Safari 11 does not fire pc "removestream"
+			// nor stream "removetrack" nor track "ended", so we need to cleanup remote
+			// streams when a peer leaves.
+			let remoteStreams = this.state.remoteStreams;
+
+			for (let msid of peer.msids)
+			{
+				delete remoteStreams[msid];
+			}
+
+			this.setState({ peers, remoteStreams });
 		});
 
 		this._client.on('connectionstate', (state) =>
@@ -407,16 +432,18 @@ export default class Room extends React.Component
 		this._client.on('addstream', (stream) =>
 		{
 			let remoteStreams = this.state.remoteStreams;
+			let streamId = stream.jitsiRemoteId || stream.id;
 
-			remoteStreams[stream.id] = stream;
+			remoteStreams[streamId] = stream;
 			this.setState({ remoteStreams });
 		});
 
 		this._client.on('removestream', (stream) =>
 		{
 			let remoteStreams = this.state.remoteStreams;
+			let streamId = stream.jitsiRemoteId || stream.id;
 
-			delete remoteStreams[stream.id];
+			delete remoteStreams[streamId];
 			this.setState({ remoteStreams });
 		});
 

app/lib/components/Stats.jsx

@@ -96,6 +96,8 @@ export default class Stats extends React.Component
 
 	_processStats(stats)
 	{
+		// global.STATS = stats; // TODO: REMOVE
+
 		if (browser.check({ chrome: '58' }, true))
 		{
 			this._processStatsChrome58(stats);
@@ -108,6 +110,10 @@ export default class Stats extends React.Component
 		{
 			this._processStatsFirefox(stats);
 		}
+		else if (browser.check({ safari: '11' }, true))
+		{
+			this._processStatsSafari11(stats);
+		}
 		else
 		{
 			logger.warn('_processStats() | unsupported browser [name:"%s", version:%s]',
@@ -388,9 +394,6 @@ export default class Stats extends React.Component
 
 		for (let group of stats.values())
 		{
-			// TODO: REMOVE
-			global.STATS = stats;
-
 			switch (group.type)
 			{
 				case 'candidate-pair':
@@ -489,6 +492,87 @@ export default class Stats extends React.Component
 			}
 		});
 	}
+
+	_processStatsSafari11(stats)
+	{
+		let transport = {};
+		let audio = {};
+		let video = {};
+
+		for (let group of stats.values())
+		{
+			switch (group.type)
+			{
+				case 'candidate-pair':
+				{
+					if (!group.writable)
+						break;
+
+					transport['bytes sent'] = group.bytesSent;
+					transport['bytes received'] = group.bytesReceived;
+					transport['available bitrate'] =
+						Math.round(group.availableOutgoingBitrate / 1000) + ' kbps';
+					transport['current RTT'] =
+						Math.round(group.currentRoundTripTime * 1000) + ' ms';
+
+					break;
+				}
+
+				case 'outbound-rtp':
+				{
+					if (group.isRemote)
+						break;
+
+					let block;
+
+					switch (group.mediaType)
+					{
+						case 'audio':
+							block = audio;
+							break;
+						case 'video':
+							block = video;
+							break;
+					}
+
+					if (!block)
+						break;
+
+					block['ssrc'] = group.ssrc;
+					block['bytes sent'] = group.bytesSent;
+					block['packets sent'] = group.packetsSent;
+
+					if (block === video)
+						block['frames encoded'] = group.framesEncoded;
+
+					block['NACK count'] = group.nackCount;
+					block['PLI count'] = group.pliCount;
+					block['FIR count'] = group.firCount;
+
+					break;
+				}
+			}
+		}
+
+		// Post checks.
+
+		if (!video.ssrc)
+			video = {};
+
+		if (!audio.ssrc)
+			audio = {};
+
+		// Set state.
+		this.setState(
+		{
+			stats :
+			{
+				transport,
+				audio,
+				video
+			}
+		});
+	}
 }
 
 Stats.propTypes =

app/lib/components/Video.jsx

@@ -161,7 +161,9 @@ export default class Video extends React.Component
 		return stream.getTracks()
 			.map((track) =>
 			{
-				return track.id;
+				let trackId = track.jitsiRemoteId || track.id;
+
+				return trackId;
 			})
 			.join('|');
 	}