Revert camera dropdown; add PEER_LINKS for sibling Pis
The dropdown allowed switching the video feed but PTT always pointed at this Pi's local speaker, so picking a non-co-located camera could have let a user talk into the wrong room. Each Pi is now hardcoded to the camera at its own location via CAMERA_NAME, with optional PEER_LINKS to render quick-jump buttons to sibling doorbell Pis at other URLs. https://claude.ai/code/session_013XZ1vmgk78k2PEQ5DmJhF3
This commit is contained in:
Claude
+27
-8
@@ -54,22 +54,41 @@ experience.
|
||||
|
||||
## Choosing the camera
|
||||
|
||||
`server.py` near the top has the list of cameras the page offers:
|
||||
Each Pi is hardcoded to one camera -- the one whose mic and speaker are
|
||||
physically co-located with this Pi. The PTT button on this page only
|
||||
talks to *this* Pi's speaker, so mixing cameras here would let a misclick
|
||||
talk into the wrong room.
|
||||
|
||||
`server.py` near the top:
|
||||
```python
|
||||
CAMERAS = ["front_door"]
|
||||
CAMERA_NAME = "front_door"
|
||||
```
|
||||
|
||||
Each name must match a `go2rtc.streams` entry in
|
||||
The name must match a `go2rtc.streams` entry in
|
||||
`frigate_config/config.yml` and the camera must be `enabled: true` in
|
||||
Frigate. With more than one entry the page shows a dropdown above the
|
||||
talk button; the choice is remembered per-browser in `localStorage`. The
|
||||
first entry is the default for new visitors.
|
||||
|
||||
After editing:
|
||||
Frigate. After editing:
|
||||
```bash
|
||||
sudo systemctl restart doorbell
|
||||
```
|
||||
|
||||
## Multiple doorbell Pis
|
||||
|
||||
Run one copy of this app per Pi, each on its own subdomain (e.g.
|
||||
`frontdoor.yourdomain.com`, `backdoor.yourdomain.com`). Add a Caddy
|
||||
block per subdomain pointing at that Pi's LAN IP -- same shape as the
|
||||
existing `doorbell.yourdomain.com` block in `../caddy/Caddyfile`.
|
||||
|
||||
To render quick-jump buttons to the other Pis at the top of the page,
|
||||
fill in `PEER_LINKS` near the top of `server.py`:
|
||||
```python
|
||||
PEER_LINKS = [
|
||||
{"label": "Back door", "url": "https://backdoor.yourdomain.com"},
|
||||
{"label": "Squirrel", "url": "https://squirrel.yourdomain.com"},
|
||||
]
|
||||
```
|
||||
Leave it as `[]` (the default) and the row is hidden. Restart with
|
||||
`sudo systemctl restart doorbell` after editing.
|
||||
|
||||
## Audio stack
|
||||
|
||||
ALSA-only -- no PipeWire/PulseAudio. Lighter on the Pi Zero. If you ever
|
||||
|
||||
+35
-41
@@ -20,10 +20,17 @@ from flask_sock import Sock
|
||||
app = Flask(__name__)
|
||||
sock = Sock(app)
|
||||
|
||||
# Cameras to offer in the page's dropdown. First entry is the default.
|
||||
# Names must match go2rtc stream names in frigate_config/config.yml and
|
||||
# the corresponding camera must be enabled in Frigate.
|
||||
CAMERAS = ["front_door"]
|
||||
# Camera this Pi corresponds to. Must match a go2rtc stream name in
|
||||
# frigate_config/config.yml. The PTT button talks to the speaker physically
|
||||
# attached to this Pi, so this should be the camera at the same location.
|
||||
CAMERA_NAME = "front_door"
|
||||
|
||||
# Optional jump-links to sibling doorbell Pis (each running its own copy of
|
||||
# this app, hardcoded to its own camera). Rendered as a row of buttons above
|
||||
# the PTT button when non-empty. Leave empty if there are no other Pis.
|
||||
PEER_LINKS = [
|
||||
# {"label": "Back door", "url": "https://backdoor.yourdomain.com"},
|
||||
]
|
||||
|
||||
PAGE = """<!doctype html>
|
||||
<html lang="en">
|
||||
@@ -51,9 +58,9 @@ PAGE = """<!doctype html>
|
||||
.row{display:flex;gap:8px}
|
||||
.row button{flex:1;padding:10px;background:#333;color:#fff;border:none;
|
||||
border-radius:8px;font-size:13px}
|
||||
.row select{flex:1;padding:10px;background:#333;color:#fff;border:none;
|
||||
border-radius:8px;font-size:14px;appearance:none;-webkit-appearance:none;
|
||||
text-align:center;text-align-last:center}
|
||||
.row a{flex:1;padding:10px;background:#333;color:#fff;border-radius:8px;
|
||||
font-size:13px;text-decoration:none;text-align:center;
|
||||
display:flex;align-items:center;justify-content:center}
|
||||
#status{font-size:12px;color:#888;text-align:center;min-height:1em}
|
||||
</style>
|
||||
</head>
|
||||
@@ -63,9 +70,7 @@ PAGE = """<!doctype html>
|
||||
<video id="cam" autoplay playsinline muted></video>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<div class="row" id="camrow" style="display:none">
|
||||
<select id="camsel"></select>
|
||||
</div>
|
||||
<div class="row" id="peers" style="display:none"></div>
|
||||
<button id="ptt" disabled>Connecting...</button>
|
||||
<div class="row">
|
||||
<button id="unmute">Unmute camera</button>
|
||||
@@ -78,43 +83,33 @@ PAGE = """<!doctype html>
|
||||
|
||||
<script>
|
||||
// ---- CONFIG ---------------------------------------------------------
|
||||
const CAMERAS = {{ cameras|tojson }};
|
||||
const CAMERA_NAME = {{ camera_name|tojson }};
|
||||
const PEERS = {{ peers|tojson }};
|
||||
const FRIGATE_WEBRTC_URL = "/frigate/api/go2rtc/api/webrtc?src=" + encodeURIComponent(CAMERA_NAME);
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
const $ = id => document.getElementById(id);
|
||||
const ptt = $('ptt'), status = $('status'), video = $('cam'),
|
||||
unmute = $('unmute'), reload = $('reload'), wake = $('wake'),
|
||||
camsel = $('camsel'), camrow = $('camrow');
|
||||
peersRow = $('peers');
|
||||
|
||||
let ws, mediaRecorder, micStream, wakeLock = null, pc = null;
|
||||
let ws, mediaRecorder, micStream, wakeLock = null;
|
||||
|
||||
const log = m => { status.textContent = m; console.log('[doorbell]', m); };
|
||||
|
||||
let currentCamera = localStorage.getItem('camera');
|
||||
if (!CAMERAS.includes(currentCamera)) currentCamera = CAMERAS[0];
|
||||
|
||||
for (const c of CAMERAS) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = c; opt.textContent = c;
|
||||
if (c === currentCamera) opt.selected = true;
|
||||
camsel.appendChild(opt);
|
||||
}
|
||||
if (CAMERAS.length > 1) camrow.style.display = 'flex';
|
||||
|
||||
camsel.onchange = () => {
|
||||
currentCamera = camsel.value;
|
||||
localStorage.setItem('camera', currentCamera);
|
||||
startVideo(currentCamera);
|
||||
};
|
||||
|
||||
async function startVideo(camera){
|
||||
if (pc) {
|
||||
try { pc.close(); } catch(e){}
|
||||
pc = null;
|
||||
if (PEERS.length) {
|
||||
for (const p of PEERS) {
|
||||
const a = document.createElement('a');
|
||||
a.href = p.url;
|
||||
a.textContent = p.label;
|
||||
peersRow.appendChild(a);
|
||||
}
|
||||
video.srcObject = null;
|
||||
peersRow.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function startVideo(){
|
||||
try {
|
||||
pc = new RTCPeerConnection();
|
||||
const pc = new RTCPeerConnection();
|
||||
pc.addTransceiver('video', {direction:'recvonly'});
|
||||
pc.addTransceiver('audio', {direction:'recvonly'});
|
||||
pc.ontrack = e => { video.srcObject = e.streams[0]; };
|
||||
@@ -123,8 +118,7 @@ async function startVideo(camera){
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
const url = '/frigate/api/go2rtc/api/webrtc?src=' + encodeURIComponent(camera);
|
||||
const resp = await fetch(url, {
|
||||
const resp = await fetch(FRIGATE_WEBRTC_URL, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/sdp'},
|
||||
body: pc.localDescription.sdp,
|
||||
@@ -133,7 +127,7 @@ async function startVideo(camera){
|
||||
if(!resp.ok) throw new Error('Frigate returned ' + resp.status);
|
||||
const answer = await resp.text();
|
||||
await pc.setRemoteDescription({type:'answer', sdp: answer});
|
||||
log('Camera connected: ' + camera);
|
||||
log('Camera connected');
|
||||
} catch(e){ log('Video error: ' + e.message); }
|
||||
}
|
||||
|
||||
@@ -216,7 +210,7 @@ ptt.addEventListener('mousedown', startTalking);
|
||||
ptt.addEventListener('mouseup', stopTalking);
|
||||
ptt.addEventListener('mouseleave', stopTalking);
|
||||
|
||||
startVideo(currentCamera);
|
||||
startVideo();
|
||||
setupPTT();
|
||||
</script>
|
||||
</body>
|
||||
@@ -226,7 +220,7 @@ setupPTT();
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return render_template_string(PAGE, cameras=CAMERAS)
|
||||
return render_template_string(PAGE, camera_name=CAMERA_NAME, peers=PEER_LINKS)
|
||||
|
||||
|
||||
@app.route('/healthz')
|
||||
|
||||
Reference in New Issue
Block a user