pharpend/fewd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add webrtc grok demo

Browse Source
This commit is contained in:
Peter Harpending 2026-02-04 21:59:37 -08:00
parent 8d5320e4e5
commit ce7b8a1ccd
3 changed files with 167 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
priv/static/index.html
View File

@ -17,6 +17,7 @@
<ul> <ul>
<li><a href="/echo.html">Echo</a></li> <li><a href="/echo.html">Echo</a></li>
<li><a href="/webrtc.html">WebRTC</a></li>
<li><a href="/wfc.html">WFC</a></li> <li><a href="/wfc.html">WFC</a></li>
</ul> </ul>
</div> </div>

1
priv/static/js/ts/webrtc.ts Normal file
View File

@ -0,0 +1 @@
/**

165
priv/static/webrtc.html Normal file
View File

@ -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>