Create script.js

public/script.js

@@ -0,0 +1,88 @@
+const socket = io();
+
+const urlParams = new URLSearchParams(window.location.search);
+const roomId = urlParams.get("room");
+const name = urlParams.get("name");
+
+document.getElementById("roomTitle").innerText = "Room: " + roomId;
+
+let localStream;
+let peers = {};
+
+async function start() {
+  localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+  socket.emit("join-room", { roomId, name });
+
+  socket.on("all-users", (users) => {
+    for (let id in users) {
+      if (id !== socket.id) createPeer(id);
+      addUser(users[id]);
+    }
+  });
+
+  socket.on("user-joined", ({ id, name }) => {
+    createPeer(id);
+    addUser(name);
+  });
+
+  socket.on("signal", async ({ from, data }) => {
+    if (!peers[from]) createPeer(from, false);
+
+    if (data.sdp) {
+      await peers[from].setRemoteDescription(data.sdp);
+      if (data.sdp.type === "offer") {
+        const answer = await peers[from].createAnswer();
+        await peers[from].setLocalDescription(answer);
+        socket.emit("signal", { to: from, data: { sdp: peers[from].localDescription } });
+      }
+    }
+
+    if (data.candidate) {
+      await peers[from].addIceCandidate(data.candidate);
+    }
+  });
+
+  socket.on("user-left", (id) => {
+    if (peers[id]) peers[id].close();
+  });
+}
+
+function createPeer(id, initiator = true) {
+  const peer = new RTCPeerConnection();
+
+  localStream.getTracks().forEach(track => peer.addTrack(track, localStream));
+
+  peer.onicecandidate = (e) => {
+    if (e.candidate) {
+      socket.emit("signal", {
+        to: id,
+        data: { candidate: e.candidate }
+      });
+    }
+  };
+
+  peer.ontrack = (e) => {
+    const audio = document.createElement("audio");
+    audio.srcObject = e.streams[0];
+    audio.autoplay = true;
+    document.body.appendChild(audio);
+  };
+
+  peers[id] = peer;
+
+  if (initiator) {
+    peer.createOffer().then(offer => {
+      peer.setLocalDescription(offer);
+      socket.emit("signal", { to: id, data: { sdp: offer } });
+    });
+  }
+}
+
+function addUser(name) {
+  const div = document.createElement("div");
+  div.innerText = "👤 " + name;
+  document.getElementById("users").appendChild(div);
+}
+
+start();