# 07 · Tauri v1 Webcam WebSocket A two-window Tauri v1 example that keeps HTML controls separate from live camera capture and raw WebGL rendering. ```text controls.html │ parameter batches / camera commands ▼ ws://127.0.0.1:2727 │ embedded Rust relay ▼ canvas.html │ getUserMedia → video → texImage2D ▼ GLSL effect → ping-pong history → output ``` ## What this demonstrates - Two Tauri v1 WebViews with explicit `controls` and `canvas` roles - An embedded Rust WebSocket relay - Camera capture inside the same WebView that owns WebGL - Pre-permission device enumeration and post-permission labels - Restartable camera selection and capture presets - Camera frames uploaded with `gl.texImage2D()` - Six GLSL camera effects - Persistent ping-pong feedback - Separate effect and blit programs - Reconnect-safe parameter and camera state synchronization - Output FPS, camera FPS, resolution, GPU, shader, and camera telemetry ## Requirements - Rust and Cargo - Node.js and npm - macOS: Xcode command-line tools - A camera or virtual camera for live-input testing ## Development ```bash npm install npm run dev ``` Approve camera permission when requested. The output displays a generated calibration field until a camera is running. ## Production build ```bash npm install npm run build ``` The macOS production bundles are created under: ```text src-tauri/target/release/bundle/ ``` Unsigned local builds may be stopped by Gatekeeper on another Mac. Distribution requires the normal Apple signing and notarization process. ## Window responsibilities ### Controls window - Owns the current visual parameter state - Requests camera start, stop, restart, and device enumeration - Sends parameter batches once per animation frame - Restores the complete state when the output reconnects - Displays renderer and camera telemetry ### Output window - Owns `navigator.mediaDevices.getUserMedia()` - Owns the hidden `