From c29531ea8bead2d25ed03f102f34151113a6d305 Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Tue, 13 Aug 2024 17:13:12 -0500
Subject: [PATCH] Use Calls API V2

---
 app/utils/rxjs/RxjsPeer.client.ts | 70 ++++++++++++++++---------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/utils/rxjs/RxjsPeer.client.ts b/app/utils/rxjs/RxjsPeer.client.ts
index c7c09d81..f7b86d7f 100644
--- a/app/utils/rxjs/RxjsPeer.client.ts
+++ b/app/utils/rxjs/RxjsPeer.client.ts
@@ -169,41 +169,12 @@ export class RxjsPeer {
 	async createSession(peerConnection: RTCPeerConnection) {
 		console.debug('🆕 creating new session')
 		const { apiBase } = this.config
-		// create an offer
-		const offer = await peerConnection.createOffer()
-		// Turn on Opus DTX to save bandwidth
-		offer.sdp = offer.sdp?.replace('useinbandfec=1', 'usedtx=1;useinbandfec=1')
-		// And set the offer as the local description
-		await peerConnection.setLocalDescription(offer)
-		const { sessionId, sessionDescription } =
-			await this.fetchWithRecordedHistory(`${apiBase}/sessions/new?SESSION`, {
+		const { sessionId } = await this.fetchWithRecordedHistory(
+			`${apiBase}/sessions/new?SESSION`,
+			{
 				method: 'POST',
-				body: JSON.stringify({
-					sessionDescription: offer,
-				}),
-			}).then((res) => res.json() as any)
-		const connected = new Promise((res, rej) => {
-			// timeout after 5s
-			setTimeout(rej, 5000)
-			const connectionStateChangeHandler = () => {
-				if (peerConnection.connectionState === 'connected') {
-					peerConnection.removeEventListener(
-						'connectionstatechange',
-						connectionStateChangeHandler
-					)
-					res(undefined)
-				}
 			}
-			peerConnection.addEventListener(
-				'connectionstatechange',
-				connectionStateChangeHandler
-			)
-		})
-
-		// Once both local and remote descriptions are set, the ICE process begins
-		await peerConnection.setRemoteDescription(sessionDescription)
-		// Wait until the peer connection's iceConnectionState is "connected"
-		await connected
+		).then((res) => res.json() as any)
 		return { peerConnection, sessionId }
 	}
 
@@ -276,6 +247,7 @@ export class RxjsPeer {
 								await peerConnection.setRemoteDescription(
 									new RTCSessionDescription(response.sessionDescription)
 								)
+								await connected(peerConnection)
 							}
 
 							return {
@@ -449,8 +421,11 @@ export class RxjsPeer {
 											}),
 										}
 									).then((res) => res.json() as Promise<RenegotiationResponse>)
-								if (renegotiationResponse.errorCode)
+								if (renegotiationResponse.errorCode) {
 									throw new Error(renegotiationResponse.errorDescription)
+								} else {
+									await connected(peerConnection)
+								}
 							}
 
 							return { trackMap }
@@ -583,3 +558,30 @@ async function resolveTrack(
 		peerConnection.addEventListener('track', handler)
 	})
 }
+
+async function connected(peerConnection: RTCPeerConnection) {
+	if (peerConnection.connectionState !== 'connected') {
+		const connected = new Promise((res, rej) => {
+			// timeout after 5s
+			setTimeout(rej, 5000)
+			const connectionStateChangeHandler = () => {
+				if (peerConnection.connectionState === 'connected') {
+					peerConnection.removeEventListener(
+						'connectionstatechange',
+						connectionStateChangeHandler
+					)
+					res(undefined)
+				}
+			}
+			peerConnection.addEventListener(
+				'connectionstatechange',
+				connectionStateChangeHandler,
+				{
+					once: true,
+				}
+			)
+		})
+
+		await connected
+	}
+}