bugfix: order of event listener in webRTC (#24)

Author: hangnguyensaigontech

demo/WebRTC/src/screens/HomeComponent/HomeScreen.tsx

@@ -95,6 +95,15 @@ export const HomeScreen: React.FC<Props> = () => {
               // init PeerConnection
               const peerConnection = new RTCPeerConnection(peerConstraints)
 
+              // get location of connection between requester and current user
+              const connectionsCollection = roomRef.collection(FirestoreCollections.connections)
+              const connectionRef = connectionsCollection.doc(`${data.requester}-${createdUserName}`)
+
+              // create answerCandidates collection
+              const answerCandidatesCollection = connectionRef.collection(
+                FirestoreCollections.answerCandidates,
+              )
+
               // add current user's stream to created PC (Peer Connection)
               localStream?.getTracks().forEach(track => {
                 peerConnection.addTrack(track, localStream)
@@ -114,9 +123,12 @@ export const HomeScreen: React.FC<Props> = () => {
                 })
               })
 
-              // get location of connection between requester and current user
-              const connectionsCollection = roomRef.collection(FirestoreCollections.connections)
-              const connectionRef = connectionsCollection.doc(`${data.requester}-${createdUserName}`)
+              // add current user's ICE Candidates to answerCandidates collection
+              peerConnection.addEventListener('icecandidate', event => {
+                if (event.candidate) {
+                  answerCandidatesCollection.add(event.candidate.toJSON())
+                }
+              })
 
               // get data from requester-user's connection
               const connectionData = (await connectionRef.get()).data()
@@ -136,18 +148,6 @@ export const HomeScreen: React.FC<Props> = () => {
               }
               await connectionRef.update({answer})
 
-              // create answerCandidates collection
-              const answerCandidatesCollection = connectionRef.collection(
-                FirestoreCollections.answerCandidates,
-              )
-
-              // add current user's ICE Candidates to answerCandidates collection
-              peerConnection.addEventListener('icecandidate', event => {
-                if (event.candidate) {
-                  answerCandidatesCollection.add(event.candidate.toJSON())
-                }
-              })
-
               // collect Offer's ICE candidates from offerCandidates collection and add in PC
               connectionRef
                 .collection(FirestoreCollections.offerCandidates)
@@ -191,9 +191,22 @@ export const HomeScreen: React.FC<Props> = () => {
           },
         }))
 
+        // init participant's remoteStream to add track data from Peer Connection later
+        setRemoteStreams(prev => ({
+          ...prev,
+          [participant.name]: new MediaStream([]),
+        }))
+
         // init peer connection
         const peerConnection = new RTCPeerConnection(peerConstraints)
 
+        // create connection between current user and participant
+        const connectionsCollection = roomRef.collection(FirestoreCollections.connections)
+        const connectionRef = connectionsCollection.doc(`${createdUserName}-${participant.name}`)
+
+        // create offerCandidates collection
+        const offerCandidatesCollection = connectionRef.collection(FirestoreCollections.offerCandidates)
+
         // add current user's stream to created PC (Peer Connection)
         localStream?.getTracks().forEach(track => {
           peerConnection.addTrack(track, localStream)
@@ -213,15 +226,12 @@ export const HomeScreen: React.FC<Props> = () => {
           })
         })
 
-        // init participant's remoteStream to add track data from Peer Connection later
-        setRemoteStreams(prev => ({
-          ...prev,
-          [participant.name]: new MediaStream([]),
-        }))
-
-        // create connection between current user and participant
-        const connectionsCollection = roomRef.collection(FirestoreCollections.connections)
-        const connectionRef = connectionsCollection.doc(`${createdUserName}-${participant.name}`)
+        // add current user's ICE Candidates to offerCandidates collection
+        peerConnection.addEventListener('icecandidate', event => {
+          if (event.candidate) {
+            offerCandidatesCollection.add(event.candidate.toJSON())
+          }
+        })
 
         // create offer SDP and set localDescription
         const offerDescription = await peerConnection.createOffer(sessionConstraints)
@@ -249,16 +259,6 @@ export const HomeScreen: React.FC<Props> = () => {
           }
         })
 
-        // create offerCandidates collection
-        const offerCandidatesCollection = connectionRef.collection(FirestoreCollections.offerCandidates)
-
-        // add current user's ICE Candidates to offerCandidates collection
-        peerConnection.addEventListener('icecandidate', event => {
-          if (event.candidate) {
-            offerCandidatesCollection.add(event.candidate.toJSON())
-          }
-        })
-
         // add listener to answerCandidates collection to participant's ICE Candidates
         connectionRef.collection(FirestoreCollections.answerCandidates).onSnapshot(iceCandidatesSnapshot => {
           iceCandidatesSnapshot.docChanges().forEach(async change => {