A demo does not need a tunnel; it needs the laptop's own camera

Asked after the mobile-internet question: could a VPN let the office cameras
be shown in the demo. Three jobs get confused there and only one needs one.

Seeing the estate from anywhere already works and needs nothing - viewer mode
plus LiveHub is exactly that, outbound, no installation and no credential.

Demonstrating recognition is better done on the demo machine's own camera.
`webcam: 0` picks a capture index instead of building an RTSP URL and the
engine has supported it since the first version: CameraStore round-trips it,
source() returns the index, safe_url() reports webcam:0, and
POST /api/cameras {"id":"laptop","webcam":0} has always worked. No screen
offered it - the same gap this repo already records for the customer record
and per-camera tuning. It is now an option in the make picker, and it is the
strongest demo available: real faces, in the room, depending on no network.
A demo pointed at a camera in another building depends on two internet
connections and a tunnel staying up while somebody is talking.

The address and the index are alternatives, not extras: source() takes the
webcam first, so a half-typed host left behind would make the saved camera
describe two things and use one. The scan, the path and the camera password
are hidden for a local camera because none of them mean anything.

A tunnel is still right for one case - running the engine on a remote machine
against the office's own cameras - and still wrong for the product: it is
per-site infrastructure on every shop PC, and it gives head office
network-level access into a customer's LAN, where today we can read a
camera's picture and nothing else.

Also: installing httpx took the suite from 239 passed to 271. The HTTP tests
importorskip it so a bare checkout runs, which means the number at the bottom
of a run is not the number of tests that exist. Added to the dev extra.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KGcjxF1cNLcuwc3DAPcnfj

desktop/frontend/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Behavision</title>
-    <script type="module" crossorigin src="./assets/index-6LYbNlbD.js"></script>
+    <script type="module" crossorigin src="./assets/index-DSNu_2FW.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-DOJ2bRrM.css">
   </head>
   <body>

desktop/frontend/src/views/Cameras.jsx

@@ -14,6 +14,18 @@ import { MAKES, makeById } from '../../../../shared/cameraMakes.js'
 // signed off through.
 const BLANK = { id: '', host: '', port: 554, path: '', username: '', password: '', max_width: 1280 }
 
+// "This computer's own camera" - a webcam or a built-in FaceTime camera.
+//
+// The engine has supported it since the first version (`webcam: 0` picks a
+// capture index instead of building an RTSP URL) and no screen has ever
+// offered it: another case of the API being able to do something the UI
+// could not reach. It matters most for the thing it was missing from, which
+// is showing the product to somebody. A laptop's own camera gives real
+// recognition, of real faces, in the room, depending on no network at all -
+// where pointing a demo machine at a camera in another building depends on
+// two internet connections and a tunnel staying up while you talk.
+const WEBCAM = 'webcam'
+
 export default function Cameras() {
   const { data, error, reload } = usePolled(() => api.cameras(), 8000)
   const [editing, setEditing] = useState(null)
@@ -190,7 +202,9 @@ function useStreamURLs(cams) {
 function CameraSheet({ cam, onClose, onSaved }) {
   const isNew = !cam.id
   const [f, setF] = useState({ ...BLANK, ...cam, password: '', path: cam.path || (isNew ? MAKES[0].path : '') })
-  const [make, setMake] = useState(isNew ? MAKES[0].id : 'manual')
+  const [make, setMake] = useState(isNew ? MAKES[0].id : (cam.webcam != null ? WEBCAM : 'manual'))
+  const [index, setIndex] = useState(cam.webcam != null ? String(cam.webcam) : '0')
+  const local = make === WEBCAM
   const [test, setTest] = useState(null)
   const [busy, setBusy] = useState(null)
   const [error, setError] = useState(null)
@@ -199,6 +213,7 @@ function CameraSheet({ cam, onClose, onSaved }) {
   // Only overwrite the path when the preset has one, so choosing "I know the
   // path" does not wipe what the installer already typed.
   function chooseMake(e) {
+    if (e.target.value === WEBCAM) { setMake(WEBCAM); setTest(null); return }
     const m = makeById(e.target.value)
     setMake(m.id)
     setF(prev => ({ ...prev, path: m.path || prev.path }))
@@ -212,6 +227,14 @@ function CameraSheet({ cam, onClose, onSaved }) {
       if (v === '' || v === null || v === undefined) continue
       out[k] = (k === 'port' || k === 'max_width') ? Number(v) : v
     }
+    if (local) {
+      // An address and a webcam index are alternatives, not extras: the
+      // engine's source() takes the webcam first, so leaving a half-typed
+      // host behind would make the saved camera describe two different
+      // things and only one of them would be used.
+      for (const k of ['host', 'path', 'username', 'password']) delete out[k]
+      out.webcam = Number(index) || 0
+    }
     return out
   }
 
@@ -259,7 +282,7 @@ function CameraSheet({ cam, onClose, onSaved }) {
           <p className="lead">Three things from the camera: its address, its make, and its password. Test before you save — a wrong address is the most common mistake.</p>
           {error && <div className="err"><Icon.Warning size={15} />{error}</div>}
 
-          {isNew && (
+          {isNew && !local && (
             <section className="formsection">
               <h4>Find it</h4>
               {scan === null && (
@@ -301,15 +324,20 @@ function CameraSheet({ cam, onClose, onSaved }) {
                 <em className="hint">Short, no spaces. It names this camera everywhere and cannot be changed later.</em>
               </label>
             )}
-            <div className="fieldrow">
-              <label className="field"><span>Address</span>
-                <input value={f.host} onChange={set('host')} placeholder="192.168.1.20" inputMode="decimal" />
-                <em className="hint">On a label on the camera, or in its own app under “network”.</em>
-              </label>
-              <label className="field narrow"><span>Port</span>
-                <input value={f.port} onChange={set('port')} inputMode="numeric" />
-              </label>
-            </div>
+            {local
+              ? <label className="field narrow"><span>Camera number</span>
+                  <input value={index} onChange={e => { setIndex(e.target.value); setTest(null) }} inputMode="numeric" />
+                  <em className="hint">0 is the built-in camera. Try 1 if a second one is plugged in.</em>
+                </label>
+              : <div className="fieldrow">
+                  <label className="field"><span>Address</span>
+                    <input value={f.host} onChange={set('host')} placeholder="192.168.1.20" inputMode="decimal" />
+                    <em className="hint">On a label on the camera, or in its own app under “network”.</em>
+                  </label>
+                  <label className="field narrow"><span>Port</span>
+                    <input value={f.port} onChange={set('port')} inputMode="numeric" />
+                  </label>
+                </div>}
           </section>
 
           <section className="formsection">
@@ -317,27 +345,34 @@ function CameraSheet({ cam, onClose, onSaved }) {
             <label className="field"><span>Make of camera</span>
               <select value={make} onChange={chooseMake}>
                 {MAKES.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
+                <option value={WEBCAM}>This computer’s own camera</option>
               </select>
-              {chosen.note && <em className="hint">{chosen.note}</em>}
-            </label>
-            <label className="field"><span>Stream path</span>
-              <input className="mono" value={f.path} onChange={set('path')} placeholder="/Streaming/Channels/101" />
-              <em className="hint">Filled in from the make. Change it only if the camera’s own app says something else.</em>
+              {local
+                ? <em className="hint">Recognition runs on this computer’s built-in or plugged-in camera. Nothing on the network is involved.</em>
+                : chosen.note && <em className="hint">{chosen.note}</em>}
             </label>
+            {!local && (
+              <label className="field"><span>Stream path</span>
+                <input className="mono" value={f.path} onChange={set('path')} placeholder="/Streaming/Channels/101" />
+                <em className="hint">Filled in from the make. Change it only if the camera’s own app says something else.</em>
+              </label>
+            )}
           </section>
 
-          <section className="formsection">
-            <h4>Sign-in to the camera</h4>
-            <div className="fieldrow">
-              <label className="field"><span>Username</span>
-                <input name="rtsp-account" autoComplete="off" value={f.username} onChange={set('username')} placeholder="admin" />
-              </label>
-              <label className="field"><span>Password</span>
-                <input type="password" name="rtsp-secret" autoComplete="new-password" value={f.password}
-                       onChange={set('password')} placeholder={cam.has_password ? '(unchanged)' : ''} />
-              </label>
-            </div>
-          </section>
+          {!local && (
+            <section className="formsection">
+              <h4>Sign-in to the camera</h4>
+              <div className="fieldrow">
+                <label className="field"><span>Username</span>
+                  <input name="rtsp-account" autoComplete="off" value={f.username} onChange={set('username')} placeholder="admin" />
+                </label>
+                <label className="field"><span>Password</span>
+                  <input type="password" name="rtsp-secret" autoComplete="new-password" value={f.password}
+                         onChange={set('password')} placeholder={cam.has_password ? '(unchanged)' : ''} />
+                </label>
+              </div>
+            </section>
+          )}
 
           {test && (
             test.ok