fix: [#67] enable joining peers to receive all video streams

src/services/PeerRoom/PeerRoom.ts

@@ -1,6 +1,8 @@
 import { joinRoom, Room, BaseRoomConfig } from 'trystero'
 import { TorrentRoomConfig } from 'trystero/torrent'
 
+import { sleep } from 'utils'
+
 export enum PeerHookType {
   NEW_PEER = 'NEW_PEER',
   AUDIO = 'AUDIO',
@@ -14,6 +16,8 @@ export enum PeerStreamType {
   SCREEN = 'SCREEN',
 }
 
+const streamQueueAddDelay = 500
+
 export class PeerRoom {
   private room: Room
 
@@ -34,6 +38,10 @@ export class PeerRoom {
     Parameters<Room['onPeerStream']>[0]
   > = new Map()
 
+  private streamQueue: (() => Promise<any>)[] = []
+
+  private isProcessingPendingStreams = false
+
   constructor(config: TorrentRoomConfig & BaseRoomConfig, roomId: string) {
     this.roomConfig = config
     this.room = joinRoom(this.roomConfig, roomId)
@@ -109,8 +117,28 @@ export class PeerRoom {
     return this.room.makeAction<T>(namespace)
   }
 
-  addStream: Room['addStream'] = (...args) => {
+  addStream = (...args: Parameters<Room['addStream']>) => {
-    return this.room.addStream(...args)
+    // New streams need to be added as a delayed queue to prevent race
+    // conditions on the receiver's end where streams and their metadata get
+    // mixed up.
+    this.streamQueue.push(
+      () => Promise.all(this.room.addStream(...args)),
+      () => sleep(streamQueueAddDelay)
+    )
+
+    this.processPendingStreams()
+  }
+
+  private processPendingStreams = async () => {
+    if (this.isProcessingPendingStreams) return
+
+    this.isProcessingPendingStreams = true
+
+    while (this.streamQueue.length > 0) {
+      await this.streamQueue.shift()?.()
+    }
+
+    this.isProcessingPendingStreams = false
   }
 
   removeStream: Room['removeStream'] = (stream, targetPeers) => {