add webrtc grok demo

2026-02-04 21:59:37 -08:00 · 2026-02-04 21:59:37 -08:00 · ce7b8a1ccd
commit ce7b8a1ccd
parent 8d5320e4e5
3 changed files with 167 additions and 0 deletions
--- a/priv/static/index.html
+++ b/priv/static/index.html
@ -17,6 +17,7 @@

        <ul>
            <li><a href="/echo.html">Echo</a></li>
+            <li><a href="/webrtc.html">WebRTC</a></li>
            <li><a href="/wfc.html">WFC</a></li>
        </ul>
    </div>
--- a/priv/static/js/ts/webrtc.ts
+++ b/priv/static/js/ts/webrtc.ts
@ -0,0 +1 @@
+/**
--- a/priv/static/webrtc.html
+++ b/priv/static/webrtc.html
@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Super Simple WebRTC – Manual Signaling</title>
+  <style>
+    body { font-family: sans-serif; margin: 20px; }
+    textarea { width: 100%; height: 90px; font-family: monospace; }
+    button { margin: 6px 0; padding: 8px 16px; }
+    video { max-width: 320px; border: 1px solid #444; margin: 8px; background: #000; }
+  </style>
+</head>
+<body>
+
+<h2>WebRTC 1:1 test (copy-paste signaling)</h2>
+
+<div>
+  <button id="btnCreateOffer">1. Create Offer (Peer A)</button>
+  <button id="btnSetRemoteOffer">2. Paste offer → Set remote description</button><br>
+  <textarea id="offerSdp" placeholder="Offer SDP will appear here (Peer A) or paste offer here (Peer B)"></textarea>
+</div>
+
+<div style="margin-top: 24px;">
+  <button id="btnCreateAnswer">3. Create Answer (Peer B)</button>
+  <button id="btnSetRemoteAnswer">4. Paste answer → Set remote description</button><br>
+  <textarea id="answerSdp" placeholder="Answer SDP will appear here (Peer B) or paste answer here (Peer A)"></textarea>
+</div>
+
+<div style="margin-top: 20px;">
+  <button id="btnAddIce">Add ICE candidate manually (if needed)</button><br>
+  <textarea id="iceInput" placeholder="Paste remote ICE candidate here"></textarea>
+  <div id="iceLog"></div>
+</div>
+
+<div style="margin-top: 20px;">
+  <video id="localVideo" autoplay playsinline muted></video>
+  <video id="remoteVideo" autoplay playsinline></video>
+</div>
+
+<pre id="status">Status: ready</pre>
+
+<script>
+// ────────────────────────────────────────────────
+const $ = s => document.querySelector(s);
+const status = $('pre#status');
+const offerArea  = $('#offerSdp');
+const answerArea = $('#answerSdp');
+const iceInput   = $('#iceInput');
+const iceLog     = $('#iceLog');
+
+let pc = null;
+let localStream = null;
+
+// ────────────────────────────────────────────────
+async function initPeerConnection() {
+  if (pc) pc.close();
+
+  pc = new RTCPeerConnection({
+    iceServers: [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun.stunprotocol.org" }
+    ]
+  });
+
+  pc.onicecandidate = e => {
+    if (e.candidate) {
+      console.log("New ICE candidate:", e.candidate);
+      iceLog.innerHTML += "<div style='color:#c33'>→ " + e.candidate.candidate + "</div>";
+    }
+  };
+
+  pc.oniceconnectionstatechange = () => { status.textContent = "ICE state: " + pc.iceConnectionState;
+  };
+
+  pc.ontrack = e => {
+    console.log("ontrack", e);
+    const remoteVideo = $('#remoteVideo');
+    remoteVideo.srcObject = e.streams[0];
+    status.textContent = "ICE state: " + pc.iceConnectionState + " (receiving media!)";
+  };
+
+  // Add local stream if we have camera/mic
+  if (localStream) {
+    localStream.getTracks().forEach(track => {
+      pc.addTrack(track, localStream);
+    });
+  }
+}
+
+// ────────────────────────────────────────────────
+async function startLocalCamera() {
+  try {
+    localStream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: false    // change to true if you want audio too
+    });
+    $('#localVideo').srcObject = localStream;
+  } catch (err) {
+    console.error("Camera access failed", err);
+    status.textContent = "Camera access failed: " + err.message;
+  }
+}
+
+// ────────────────────────────────────────────────
+$('#btnCreateOffer').onclick = async () => {
+  await initPeerConnection();
+  await startLocalCamera();
+
+  const offer = await pc.createOffer();
+  await pc.setLocalDescription(offer);
+
+  offerArea.value = JSON.stringify(pc.localDescription, null, 2);
+  status.textContent = "Offer created – copy and send to peer B";
+};
+
+// ────────────────────────────────────────────────
+$('#btnCreateAnswer').onclick = async () => {
+  await initPeerConnection();
+  await startLocalCamera();
+
+  const offer = JSON.parse(offerArea.value);
+  await pc.setRemoteDescription(offer);
+
+  const answer = await pc.createAnswer();
+  await pc.setLocalDescription(answer);
+
+  answerArea.value = JSON.stringify(pc.localDescription, null, 2);
+  status.textContent = "Answer created – copy and send to peer A";
+};
+
+// ────────────────────────────────────────────────
+$('#btnSetRemoteOffer').onclick = async () => {
+  if (!pc) await initPeerConnection();
+
+  const remote = JSON.parse(offerArea.value);
+  await pc.setRemoteDescription(remote);
+  status.textContent = "Remote offer set";
+};
+
+// ────────────────────────────────────────────────
+$('#btnSetRemoteAnswer').onclick = async () => {
+  const remote = JSON.parse(answerArea.value);
+  await pc.setRemoteDescription(remote);
+  status.textContent = "Remote answer set – waiting for ICE/media";
+};
+
+// ────────────────────────────────────────────────
+$('#btnAddIce').onclick = async () => {
+  if (!iceInput.value.trim()) return;
+  try {
+    const candidate = new RTCIceCandidate(JSON.parse(iceInput.value));
+    await pc.addIceCandidate(candidate);
+    iceLog.innerHTML += "<div style='color:#3a3'>← added ICE candidate</div>";
+    iceInput.value = "";
+  } catch (err) {
+    console.error("Bad ICE candidate", err);
+  }
+};
+
+// Optional: auto-start camera when page loads
+// startLocalCamera();
+
+</script>
+</body>
+</html>