Add image and streaming from USB camera

Plus a little freshen up of the readme's
2026-05-07 16:38:36 +00:00
parent 59a019ed7b
commit ef78f19e72
18 changed files with 1080 additions and 327 deletions
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head><title>WebRTC Camera</title></head>
+<body>
+  <form id="connectForm">
+    <input id="host" type="text" placeholder="raspbot-v2.local" style="width:220px" />
+    <button type="submit">Connect</button>
+  </form>
+  <video id="video" autoplay playsinline muted style="width:640px;display:none"></video>
+  <script>
+    const form  = document.getElementById("connectForm");
+    const video = document.getElementById("video");
+
+    // Persist the last-used host across page reloads
+    const hostInput = document.getElementById("host");
+    hostInput.value = localStorage.getItem("webrtcHost") || location.hostname || "";
+
+    let pc, ws;
+
+    function disconnect() {
+      if (ws)  ws.close();
+      if (pc)  pc.close();
+      video.style.display = "none";
+    }
+
+    form.addEventListener("submit", e => {
+      e.preventDefault();
+      const host = hostInput.value.trim();
+      if (!host) return;
+      localStorage.setItem("webrtcHost", host);
+
+      disconnect();
+      video.style.display = "";
+
+      pc = new RTCPeerConnection({});
+      ws = new WebSocket(`ws://${host}:8443`);
+
+      pc.ontrack = e => video.srcObject = e.streams[0];
+
+      pc.onicecandidate = e => {
+        if (e.candidate)
+          ws.send(JSON.stringify({ type: "ice", mlineindex: e.candidate.sdpMLineIndex, candidate: e.candidate.candidate }));
+      };
+
+      ws.onmessage = async ({ data }) => {
+        const msg = JSON.parse(data);
+        console.log(data);
+        if (msg.type === "offer") {
+          await pc.setRemoteDescription({ type: "offer", sdp: msg.sdp });
+          const answer = await pc.createAnswer();
+          await pc.setLocalDescription(answer);
+          ws.send(JSON.stringify({ type: "answer", sdp: answer.sdp }));
+        } else if (msg.type === "ice") {
+          await pc.addIceCandidate({ sdpMLineIndex: msg.mlineindex, candidate: msg.candidate });
+        }
+      };
+
+      ws.onerror = () => { alert(`Could not connect to ws://${host}:8443`); video.style.display = "none"; };
+      ws.onclose = () => video.style.display = "none";
+    });
+  </script>
+</body>
+</html>