✨ new maps

src/model/Remote/Channels/WebRTCChannel.ts

@@ -36,6 +36,17 @@ export class WebRtcChannelCaster extends MessageEmitter implements JsonChannelCa
         });
       }
     }
+    this.peer.onnegotiationneeded = async () => {
+      const offer = await this.peer.createOffer();
+      await this.peer.setLocalDescription(offer);
+      
+      // Send the offer to the remote peer
+      this.channel.send({
+        type: 'RtcOffer',
+        offer
+      });
+      console.log('negotiationneeded');
+    }
   }
 
   private onMessage = (event: MessageEvent) => {
@@ -86,6 +97,10 @@ export class WebRtcChannelCaster extends MessageEmitter implements JsonChannelCa
     this.dataChannel.send(JSON.stringify(data));
   }
 
+  connectVideoStream(stream: MediaStream) {
+    this.peer.addTrack(stream.getVideoTracks()[0], stream);
+  }
+
   disconnect() {
     super.disconnect();
   }
@@ -109,13 +124,28 @@ export class WebRtcChannelSummon extends MessageEmitter implements JsonChannelSu
       }
     }
     this.peer.ontrack = (event) => {
-      console.log('ontrack', event);
-      const audioElement = document.createElement('audio');
-      audioElement.srcObject = event.streams[0];  // Attach the received stream
-      audioElement.play();
-    }
+      event.streams.forEach((stream) => {
+        stream.getTracks().forEach((track) => {
+          if (event.track.kind === 'audio') {
+            console.log('audio track', track);
+            const audioElement = document.createElement('audio');
+            audioElement.srcObject = stream;  // Attach the received stream
+            audioElement.play();
+          } else if (event.track.kind === 'video') {
+            console.log('video track', track);
+            const videoEl = document.getElementById('mainVideo') as HTMLVideoElement;
+            if (videoEl) {
+              videoEl.srcObject = stream;
+              videoEl.play();
+            }
+          }
+        });
+      });
+    };
     this.peer.ondatachannel = (event) => {
-      if (event.channel.label === 'json') {
+      if (event.channel.label === 'video') {
+        this.videoChannel = event.channel;
+      } else if (event.channel.label === 'json') {
         this.dataChannel = event.channel;
         this.dataChannel.addEventListener('message', this.onRtcMessage);
         this.emit({ type: 'connected' });