Update simple_real_time.html

Author: Luckson-dev

simple_real_time.html

@@ -16,12 +16,13 @@ <h1>Video Call</h1>
     <script src="https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js"></script>
     <script>
       const localVideo = document.getElementById('localVideo');
-      const remoteVideo = document.getElementById('remoteVideo');
+      const remoteVideos = document.getElementById('remoteVideos');
       const joinButton = document.getElementById('joinButton');
       const roomIdInput = document.getElementById('roomId');
 
       let localStream;
       let peer;
+      let connections = [];
 
       joinButton.onclick = async () => {
         const roomId = roomIdInput.value;
@@ -37,23 +38,37 @@ <h1>Video Call</h1>
         // Initialize PeerJS
         peer = new Peer();
 
-        // Listen for call event
-        peer.on('call', call => {
-          call.answer(localStream); // Answer the call with our local stream
-          call.on('stream', stream => {
-            remoteVideo.srcObject = stream; // Show stream in remote video element
-          });
+        peer.on('open', id => {
+          // Connect to the signaling server (use WebSocket, Firebase, etc.)
+          // For simplicity, we assume there's a way to get a list of peers in the room
+          fetch(`https://your-server.com/peers-in-room?roomId=${roomId}`)
+            .then(response => response.json())
+            .then(peers => {
+              peers.forEach(peerId => {
+                if (peerId !== id) {
+                  const call = peer.call(peerId, localStream);
+                  call.on('stream', addRemoteStream);
+                  connections.push(call);
+                }
+              });
+            });
         });
 
-        // Connect to the room
-        const conn = peer.connect(roomId);
-        conn.on('open', () => {
-          const call = peer.call(roomId, localStream);
-          call.on('stream', stream => {
-            remoteVideo.srcObject = stream; // Show stream in remote video element
-          });
+        // Listen for incoming calls
+        peer.on('call', call => {
+          call.answer(localStream); // Answer the call with our local stream
+          call.on('stream', addRemoteStream);
+          connections.push(call);
         });
       };
+      
+      function addRemoteStream(stream) {
+        const videoElement = document.createElement('video');
+        videoElement.srcObject = stream;
+        videoElement.autoplay = true;
+        videoElement.playsInline = true;
+        remoteVideos.appendChild(videoElement);
+      }
     </script>
 </body>
-</html>
+</html>