| 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(); |
|
|