Reuse closed m= sections in Firefox

src/handlers/Firefox120.ts

@@ -363,12 +363,6 @@ export class Firefox120
 			});
 		}
 
-		// 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],
@@ -439,7 +433,7 @@ export class Firefox120
 		localSdpObject = sdpTransform.parse(this._pc.localDescription!.sdp);
 
 		const offerMediaObject =
-			localSdpObject.media[localSdpObject.media.length - 1]!;
+			localSdpObject.media[localSdpObject.media.findIndex((s) => s.mid == localId)]!;
 
 		// Set RTCP CNAME.
 		sendingRtpParameters.rtcp!.cname = sdpCommonUtils.getCname({
@@ -491,6 +485,7 @@ export class Firefox120
 
 		this._remoteSdp.send({
 			offerMediaObject,
+			localSdpMedia : localSdpObject.media,
 			offerRtpParameters: sendingRtpParameters,
 			answerRtpParameters: sendingRemoteRtpParameters,
 			codecOptions,
@@ -535,20 +530,17 @@ export class Firefox120
 
 		void transceiver.sender.replaceTrack(null);
 
-		// NOTE: Cannot use stop() the transceiver due to the the note above in
-		// send() method.
-		// try
-		// {
-		// 	transceiver.stop();
-		// }
-		// catch (error)
-		// {}
-
 		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!);
+
+		const mediaSectionClosed = this._remoteSdp.closeMediaSection(
+			transceiver.mid!
+		);
+
+		if (mediaSectionClosed) {
+			try {
+				transceiver.stop();
+			} catch (error) {}
+		}
 
 		const offer = await this._pc.createOffer();
 

src/handlers/sdp/RemoteSdp.ts

@@ -154,12 +154,14 @@ export class RemoteSdp {
 	send({
 		offerMediaObject,
 		reuseMid,
+		localSdpMedia,
 		offerRtpParameters,
 		answerRtpParameters,
 		codecOptions,
 	}: {
 		offerMediaObject: SdpTransform.MediaDescription;
 		reuseMid?: string;
+		localSdpMedia?: SdpTransform.MediaDescription[];
 		offerRtpParameters: RtpParameters;
 		answerRtpParameters: RtpParameters;
 		codecOptions?: ProducerCodecOptions;
@@ -197,7 +199,12 @@ 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 {
@@ -414,6 +421,51 @@ export class RemoteSdp {
 		}
 	}
 
+	private syncMediaWithLocalSdp(
+		localSdpMedia: SdpTransform.MediaDescription[],
+		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();
+		const 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();
+	}
+
 	private findMediaSection(mid: string): MediaSection {
 		const idx = this._midToIndex.get(mid);