64 lines
2.1 KiB
HTML
64 lines
2.1 KiB
HTML
<!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>
|