Reuse closed m= sections in Firefox

src/handlers/Firefox60.ts

@@ -333,11 +333,6 @@ export class Firefox60 extends HandlerInterface
 		sendingRemoteRtpParameters.codecs =
 			ortc.reduceCodecs(sendingRemoteRtpParameters.codecs, codec);
 
-		// NOTE: Firefox fails sometimes to properly anticipate the closed media
-		// section that it should use, so don't reuse closed media sections.
-		//   https://github.com/versatica/mediasoup-client/issues/104
-		//
-		// const mediaSectionIdx = this._remoteSdp!.getNextMediaSectionIdx();
 		const transceiver = this._pc.addTransceiver(
 			track, { direction: 'sendonly', streams: [ this._sendStream ] });
 
@@ -373,7 +368,7 @@ export class Firefox60 extends HandlerInterface
 
 		localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
 
-		const offerMediaObject = localSdpObject.media[localSdpObject.media.length - 1];
+		const offerMediaObject = localSdpObject.media[localSdpObject.media.findIndex(s => s.mid == localId)];
 
 		// Set RTCP CNAME.
 		sendingRtpParameters.rtcp.cname =
@@ -422,6 +417,7 @@ export class Firefox60 extends HandlerInterface
 		this._remoteSdp!.send(
 			{
 				offerMediaObject,
+				localSdpMedia       : localSdpObject.media,
 				offerRtpParameters  : sendingRtpParameters,
 				answerRtpParameters : sendingRemoteRtpParameters,
 				codecOptions,
@@ -457,10 +453,7 @@ export class Firefox60 extends HandlerInterface
 
 		transceiver.sender.replaceTrack(null);
 		this._pc.removeTrack(transceiver.sender);
-		// NOTE: Cannot use closeMediaSection() due to the the note above in send()
-		// method.
-		// this._remoteSdp!.closeMediaSection(transceiver.mid);
-		this._remoteSdp!.disableMediaSection(transceiver.mid!);
+		this._remoteSdp!.closeMediaSection(transceiver.mid!);
 
 		const offer = await this._pc.createOffer();
 

src/handlers/sdp/RemoteSdp.ts

@@ -160,6 +160,7 @@ export class RemoteSdp
 		{
 			offerMediaObject,
 			reuseMid,
+			localSdpMedia,
 			offerRtpParameters,
 			answerRtpParameters,
 			codecOptions,
@@ -168,6 +169,7 @@ export class RemoteSdp
 		{
 			offerMediaObject: any;
 			reuseMid?: string;
+			localSdpMedia?: any;
 			offerRtpParameters: RtpParameters;
 			answerRtpParameters: RtpParameters;
 			codecOptions?: ProducerCodecOptions;
@@ -197,7 +199,10 @@ export class RemoteSdp
 		// Unified-Plan or Plan-B with different media kind.
 		else if (!this._midToIndex.has(mediaSection.mid))
 		{
-			this._addMediaSection(mediaSection);
+			if (localSdpMedia)
+				this._syncMediaWithLocalSdp(localSdpMedia, mediaSection);
+			else
+				this._addMediaSection(mediaSection);
 		}
 		// Plan-B with same media kind.
 		else
@@ -442,6 +447,45 @@ export class RemoteSdp
 		}
 	}
 
+	_syncMediaWithLocalSdp(localSdpMedia: any, newMediaSection: MediaSection): void
+	{
+		if (!this._firstMid)
+			this._firstMid = newMediaSection.mid;
+
+		// Append new section to the existing vector and the SDP object
+		let idx = this._mediaSections.length;
+		this._mediaSections.push(newMediaSection);
+		this._sdpObject.media.push(newMediaSection.getObject());
+
+		// Add it to the map
+		this._midToIndex.set(newMediaSection.mid, idx);
+
+		// Copy data to the temporary collections
+		const mediaSections = this._mediaSections.slice(), media = this._sdpObject.media.slice();
+		// Clean up existing collections
+                this._mediaSections.length = this._sdpObject.media.length = 0;
+
+		// Refill media sections vector and SDP object media
+		// using the order of sections in the local SDP offer
+		for (const mediaSection of localSdpMedia)
+		{
+			const i = this._midToIndex.get(String(mediaSection.mid));
+			if (i !== undefined)
+			{
+				this._mediaSections.push(mediaSections[i]);
+				this._sdpObject.media.push(media[i]);
+			}
+		}
+
+		// Recreate map
+		this._midToIndex.clear();
+		for (idx = 0; idx < this._mediaSections.length; ++idx)
+			this._midToIndex.set(this._mediaSections[idx].mid, idx);
+
+		// Regenerate BUNDLE mids.
+		this._regenerateBundleMids();
+	}
+
 	_regenerateBundleMids(): void
 	{
 		if (!this._dtlsParameters)