kkkmeet/public/app.js

const localVideo = document.querySelector("#local-video");
const localNameLabel = document.querySelector("#local-name");
const remoteGrid = document.querySelector("#remote-grid");
const remoteTemplate = document.querySelector("#remote-template");
const nameForm = document.querySelector("#name-form");
const nameInput = document.querySelector("#name-input");
const statusText = document.querySelector("#status");
const cameraButton = document.querySelector("#camera-button");
const micButton = document.querySelector("#mic-button");
const shareButton = document.querySelector("#share-button");
const leaveButton = document.querySelector("#leave-button");

const roomId = "main";
const nameStorageKey = "kkkmeet.displayName";
const rtcConfig = {
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
};

let peerId = "";
let displayName = "";
let localStream;
let screenStream;
let events;
const peers = new Map();

function setStatus(message) {
  statusText.textContent = message;
}

function normalizeName(name) {
  return name.trim().replace(/\s+/g, " ").slice(0, 48);
}

function setDisplayName(nextName) {
  displayName = normalizeName(nextName);
  localStorage.setItem(nameStorageKey, displayName);
  nameInput.value = displayName;
  localNameLabel.textContent = displayName ? `${displayName} (you)` : "You";
}

function labelForPeer(peer) {
  return peer?.name || `Participant ${peer?.id?.slice(0, 4) || ""}`.trim();
}

async function ensureLocalStream() {
  if (localStream) return localStream;

  localStream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: { width: { ideal: 1280 }, height: { ideal: 720 } }
  });
  localVideo.srcObject = localStream;
  return localStream;
}

function updateRemoteLabel(id, name) {
  const label = document.querySelector(`[data-peer-id="${id}"] span`);
  if (label) label.textContent = name || `Participant ${id.slice(0, 4)}`;
}

function createRemoteTile(peer) {
  const id = typeof peer === "string" ? peer : peer.id;
  const fragment = remoteTemplate.content.cloneNode(true);
  const tile = fragment.querySelector(".tile");
  const video = fragment.querySelector("video");
  const label = fragment.querySelector("span");
  tile.dataset.peerId = id;
  label.textContent = labelForPeer(typeof peer === "string" ? { id } : peer);
  remoteGrid.append(tile);
  return { tile, video };
}

function removeRemoteTile(id) {
  document.querySelector(`[data-peer-id="${id}"]`)?.remove();
}

async function sendSignal(to, payload) {
  await fetch(`/signal/${encodeURIComponent(roomId)}`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ ...payload, from: peerId, to, name: displayName })
  });
}

function createPeerConnection(remotePeer) {
  const remotePeerId = typeof remotePeer === "string" ? remotePeer : remotePeer.id;
  if (peers.has(remotePeerId)) {
    updateRemoteLabel(remotePeerId, remotePeer.name);
    return peers.get(remotePeerId).connection;
  }

  const connection = new RTCPeerConnection(rtcConfig);
  const remoteStream = new MediaStream();
  const { video } = createRemoteTile(remotePeer);
  video.srcObject = remoteStream;

  localStream.getTracks().forEach((track) => {
    connection.addTrack(track, localStream);
  });

  connection.ontrack = (event) => {
    event.streams[0].getTracks().forEach((track) => {
      remoteStream.addTrack(track);
    });
  };

  connection.onicecandidate = (event) => {
    if (event.candidate) {
      sendSignal(remotePeerId, { type: "ice-candidate", candidate: event.candidate });
    }
  };

  connection.onconnectionstatechange = () => {
    if (["closed", "disconnected", "failed"].includes(connection.connectionState)) {
      closePeer(remotePeerId);
    }
  };

  peers.set(remotePeerId, { connection, remoteStream, name: remotePeer.name });
  return connection;
}

async function callPeer(remotePeer) {
  const remotePeerId = typeof remotePeer === "string" ? remotePeer : remotePeer.id;
  const connection = createPeerConnection(remotePeer);
  const offer = await connection.createOffer();
  await connection.setLocalDescription(offer);
  await sendSignal(remotePeerId, { type: "offer", description: connection.localDescription });
}

async function answerPeer(message) {
  const connection = createPeerConnection({ id: message.from, name: message.name });
  await connection.setRemoteDescription(message.description);
  const answer = await connection.createAnswer();
  await connection.setLocalDescription(answer);
  await sendSignal(message.from, { type: "answer", description: connection.localDescription });
}

async function handleSignal(message) {
  if (message.type === "welcome") {
    peerId = message.peerId;
    setStatus(`Joined the call as ${displayName}. ${message.peers.length} other participant(s).`);
    for (const existingPeer of message.peers) {
      await callPeer(existingPeer);
    }
    return;
  }

  if (message.type === "peer-joined") {
    updateRemoteLabel(message.peerId, message.name);
    setStatus(`${message.name || "A participant"} joined.`);
    return;
  }

  if (message.type === "peer-left") {
    closePeer(message.peerId);
    setStatus("A participant left.");
    return;
  }

  if (message.type === "offer") {
    await answerPeer(message);
    return;
  }

  const connection = peers.get(message.from)?.connection;
  if (!connection) return;

  if (message.type === "answer") {
    await connection.setRemoteDescription(message.description);
  }

  if (message.type === "ice-candidate") {
    await connection.addIceCandidate(message.candidate);
  }
}

function closePeer(remotePeerId) {
  const peer = peers.get(remotePeerId);
  if (!peer) return;

  peer.connection.close();
  peers.delete(remotePeerId);
  removeRemoteTile(remotePeerId);
}

async function joinCall() {
  if (!displayName) {
    setStatus("Enter your name to join the call.");
    nameInput.focus();
    return;
  }

  leaveCall();
  await ensureLocalStream();

  const params = new URLSearchParams({ name: displayName });
  events = new EventSource(`/events/${encodeURIComponent(roomId)}?${params}`);
  events.onmessage = (event) => handleSignal(JSON.parse(event.data)).catch(console.error);
  events.onerror = () => setStatus("Connection to signaling server was interrupted.");
  setStatus(`Joining as ${displayName}...`);
}

function leaveCall() {
  events?.close();
  events = undefined;
  peerId = "";
  for (const remotePeerId of peers.keys()) closePeer(remotePeerId);
  setStatus(displayName ? `Ready as ${displayName}.` : "Enter your name to join the call.");
}

function setTrackEnabled(kind, enabled) {
  localStream?.getTracks().forEach((track) => {
    if (track.kind === kind) track.enabled = enabled;
  });
}

nameForm.addEventListener("submit", (event) => {
  event.preventDefault();
  setDisplayName(nameInput.value);
  joinCall().catch((error) => {
    console.error(error);
    setStatus("Could not start camera or join the call.");
  });
});

nameInput.addEventListener("change", () => {
  setDisplayName(nameInput.value);
  if (events) {
    joinCall().catch((error) => {
      console.error(error);
      setStatus("Could not rejoin with the updated name.");
    });
  }
});

cameraButton.addEventListener("click", () => {
  const enabled = cameraButton.getAttribute("aria-pressed") !== "true";
  cameraButton.setAttribute("aria-pressed", String(enabled));
  setTrackEnabled("video", enabled);
});

micButton.addEventListener("click", () => {
  const enabled = micButton.getAttribute("aria-pressed") !== "true";
  micButton.setAttribute("aria-pressed", String(enabled));
  setTrackEnabled("audio", enabled);
});

shareButton.addEventListener("click", async () => {
  if (!localStream) return;

  screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  const screenTrack = screenStream.getVideoTracks()[0];

  for (const { connection } of peers.values()) {
    const sender = connection.getSenders().find((item) => item.track?.kind === "video");
    await sender?.replaceTrack(screenTrack);
  }

  localVideo.srcObject = screenStream;
  screenTrack.onended = async () => {
    const cameraTrack = localStream.getVideoTracks()[0];
    for (const { connection } of peers.values()) {
      const sender = connection.getSenders().find((item) => item.track?.kind === "video");
      await sender?.replaceTrack(cameraTrack);
    }
    localVideo.srcObject = localStream;
  };
});

leaveButton.addEventListener("click", leaveCall);

const savedName = localStorage.getItem(nameStorageKey);
if (savedName) {
  setDisplayName(savedName);
  joinCall().catch((error) => {
    console.error(error);
    setStatus("Could not start camera or join the call.");
  });
} else {
  nameInput.focus();
}