From ce4902c4771ba0dd9c79206ffed8abc301cf70e2 Mon Sep 17 00:00:00 2001
From: Chandran <chandran0303.cn@gmail.com>
Date: Mon, 8 Jun 2026 13:14:53 +0200
Subject: [PATCH] fix(calibration): don't open cameras until the user turns
 them on
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening or hard-reloading the calibration page used to switch on the
webcam (and any other connected camera) unprompted. The "Attached
cameras" section mounted on page load and ran getUserMedia immediately:
useAvailableCameras fires a `{ video: true }` permission probe to unlock
device labels, and that probe grabs whatever the OS treats as the default
camera — so a camera could light up even after being removed from the
robot's config, with no user action.

Gate the section behind an explicit On/Off toggle, off by default. While
off, CameraConfiguration is not mounted, so nothing touches a camera; the
panel instead explains that turning cameras on will scan connected
devices and trigger the browser permission prompt. Cameras are only
enumerated and previewed once the user opts in, and toggling off unmounts
the section and releases every stream.

Also add a Rescan button next to the camera list so a newly plugged-in
USB camera can be picked up on demand instead of waiting for the
hotplug auto-refresh.
---
 .../recording/CameraConfiguration.tsx         | 25 ++++++--
 frontend/src/pages/Calibration.tsx            | 58 +++++++++++++++++--
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/recording/CameraConfiguration.tsx b/frontend/src/components/recording/CameraConfiguration.tsx
index 75cf925f..ec1809fc 100644
--- a/frontend/src/components/recording/CameraConfiguration.tsx
+++ b/frontend/src/components/recording/CameraConfiguration.tsx
@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
 import { NumberInput } from "@/components/ui/number-input";
-import { Camera, Plus, X, VideoOff } from "lucide-react";
+import { Camera, Plus, X, VideoOff, RefreshCw } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { useAvailableCameras } from "@/hooks/useAvailableCameras";
 import { useCameraStream } from "@/hooks/useCameraStream";
@@ -42,6 +42,7 @@ const CameraConfiguration: React.FC<CameraConfigurationProps> = ({
   const {
     cameras: availableCameras,
     isLoading: isLoadingCameras,
+    refresh: refreshCameras,
   } = useAvailableCameras();
   const [selectedCameraIndex, setSelectedCameraIndex] = useState<string>("");
   const [cameraName, setCameraName] = useState("");
@@ -176,9 +177,25 @@ const CameraConfiguration: React.FC<CameraConfigurationProps> = ({
 
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div className="space-y-2">
-            <Label className="text-sm font-medium text-gray-300">
-              Available Cameras
-            </Label>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium text-gray-300">
+                Available Cameras
+              </Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => refreshCameras()}
+                disabled={isLoadingCameras}
+                className="h-6 w-6 text-gray-400 hover:text-white"
+                title="Rescan for cameras (e.g. after plugging in a new USB camera)"
+                aria-label="Rescan for cameras"
+              >
+                <RefreshCw
+                  className={`w-3.5 h-3.5 ${isLoadingCameras ? "animate-spin" : ""}`}
+                />
+              </Button>
+            </div>
             <Select
               value={selectedCameraIndex}
               onValueChange={setSelectedCameraIndex}
diff --git a/frontend/src/pages/Calibration.tsx b/frontend/src/pages/Calibration.tsx
index 24d67a82..fceead17 100644
--- a/frontend/src/pages/Calibration.tsx
+++ b/frontend/src/pages/Calibration.tsx
@@ -14,6 +14,7 @@ import {
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import {
   ArrowLeft,
   Settings,
@@ -25,6 +26,8 @@ import {
   Play,
   Square,
   Circle,
+  Camera,
+  ShieldQuestion,
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import Logo from "@/components/Logo";
@@ -85,6 +88,10 @@ const Calibration = () => {
   const [port, setPort] = useState<string>("");
   const [robot, setRobot] = useState<RobotRecord | null>(null);
   const [cameras, setCameras] = useState<CameraConfig[]>([]);
+  // Off by default so merely opening the calibration page never grabs a camera.
+  // The user explicitly starts a scan, which is when cameras are turned on,
+  // enumerated, and the browser permission prompt is requested.
+  const [camerasActive, setCamerasActive] = useState(false);
   const cameraSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const fetchRobot = useCallback(async (): Promise<RobotRecord | null> => {
@@ -869,17 +876,58 @@ const Calibration = () => {
 
         {robotName && (
           <Card className="bg-slate-800/60 border-slate-700 backdrop-blur-sm mt-6">
-            <CardHeader>
+            <CardHeader className="flex-row items-center justify-between space-y-0">
               <CardTitle className="flex items-center gap-2 text-slate-200">
                 <Settings className="w-5 h-5 text-blue-400" />
                 Attached cameras
               </CardTitle>
+              <div className="flex items-center gap-2">
+                <Label
+                  htmlFor="cameras-toggle"
+                  className="text-sm text-slate-400 cursor-pointer"
+                >
+                  {camerasActive ? "On" : "Off"}
+                </Label>
+                <Switch
+                  id="cameras-toggle"
+                  checked={camerasActive}
+                  onCheckedChange={setCamerasActive}
+                  className="data-[state=checked]:bg-green-500"
+                  aria-label="Turn cameras on or off"
+                />
+              </div>
             </CardHeader>
             <CardContent>
-              <CameraConfiguration
-                cameras={cameras}
-                onCamerasChange={handleCamerasChange}
-              />
+              {camerasActive ? (
+                <CameraConfiguration
+                  cameras={cameras}
+                  onCamerasChange={handleCamerasChange}
+                />
+              ) : (
+                <div className="rounded-lg border border-slate-700 bg-slate-900/40 p-6 text-center space-y-3">
+                  <Camera className="w-10 h-10 mx-auto text-slate-500" />
+                  <div className="space-y-1">
+                    <p className="text-slate-200 font-medium">Cameras are off</p>
+                    <p className="text-sm text-slate-400 max-w-md mx-auto">
+                      Turn cameras on to scan for connected devices and preview
+                      them. The browser may briefly open a camera to read device
+                      labels, and configured cameras stay active while previews
+                      are visible; your browser will ask for camera permission.
+                      Nothing is recorded.
+                    </p>
+                    {cameras.length > 0 && (
+                      <p className="text-xs text-slate-500 pt-1">
+                        {cameras.length} camera
+                        {cameras.length === 1 ? "" : "s"} saved to this robot.
+                      </p>
+                    )}
+                  </div>
+                  <p className="flex items-center justify-center gap-1.5 text-xs text-slate-500">
+                    <ShieldQuestion className="w-3.5 h-3.5" />
+                    You'll be asked to grant camera access.
+                  </p>
+                </div>
+              )}
             </CardContent>
           </Card>
         )}