diff --git a/README.md b/README.md
index a50e968f3..f511dfbc6 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,21 @@ A page will automatically open in your browser and you are ready to go.
   </table>
 </div>
 
+## Camera rotation
+
+If a camera is mounted upside down or sideways, select its **Rotation** in the camera setup on the Calibration page.
+Choose 0°, 90°, 180°, or 270° clockwise. For an upside-down wrist camera, choose 180°.
+
+LeLab saves the rotation for each camera. Setup and teleoperation previews, recorded frames, and inference use the selected rotation.
+Profiles without a rotation setting use 0°.
+
+The resolution setting describes the camera's capture resolution. A 90° or 270° rotation swaps the output dimensions.
+For example, a 640 × 480 capture becomes a 480 × 640 observation. The preview shows the complete rotated frame.
+
+Before inference, select the same rotation used for the training dataset. Check it again if you change the camera binding.
+Checkpoint image dimensions do not establish image orientation. For example, 0° and 180° have the same dimensions.
+The setting applies to new observations; it does not change existing recordings or checkpoints.
+
 ## Resources
 
 - **[LeRobot](https://github.com/huggingface/lerobot):** the underlying library — go here for everything beyond the UI.
diff --git a/frontend/src/components/control/BrowserCameraPreview.test.tsx b/frontend/src/components/control/BrowserCameraPreview.test.tsx
new file mode 100644
index 000000000..6617378ae
--- /dev/null
+++ b/frontend/src/components/control/BrowserCameraPreview.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import CameraRotationSelect from "./CameraRotationSelect";
+vi.mock("@/hooks/useCameraStream", () => ({ useCameraStream: () => ({ videoRef: React.createRef<HTMLVideoElement>(), hasError: false }) }));
+let root: Root;
+let container: HTMLDivElement;
+beforeEach(() => { Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true }); container = document.createElement("div"); root = createRoot(container); });
+afterEach(() => act(() => root.unmount()));
+test("the Rotation control exposes four clockwise values and emits a number", () => {
+  const change = vi.fn();
+  act(() => root.render(<CameraRotationSelect rotation={180} onChange={change} />));
+  const select = container.querySelector("select")!;
+  expect(container.querySelector("label")!.htmlFor).toBe(select.id);
+  expect(select.value).toBe("180");
+  expect(Array.from(select.options).map((option) => option.text)).toEqual(["0° clockwise", "90° clockwise", "180° clockwise", "270° clockwise"]);
+  act(() => { select.value = "90"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+  expect(change).toHaveBeenCalledWith(90);
+});
+test("a quarter turn fits the whole non-square frame and uses actual stream dimensions", () => {
+  act(() => root.render(<BrowserCameraPreview deviceId="wrist" rotation={90} width={640} height={480} />));
+  const video = container.querySelector("video")!, wrapper = video.parentElement!;
+  expect(wrapper.style.aspectRatio).toBe("480 / 640");
+  expect(video.style.objectFit).toBe("contain");
+  expect(video.style.maxWidth).toBe("none");
+  expect(video.style.transform).toBe("translate(-50%, -50%) rotate(90deg)");
+  expect(parseFloat(video.style.width)).toBeCloseTo(640 / 480 * 100);
+  expect(parseFloat(video.style.height)).toBeCloseTo(480 / 640 * 100);
+  Object.defineProperty(video, "videoWidth", { value: 1280 });
+  Object.defineProperty(video, "videoHeight", { value: 720 });
+  act(() => video.dispatchEvent(new Event("loadedmetadata")));
+  expect(wrapper.style.aspectRatio).toBe("720 / 1280");
+  expect(parseFloat(video.style.width)).toBeCloseTo(1280 / 720 * 100);
+  expect(parseFloat(video.style.height)).toBeCloseTo(720 / 1280 * 100);
+});
+test("device reassignment does not reuse the old device's frame geometry", () => {
+  act(() => root.render(<BrowserCameraPreview deviceId="A" rotation={270} />));
+  const video = container.querySelector("video")!;
+  Object.defineProperty(video, "videoWidth", { value: 1920 });
+  Object.defineProperty(video, "videoHeight", { value: 1080 });
+  act(() => video.dispatchEvent(new Event("loadedmetadata")));
+  act(() => root.render(<BrowserCameraPreview deviceId="B" rotation={180} width={640} height={480} />));
+  expect(video.parentElement!.style.aspectRatio).toBe("640 / 480");
+  expect(video.style.width).toBe("100%");
+  expect(video.style.transform).toContain("rotate(180deg)");
+});
diff --git a/frontend/src/components/control/BrowserCameraPreview.tsx b/frontend/src/components/control/BrowserCameraPreview.tsx
new file mode 100644
index 000000000..0ec1a8a28
--- /dev/null
+++ b/frontend/src/components/control/BrowserCameraPreview.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { VideoOff } from "lucide-react";
+import { useCameraStream } from "@/hooks/useCameraStream";
+import { CameraRotation, cameraPreviewGeometry, cameraRotationError } from "@/lib/cameraConfig";
+
+interface Props {
+  deviceId: string;
+  paused?: boolean;
+  rotation?: CameraRotation;
+  width?: number;
+  height?: number;
+  className?: string;
+  fallback?: string;
+}
+
+/** Browser streams contain raw frames, so only browser previews use CSS rotation. */
+export default function BrowserCameraPreview({
+  deviceId,
+  paused = false,
+  rotation = 0,
+  width = 640,
+  height = 480,
+  className = "",
+  fallback,
+}: Props) {
+  const rotationError = cameraRotationError({ rotation });
+  const { videoRef, hasError } = useCameraStream(deviceId, paused || !!rotationError);
+  const [metadata, setMetadata] = useState<{ deviceId: string; width: number; height: number } | null>(null);
+  const dimensions = metadata?.deviceId === deviceId ? metadata : { width, height };
+  const geometry = rotationError
+    ? { aspectRatio: `${width} / ${height}`, videoStyle: {} }
+    : cameraPreviewGeometry(dimensions.width, dimensions.height, rotation);
+  const showVideo = !rotationError && !paused && deviceId && !hasError;
+  return (
+    <div
+      className={`relative overflow-hidden bg-gray-800 ${className}`}
+      style={{ aspectRatio: geometry.aspectRatio }}
+    >
+      {showVideo ? (
+        <video
+          ref={videoRef}
+          autoPlay
+          muted
+          playsInline
+          style={geometry.videoStyle}
+          onLoadedMetadata={(event) => {
+            const video = event.currentTarget;
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+              setMetadata({ deviceId, width: video.videoWidth, height: video.videoHeight });
+            }
+          }}
+        />
+      ) : (
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <VideoOff className="w-5 h-5 text-gray-500 mb-1" />
+          <span className="text-xs text-gray-500">
+            {rotationError ?? fallback ?? (paused ? "Preview paused" : deviceId ? "Preview failed" : "No camera selected")}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/control/CameraFeed.tsx b/frontend/src/components/control/CameraFeed.tsx
index c1d3cbc85..ccf3a333a 100644
--- a/frontend/src/components/control/CameraFeed.tsx
+++ b/frontend/src/components/control/CameraFeed.tsx
@@ -1,46 +1,22 @@
 import React from "react";
-import { VideoOff } from "lucide-react";
-import { useCameraStream } from "@/hooks/useCameraStream";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import { CameraRotation } from "@/lib/cameraConfig";
 
 interface CameraFeedProps {
-  /** Browser deviceId to stream. Empty string renders the "no camera" state. */
   deviceId: string;
-  /** Optional caption shown under the feed. */
   label?: string;
+  rotation?: CameraRotation;
+  width?: number;
+  height?: number;
 }
 
-/** Live browser-camera feed bound to a deviceId via getUserMedia. */
-const CameraFeed: React.FC<CameraFeedProps> = ({ deviceId, label }) => {
-  const { videoRef, hasError } = useCameraStream(deviceId, false);
-  const showVideo = deviceId && !hasError;
-
-  return (
-    <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
-      <div className="aspect-[4/3] bg-gray-800 relative">
-        {showVideo ? (
-          <video
-            ref={videoRef}
-            autoPlay
-            muted
-            playsInline
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex flex-col items-center justify-center">
-            <VideoOff className="w-8 h-8 text-gray-500 mb-2" />
-            <span className="text-gray-500 text-sm">
-              {deviceId ? "Preview failed" : "No camera selected"}
-            </span>
-          </div>
-        )}
-      </div>
-      {label && (
-        <div className="p-2 text-sm text-gray-300 truncate border-t border-gray-800">
-          {label}
-        </div>
-      )}
-    </div>
-  );
-};
+const CameraFeed: React.FC<CameraFeedProps> = ({ deviceId, label, rotation, width, height }) => (
+  <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
+    <BrowserCameraPreview deviceId={deviceId} rotation={rotation} width={width} height={height} />
+    {label && (
+      <div className="p-2 text-sm text-gray-300 truncate border-t border-gray-800">{label}</div>
+    )}
+  </div>
+);
 
 export default CameraFeed;
diff --git a/frontend/src/components/control/CameraRotationSelect.tsx b/frontend/src/components/control/CameraRotationSelect.tsx
new file mode 100644
index 000000000..a664eb862
--- /dev/null
+++ b/frontend/src/components/control/CameraRotationSelect.tsx
@@ -0,0 +1,30 @@
+import React, { useId } from "react";
+import { Label } from "@/components/ui/label";
+import { CAMERA_ROTATIONS, CameraRotation, cameraRotation } from "@/lib/cameraConfig";
+
+interface Props {
+  rotation: CameraRotation | null;
+  onChange: (rotation: CameraRotation) => void;
+  disabled?: boolean;
+}
+
+export default function CameraRotationSelect({ rotation, onChange, disabled }: Props) {
+  const id = useId();
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <Label htmlFor={id} className="text-gray-400">Rotation</Label>
+      <select
+        id={id}
+        value={rotation ?? ""}
+        disabled={disabled}
+        onChange={(event) => onChange(cameraRotation(Number(event.target.value)))}
+        className="bg-gray-800 border border-gray-700 rounded text-white text-xs h-7 px-2"
+      >
+        {rotation === null && <option value="" disabled>Choose rotation</option>}
+        {CAMERA_ROTATIONS.map((angle) => (
+          <option key={angle} value={angle}>{angle}° clockwise</option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/frontend/src/components/control/RecordingCameraFeed.test.tsx b/frontend/src/components/control/RecordingCameraFeed.test.tsx
new file mode 100644
index 000000000..a00049334
--- /dev/null
+++ b/frontend/src/components/control/RecordingCameraFeed.test.tsx
@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test } from "vitest";
+import RecordingCameraFeed from "./RecordingCameraFeed";
+import { recordingCameraWindows } from "@/lib/cameraConfig";
+
+test("recording feeds use each camera's output ratio without rotating corrected backend frames", () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  const windows = recordingCameraWindows(["front", "wrist"], {
+    front: { type: "opencv", width: 640, height: 480, rotation: 0 },
+    wrist: { type: "opencv", width: 640, height: 480, rotation: 90 },
+  }, { w: 1000, h: 600 });
+  const container = document.createElement("div"), root = createRoot(container);
+  act(() => root.render(<>{Object.entries(windows).map(([name, dimensions]) => (
+    <RecordingCameraFeed key={name} name={name} baseUrl="http://test" live {...dimensions} />
+  ))}</>));
+  const images = Array.from(container.querySelectorAll("img"));
+  expect(images).toHaveLength(2);
+  expect(parseFloat(images[0].parentElement!.style.width) / parseFloat(images[0].parentElement!.style.height)).toBeCloseTo(4 / 3, 2);
+  expect(parseFloat(images[1].parentElement!.style.width) / parseFloat(images[1].parentElement!.style.height)).toBeCloseTo(3 / 4, 2);
+  for (const image of images) {
+    expect(image.className).toContain("object-contain");
+    expect(image.style.transform).toBe("");
+  }
+  act(() => root.unmount());
+});
diff --git a/frontend/src/components/control/RecordingCameraFeed.tsx b/frontend/src/components/control/RecordingCameraFeed.tsx
new file mode 100644
index 000000000..ec6b3bf8d
--- /dev/null
+++ b/frontend/src/components/control/RecordingCameraFeed.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+interface CameraFeedProps {
+  baseUrl: string;
+  name: string;
+  // False during the preparing phase: show an empty slot until the camera is
+  // connected and streaming. True once recording/resetting, when frames flow.
+  live: boolean;
+  // Pixel size computed by the parent to fit the available space. The box is
+  // sized to the camera's aspect ratio, so the video fills it without letterbox.
+  width: number;
+  height: number;
+}
+
+// Renders one recording camera's window at an explicit size. During preparing it
+// shows an empty placeholder; once live it plays the backend MJPEG stream. The
+// browser renders a `multipart/x-mixed-replace` response natively in an <img>,
+// so we just point it at /camera-feed/{name}. If the stream errors before frames
+// flow (camera still warming up), retry with a cache-busting key after a delay.
+const RecordingCameraFeed: React.FC<CameraFeedProps> = ({
+  baseUrl,
+  name,
+  live,
+  width,
+  height,
+}) => {
+  const [reloadKey, setReloadKey] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const retryRef = useRef<number | null>(null);
+
+  const src = `${baseUrl}/camera-feed/${encodeURIComponent(name)}?k=${reloadKey}`;
+
+  useEffect(() => {
+    return () => {
+      if (retryRef.current) window.clearTimeout(retryRef.current);
+    };
+  }, []);
+
+  const handleError = useCallback(() => {
+    setHasError(true);
+    if (retryRef.current) window.clearTimeout(retryRef.current);
+    retryRef.current = window.setTimeout(() => {
+      setHasError(false);
+      setReloadKey((k) => k + 1);
+    }, 1500);
+  }, []);
+
+  // 0 before the first measurement; skip rendering a zero-size box.
+  if (width <= 0 || height <= 0) return null;
+
+  return (
+    <div
+      style={{ width, height }}
+      className="relative bg-gray-900 rounded-lg border border-gray-700 overflow-hidden flex items-center justify-center"
+    >
+      {!live ? (
+        <span className="text-gray-500 text-sm">Getting ready…</span>
+      ) : hasError ? (
+        <span className="text-gray-500 text-sm">Connecting feed…</span>
+      ) : (
+        <img
+          src={src}
+          alt={`${name} live feed`}
+          onError={handleError}
+          className="w-full h-full object-contain"
+        />
+      )}
+      <span className="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-black/60 text-sm text-gray-200">
+        {name}
+      </span>
+    </div>
+  );
+};
+
+export default RecordingCameraFeed;
diff --git a/frontend/src/components/control/TeleopCameraPanel.tsx b/frontend/src/components/control/TeleopCameraPanel.tsx
index cb48a7144..e386554e4 100644
--- a/frontend/src/components/control/TeleopCameraPanel.tsx
+++ b/frontend/src/components/control/TeleopCameraPanel.tsx
@@ -33,6 +33,9 @@ const TeleopCameraPanel: React.FC = () => {
     key: c.id,
     name: c.name,
     deviceId: c.device_id,
+    rotation: c.rotation,
+    width: c.width,
+    height: c.height,
   }));
 
   return (
@@ -72,6 +75,9 @@ const TeleopCameraPanel: React.FC = () => {
                 key={`${feed.key}:${reloadKey}`}
                 deviceId={feed.deviceId}
                 label={feed.name}
+                rotation={feed.rotation}
+                width={feed.width}
+                height={feed.height}
               />
             ))}
           </div>
diff --git a/frontend/src/components/landing/CameraBindings.tsx b/frontend/src/components/landing/CameraBindings.tsx
index ad6bf6fab..d9b9723aa 100644
--- a/frontend/src/components/landing/CameraBindings.tsx
+++ b/frontend/src/components/landing/CameraBindings.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { VideoOff } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -10,38 +9,16 @@ import {
 } from "@/components/ui/select";
 import { AvailableCamera } from "@/hooks/useAvailableCameras";
 import { ImageFeatures } from "@/lib/checkpointsApi";
-import { useCameraStream } from "@/hooks/useCameraStream";
-
-const CameraThumbnail: React.FC<{ deviceId: string; paused: boolean }> = ({
-  deviceId,
-  paused,
-}) => {
-  const { videoRef, hasError } = useCameraStream(deviceId, paused);
-  if (paused || hasError || !deviceId) {
-    return (
-      <div className="w-32 h-24 bg-gray-800 rounded border border-gray-700 flex flex-col items-center justify-center">
-        <VideoOff className="w-5 h-5 text-gray-500 mb-1" />
-        <span className="text-[10px] text-gray-500">
-          {paused ? "Released" : "No preview"}
-        </span>
-      </div>
-    );
-  }
-  return (
-    <video
-      ref={videoRef}
-      autoPlay
-      muted
-      playsInline
-      className="w-32 h-24 object-cover rounded border border-gray-700 bg-black"
-    />
-  );
-};
+import BrowserCameraPreview from "@/components/control/BrowserCameraPreview";
+import CameraRotationSelect from "@/components/control/CameraRotationSelect";
+import { CameraRotation, rotatedDimensions } from "@/lib/cameraConfig";
 
 interface CameraBindingsProps {
   imageFeatures: ImageFeatures;
   bindings: Record<string, number | null>;
   onBind: (name: string, index: number) => void;
+  rotationFor: (name: string) => CameraRotation;
+  onRotate: (name: string, rotation: CameraRotation) => void;
   availableCameras: AvailableCamera[];
   /** Drop the previews so the backend can open the same devices. */
   paused: boolean;
@@ -52,6 +29,8 @@ const CameraBindings: React.FC<CameraBindingsProps> = ({
   imageFeatures,
   bindings,
   onBind,
+  rotationFor,
+  onRotate,
   availableCameras,
   paused,
 }) => (
@@ -60,8 +39,10 @@ const CameraBindings: React.FC<CameraBindingsProps> = ({
       const value = bindings[name];
       const bound =
         value != null ? availableCameras.find((c) => c.index === value) : undefined;
+      const rotation = rotationFor(name);
+      const capture = rotatedDimensions(dims.width, dims.height, rotation);
       return (
-        <div key={name} className="flex items-center gap-3">
+        <div key={name} className="flex flex-wrap items-center gap-3">
           <div className="flex-1">
             <Label className="text-sm font-medium text-gray-200">{name}</Label>
             <p className="text-xs text-gray-500">
@@ -89,7 +70,19 @@ const CameraBindings: React.FC<CameraBindingsProps> = ({
               )}
             </SelectContent>
           </Select>
-          <CameraThumbnail deviceId={bound?.deviceId ?? ""} paused={paused} />
+          <CameraRotationSelect
+            rotation={rotation}
+            disabled={!bound || paused}
+            onChange={(angle) => onRotate(name, angle)}
+          />
+          <BrowserCameraPreview
+            deviceId={bound?.deviceId ?? ""}
+            paused={paused}
+            rotation={rotation}
+            width={capture.width}
+            height={capture.height}
+            className="w-32 rounded border border-gray-700"
+          />
         </div>
       );
     })}
diff --git a/frontend/src/components/landing/InferenceModal.test.tsx b/frontend/src/components/landing/InferenceModal.test.tsx
new file mode 100644
index 000000000..a8ad8a242
--- /dev/null
+++ b/frontend/src/components/landing/InferenceModal.test.tsx
@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import InferenceModal from "./InferenceModal";
+import { RobotRecord } from "@/hooks/useRobots";
+const mocks = vi.hoisted(() => ({ fetcher: vi.fn(), navigate: vi.fn(), toast: vi.fn() }));
+const available = [
+  { index: 1, name: "top", deviceId: "usb-top", available: true },
+  { index: 2, name: "wrist", deviceId: "usb-wrist", available: true },
+  { index: 3, name: "manual", deviceId: "usb-manual", available: true },
+];
+vi.mock("@/contexts/ApiContext", () => ({ useApi: () => ({ baseUrl: "http://test", fetchWithHeaders: mocks.fetcher }) }));
+vi.mock("@/hooks/use-toast", () => ({ useToast: () => ({ toast: mocks.toast }) }));
+vi.mock("react-router-dom", () => ({ useNavigate: () => mocks.navigate }));
+vi.mock("@/hooks/useAvailableCameras", () => ({ useAvailableCameras: () => ({ cameras: available }) }));
+vi.mock("@/hooks/useCameraStream", () => ({ useCameraStream: () => ({ videoRef: React.createRef<HTMLVideoElement>(), hasError: false }) }));
+// Use native selectors to test modal state changes without Radix popup event details.
+vi.mock("@/components/ui/select", () => ({
+  Select: ({ value, onValueChange, disabled, children }: { value: string; onValueChange: (value: string) => void; disabled: boolean; children: React.ReactNode }) => (
+    <select value={value ?? ""} disabled={disabled} onChange={(event) => onValueChange(event.target.value)}><option value="" />{children}</select>
+  ),
+  SelectContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  SelectItem: ({ value, children }: { value: string; children: React.ReactNode }) => <option value={value}>{children}</option>,
+  SelectTrigger: () => null,
+  SelectValue: () => null,
+}));
+vi.mock("@/components/ui/dialog", () => ({
+  Dialog: ({ open, children }: { open: boolean; children: React.ReactNode }) => open ? <div>{children}</div> : null,
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
+}));
+const robot: RobotRecord = {
+  name: "so101", leader_port: "leader", follower_port: "follower", leader_config: "leader.json", follower_config: "follower.json", is_clean: true,
+  cameras: [
+    { id: "wrist", name: "wrist", type: "opencv", device_id: "usb-wrist", camera_index: 1, width: 640, height: 480, rotation: 90 },
+    { id: "top", name: "top", type: "opencv", device_id: "usb-top", camera_index: 2, width: 640, height: 480, rotation: 180 },
+  ],
+};
+let root: Root;
+let container: HTMLDivElement;
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  container = document.createElement("div"); root = createRoot(container);
+  mocks.fetcher.mockReset(); mocks.navigate.mockReset(); mocks.toast.mockReset();
+  mocks.fetcher.mockImplementation(async (url: string) => new Response(JSON.stringify(
+    url.endsWith("/checkpoints") ? { checkpoints: [{ step: 10, source: "local", ref: "checkpoint" }] }
+      : url.endsWith("/policy-config") ? { policy_type: "act", requires_task: false, image_features: { wrist: { width: 480, height: 640 }, top: { width: 640, height: 480 } } }
+      : { message: "Started", log_path: "rollout.log" },
+  )));
+});
+afterEach(() => { act(() => root.unmount()); vi.useRealTimers(); });
+const rotations = () => Array.from(container.querySelectorAll("select")).filter((select) => Array.from(select.options).some((option) => option.text.includes("clockwise")));
+const bindings = () => Array.from(container.querySelectorAll("select")).filter((select) => Array.from(select.options).some((option) => option.text.includes("#")));
+function change(select: HTMLSelectElement, value: string) {
+  act(() => { select.value = value; select.dispatchEvent(new Event("change", { bubbles: true })); });
+}
+async function render(record = robot) {
+  await act(async () => root.render(<InferenceModal open onOpenChange={vi.fn()} robot={record} jobId="job" initialStep={10} />));
+}
+async function start() {
+  vi.useFakeTimers();
+  const button = Array.from(container.querySelectorAll("button")).find((item) => item.textContent?.includes("Start Inference"))!;
+  await act(async () => { button.click(); await vi.advanceTimersByTimeAsync(300); });
+  const call = mocks.fetcher.mock.calls.find(([url]) => url.endsWith("/start-inference"));
+  return call ? JSON.parse(call[1].body) : null;
+}
+
+test("camera reassignment carries physical rotation and sends native dimensions to inference", async () => {
+  await render();
+  expect(bindings().map((select) => select.value)).toEqual(["2", "1"]);
+  expect(rotations().map((select) => select.value)).toEqual(["90", "180"]);
+  change(bindings()[0], "1"); change(bindings()[1], "2");
+  expect(rotations().map((select) => select.value)).toEqual(["180", "90"]);
+  change(rotations()[0], "270");
+  const request = await start();
+  expect(request.cameras.wrist).toMatchObject({ camera_index: 1, rotation: 270, width: 640, height: 480 });
+  expect(request.cameras.top).toMatchObject({ camera_index: 2, rotation: 90, width: 480, height: 640 });
+  expect(mocks.navigate).toHaveBeenCalledWith("/inference");
+});
+
+test("an unsaved camera permits a manual rotation with a training-data reminder", async () => {
+  await render(); change(bindings()[0], "3");
+  expect(rotations()[0].value).toBe("0");
+  change(rotations()[0], "90");
+  expect(container.textContent).toContain("Use the same rotation as the training data");
+  const request = await start();
+  expect(request.cameras.wrist).toMatchObject({ camera_index: 3, rotation: 90, width: 640, height: 480 });
+});
+
+test("an invalid saved rotation blocks inference and gives a visible correction instruction", async () => {
+  await render({ ...robot, cameras: [{ ...robot.cameras[0], rotation: 45 as never }] });
+  expect(container.textContent).toContain("Correct the camera settings in Calibration");
+  const button = Array.from(container.querySelectorAll("button")).find((item) => item.textContent?.includes("Start Inference"))! as HTMLButtonElement;
+  expect(button.disabled).toBe(true);
+  expect(await start()).toBeNull();
+});
diff --git a/frontend/src/components/landing/InferenceModal.tsx b/frontend/src/components/landing/InferenceModal.tsx
index 1cafe37ab..c537c5a1f 100644
--- a/frontend/src/components/landing/InferenceModal.tsx
+++ b/frontend/src/components/landing/InferenceModal.tsx
@@ -25,6 +25,7 @@ import {
 import { startInference } from "@/lib/inferenceApi";
 import CheckpointDropdown from "@/components/jobs/CheckpointDropdown";
 import { useCameraBindings } from "@/hooks/useCameraBindings";
+import { cameraConfigurationError } from "@/lib/cameraConfig";
 import CameraBindings from "./CameraBindings";
 
 interface Props {
@@ -116,16 +117,19 @@ const InferenceModal: React.FC<Props> = ({
       ? checkpoints.find((c) => c.step === selectedStep)?.ref ?? null
       : null;
 
+  const cameraError = robot ? cameraConfigurationError(robot.cameras ?? []) : null;
+
   const canStart =
     !!robot &&
     robot.is_clean &&
+    !cameraError &&
     selectedRef != null &&
     !!policyConfig &&
     cameraBindings.allBound &&
     !submitting;
 
   const handleStart = async () => {
-    if (!robot || selectedRef == null || !policyConfig) return;
+    if (!robot || selectedRef == null || !policyConfig || cameraError) return;
     // Setting submitting=true makes every CameraPreview drop its
     // browser stream — required so the rollout subprocess can open the
     // same camera index via OpenCV without colliding on the device.
@@ -263,7 +267,12 @@ const InferenceModal: React.FC<Props> = ({
             <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
               Cameras
             </h3>
-            {policyConfigLoading ? (
+            {cameraError ? (
+              <Alert className="bg-red-900/40 border-red-700 text-red-100">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>{cameraError} Correct the camera settings in Calibration.</AlertDescription>
+              </Alert>
+            ) : policyConfigLoading ? (
               <div className="flex items-center gap-2 text-sm text-slate-400">
                 <Loader2 className="w-4 h-4 animate-spin" />
                 Reading policy config…
@@ -283,12 +292,15 @@ const InferenceModal: React.FC<Props> = ({
               <div className="space-y-3">
                 <p className="text-xs text-gray-500">
                   Bind a physical camera to each name the policy was trained
-                  with. Resolution comes from the checkpoint.
+                  with. Resolution comes from the checkpoint. Use the same
+                  rotation as the training data.
                 </p>
                 <CameraBindings
                   imageFeatures={policyConfig.image_features}
                   bindings={cameraBindings.bindings}
                   onBind={cameraBindings.bind}
+                  rotationFor={cameraBindings.rotationFor}
+                  onRotate={cameraBindings.setRotation}
                   availableCameras={cameraBindings.availableCameras}
                   paused={submitting}
                 />
diff --git a/frontend/src/components/landing/RecordingModal.tsx b/frontend/src/components/landing/RecordingModal.tsx
index 06a5f3905..4c45e0195 100644
--- a/frontend/src/components/landing/RecordingModal.tsx
+++ b/frontend/src/components/landing/RecordingModal.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/collapsible";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertTriangle, CheckCircle, ChevronDown } from "lucide-react";
+import { cameraConfigurationError } from "@/lib/cameraConfig";
 import CameraConfiguration, {
   CameraConfig,
 } from "@/components/recording/CameraConfiguration";
@@ -253,7 +254,8 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
             </div>
 
             {appendTo ? (
-              Object.keys(appendTo.imageFeatures).length > 0 && (
+              Object.keys(appendTo.imageFeatures).length > 0 &&
+              !(robot && cameraConfigurationError(robot.cameras ?? [])) && (
                 <div className="space-y-4">
                   <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
                     Cameras
@@ -266,6 +268,8 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                     imageFeatures={appendTo.imageFeatures}
                     bindings={cameraBindings.bindings}
                     onBind={cameraBindings.bind}
+                    rotationFor={cameraBindings.rotationFor}
+                    onRotate={cameraBindings.setRotation}
                     availableCameras={cameraBindings.availableCameras}
                     paused={false}
                   />
diff --git a/frontend/src/components/recording/CameraConfiguration.test.tsx b/frontend/src/components/recording/CameraConfiguration.test.tsx
new file mode 100644
index 000000000..cf33c3a18
--- /dev/null
+++ b/frontend/src/components/recording/CameraConfiguration.test.tsx
@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import CameraConfiguration from "./CameraConfiguration";
+import { CameraConfig, normalizeCameraConfig, serializeCameras } from "@/lib/cameraConfig";
+vi.mock("@/hooks/useAvailableCameras", () => ({ useAvailableCameras: () => ({ cameras: [], isLoading: false, refresh: vi.fn() }) }));
+vi.mock("@/hooks/use-toast", () => ({ useToast: () => ({ toast: vi.fn() }) }));
+vi.mock("@/hooks/useCameraStream", () => ({ useCameraStream: () => ({ videoRef: React.createRef<HTMLVideoElement>(), hasError: false }) }));
+let root: Root;
+let container: HTMLDivElement;
+const camera: CameraConfig = { id: "wrist", name: "wrist", device_id: "usb-wrist", type: "opencv", width: 640, height: 480 };
+beforeEach(() => { Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true }); container = document.createElement("div"); root = createRoot(container); });
+afterEach(() => act(() => root.unmount()));
+test("rotation updates the profile while capture dimensions stay native", () => {
+  const change = vi.fn();
+  act(() => root.render(<CameraConfiguration cameras={[camera]} onCamerasChange={change} />));
+  const select = container.querySelector("select")!;
+  expect(select.value).toBe("0");
+  act(() => { select.value = "90"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+  expect(change).toHaveBeenCalledWith([{ ...camera, rotation: 90 }]);
+  const saved = JSON.parse(JSON.stringify(change.mock.calls[0][0])).map(normalizeCameraConfig);
+  act(() => root.render(<CameraConfiguration cameras={saved} onCamerasChange={change} />));
+  expect(container.querySelector("select")!.value).toBe("90");
+  expect(container.querySelector("video")!.style.transform).toContain("rotate(90deg)");
+  expect(serializeCameras(saved).wrist).toMatchObject({ rotation: 90, width: 640, height: 480 });
+});
+test("the recording configuration displays rotated output without an editing control", () => {
+  act(() => root.render(<CameraConfiguration cameras={[{ ...camera, rotation: 90 }]} readOnly onCamerasChange={vi.fn()} />));
+  expect(container.textContent).toContain("480×640 · 90° clockwise");
+  expect(container.querySelector("select")).toBeNull();
+  expect(container.querySelector("video")!.parentElement!.style.aspectRatio).toBe("480 / 640");
+});
+
+test("an invalid stored rotation stays visible until the user selects a valid value", () => {
+  const change = vi.fn();
+  const invalid = { ...camera, rotation: 45 as never };
+  act(() => root.render(<CameraConfiguration cameras={[invalid]} onCamerasChange={change} />));
+  expect(container.querySelector("[role=alert]")!.textContent).toContain("Select a valid rotation");
+  expect(container.querySelector("video")).toBeNull();
+  const select = container.querySelector("select")!;
+  expect(select.value).toBe("");
+  act(() => { select.value = "180"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+  expect(change).toHaveBeenCalledWith([{ ...camera, rotation: 180 }]);
+});
diff --git a/frontend/src/components/recording/CameraConfiguration.tsx b/frontend/src/components/recording/CameraConfiguration.tsx
index 1583b8022..7337c09c2 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, RefreshCw, ChevronRight } from "lucide-react";
+import { Camera, Plus, X, RefreshCw, ChevronRight } from "lucide-react";
 import {
   Collapsible,
   CollapsibleContent,
@@ -18,7 +18,10 @@ import {
 } from "@/components/ui/collapsible";
 import { useToast } from "@/hooks/use-toast";
 import { useAvailableCameras } from "@/hooks/useAvailableCameras";
-import { useCameraStream } from "@/hooks/useCameraStream";
+import BrowserCameraPreview from "@/components/control/BrowserCameraPreview";
+import CameraRotationSelect from "@/components/control/CameraRotationSelect";
+import { CameraConfig, cameraRotation, cameraRotationError, rotatedDimensions } from "@/lib/cameraConfig";
+export type { CameraConfig } from "@/lib/cameraConfig";
 
 // Sentinels distinguish "leave unset" (auto-detect / platform default) from an
 // explicit choice. Radix Select disallows an empty-string value, so we map these
@@ -37,19 +40,6 @@ const BACKEND_OPTIONS = [
   "MSMF",
 ];
 
-export interface CameraConfig {
-  id: string;
-  name: string;
-  type: string;
-  camera_index?: number; // cv2 index — what the recorder opens
-  device_id: string; // Browser deviceId matched to the cv2 index by AVFoundation localizedName
-  width: number;
-  height: number;
-  fps?: number;
-  fourcc?: string; // 4-char OpenCV pixel format (e.g. "MJPG"); undefined = auto-detect
-  backend?: string; // Cv2Backends name (e.g. "AVFOUNDATION"); undefined = platform default
-}
-
 interface CameraConfigurationProps {
   cameras: CameraConfig[];
   onCamerasChange: (cameras: CameraConfig[]) => void;
@@ -150,6 +140,7 @@ const CameraConfiguration: React.FC<CameraConfigurationProps> = ({
       width: 640,
       height: 480,
       fps: 30,
+      rotation: 0,
     };
 
     onCamerasChange([...cameras, newCamera]);
@@ -346,35 +337,19 @@ const CameraPreview: React.FC<CameraPreviewProps> = ({
   onRemove,
   onUpdate,
 }) => {
-  const { videoRef, hasError: streamError } = useCameraStream(
-    camera.device_id,
-    paused
-  );
-  const showVideo = !paused && camera.device_id && !streamError;
+  const rotationError = cameraRotationError(camera);
+  const rotation = rotationError ? null : cameraRotation(camera.rotation);
+  const output = rotation === null ? null : rotatedDimensions(camera.width, camera.height, rotation);
   return (
     <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
-      <div className="aspect-[4/3] bg-gray-800 relative">
-        {showVideo ? (
-          <video
-            ref={videoRef}
-            autoPlay
-            muted
-            playsInline
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex flex-col items-center justify-center">
-            <VideoOff className="w-8 h-8 text-gray-500 mb-2" />
-            <span className="text-gray-500 text-sm">
-              {paused
-                ? "Preview paused"
-                : camera.device_id
-                ? "Preview failed"
-                : "No browser match"}
-            </span>
-          </div>
-        )}
-      </div>
+      <BrowserCameraPreview
+        deviceId={camera.device_id}
+        paused={paused}
+        rotation={camera.rotation}
+        width={camera.width}
+        height={camera.height}
+        fallback={paused ? "Preview paused" : camera.device_id ? undefined : "No browser match"}
+      />
 
       {/* Camera Info */}
       <div className="p-3 space-y-2">
@@ -392,12 +367,15 @@ const CameraPreview: React.FC<CameraPreviewProps> = ({
           )}
         </div>
 
+        {rotationError && <p role="alert" className="text-xs text-red-400">{rotationError} Select a valid rotation.</p>}
         {readOnly ? (
           <p className="text-xs text-gray-400">
-            {camera.width}×{camera.height}
+            {output ? `${output.width}×${output.height} · ${rotation}° clockwise` : "Invalid rotation"}
             {camera.fps ? ` · ${camera.fps} fps` : ""}
           </p>
         ) : (
+        <>
+        <CameraRotationSelect rotation={rotation} onChange={(value) => onUpdate({ rotation: value })} />
         <Collapsible>
           <CollapsibleTrigger className="group flex items-center gap-1.5 text-xs font-medium text-gray-300 hover:text-white transition-colors">
             <ChevronRight className="w-3.5 h-3.5 transition-transform group-data-[state=open]:rotate-90" />
@@ -406,7 +384,7 @@ const CameraPreview: React.FC<CameraPreviewProps> = ({
           <CollapsibleContent className="pt-2 space-y-2">
             <div className="grid grid-cols-1 gap-2 text-xs text-gray-400">
               <div className="flex items-center gap-2">
-                <span className="w-16">Resolution:</span>
+                <span className="w-16">Capture:</span>
                 <div className="flex items-center gap-1">
                   <NumberInput
                     value={camera.width}
@@ -511,6 +489,7 @@ const CameraPreview: React.FC<CameraPreviewProps> = ({
             </div>
           </CollapsibleContent>
         </Collapsible>
+        </>
         )}
       </div>
     </div>
diff --git a/frontend/src/hooks/useCameraBindings.ts b/frontend/src/hooks/useCameraBindings.ts
index 1f9c67080..f8081d332 100644
--- a/frontend/src/hooks/useCameraBindings.ts
+++ b/frontend/src/hooks/useCameraBindings.ts
@@ -2,6 +2,15 @@ import { useEffect, useState } from "react";
 import { RobotRecord } from "@/hooks/useRobots";
 import { useAvailableCameras } from "@/hooks/useAvailableCameras";
 import { ImageFeatures } from "@/lib/checkpointsApi";
+import {
+  CameraRequest,
+  CameraRotation,
+  PhysicalCamera,
+  physicalCameraKey,
+  rotatedDimensions,
+  rotationForCamera,
+  serializeCamera,
+} from "@/lib/cameraConfig";
 
 /**
  * Binds each expected camera to a physical one. A robot camera with the same
@@ -14,6 +23,8 @@ export function useCameraBindings(
 ) {
   // Per expected camera name → user-selected physical camera index (or null).
   const [bindings, setBindings] = useState<Record<string, number | null>>({});
+  // User rotation choice per physical camera, over the one saved with the robot.
+  const [rotations, setRotations] = useState<Record<string, CameraRotation>>({});
   const { cameras: availableCameras } = useAvailableCameras({ enabled });
 
   // If the selected robot has cameras whose names match an expected camera,
@@ -51,24 +62,49 @@ export function useCameraBindings(
   const bind = (name: string, index: number) =>
     setBindings((prev) => ({ ...prev, [name]: index }));
 
-  /** The backend camera config: every bound camera at its expected resolution. */
+  useEffect(() => {
+    if (enabled) setRotations({});
+  }, [enabled, robot?.name]);
+
+  const physicalFor = (index: number): PhysicalCamera =>
+    availableCameras.find((c) => c.index === index) ?? { index, deviceId: "" };
+
+  const rotationFor = (name: string): CameraRotation => {
+    const idx = bindings[name];
+    return idx == null
+      ? 0
+      : rotationForCamera(physicalFor(idx), robot?.cameras ?? [], rotations);
+  };
+
+  const setRotation = (name: string, rotation: CameraRotation) => {
+    const idx = bindings[name];
+    if (idx != null) {
+      setRotations((prev) => ({ ...prev, [physicalCameraKey(physicalFor(idx))]: rotation }));
+    }
+  };
+
+  /**
+   * The backend camera config: every bound camera. The expected resolution is
+   * the rotated output, so the API gets the capture dimensions.
+   */
   const toCameraDict = (fps: number) => {
-    const cameraDict: Record<string, {
-      type: string; camera_index: number; width: number; height: number; fps: number;
-    }> = {};
+    const cameraDict: Record<string, CameraRequest> = {};
     for (const [name, dims] of Object.entries(imageFeatures ?? {})) {
       const idx = bindings[name];
       if (idx == null) continue;
-      cameraDict[name] = {
+      const rotation = rotationFor(name);
+      const capture = rotatedDimensions(dims.width, dims.height, rotation);
+      cameraDict[name] = serializeCamera({
         type: "opencv",
         camera_index: idx,
-        width: dims.width,
-        height: dims.height,
+        width: capture.width,
+        height: capture.height,
+        rotation,
         fps,
-      };
+      });
     }
     return cameraDict;
   };
 
-  return { bindings, bind, allBound, availableCameras, toCameraDict };
+  return { bindings, bind, allBound, availableCameras, rotationFor, setRotation, toCameraDict };
 }
diff --git a/frontend/src/hooks/useRecording.ts b/frontend/src/hooks/useRecording.ts
index dacf49458..76ef387f3 100644
--- a/frontend/src/hooks/useRecording.ts
+++ b/frontend/src/hooks/useRecording.ts
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useToast } from "@/hooks/use-toast";
 import { useHfAuth } from "@/contexts/HfAuthContext";
 import { RobotRecord } from "@/hooks/useRobots";
-import { CameraConfig } from "@/components/recording/CameraConfiguration";
+import { CameraConfig, cameraConfigurationError, serializeCameras } from "@/lib/cameraConfig";
 import { useCameraBindings } from "@/hooks/useCameraBindings";
 import { ImageFeatures } from "@/lib/checkpointsApi";
 
@@ -60,7 +60,7 @@ export const useRecording = (robot: RobotRecord | null) => {
 
   // A bound camera keeps the capture settings the robot gives that device, as
   // in a new recording.
-  const captureSettings = (index: number) => {
+  const captureSettings = (index: number | undefined) => {
     const robotCams = robot?.cameras ?? [];
     const deviceId = cameraBindings.availableCameras.find((c) => c.index === index)?.deviceId;
     const cam =
@@ -75,6 +75,15 @@ export const useRecording = (robot: RobotRecord | null) => {
   const onStart = async () => {
     // Start stays disabled until a calibrated robot is selected.
     if (!robot) return;
+    const cameraError = cameraConfigurationError(robot.cameras ?? []);
+    if (cameraError) {
+      toast({
+        title: "Invalid camera rotation",
+        description: `${cameraError} Correct the camera settings in Calibration.`,
+        variant: "destructive",
+      });
+      return;
+    }
     if ((!appendTo && !datasetName) || !singleTask) {
       toast({
         title: "Missing dataset details",
@@ -117,32 +126,7 @@ export const useRecording = (robot: RobotRecord | null) => {
             { ...cam, ...captureSettings(cam.camera_index) },
           ]),
         )
-      : cameras.reduce(
-          (acc, cam) => {
-            acc[cam.name] = {
-              type: cam.type,
-              camera_index: cam.camera_index,
-              width: cam.width,
-              height: cam.height,
-              fps: cam.fps,
-              ...(cam.fourcc ? { fourcc: cam.fourcc } : {}),
-              ...(cam.backend ? { backend: cam.backend } : {}),
-            };
-            return acc;
-          },
-          {} as Record<
-            string,
-            {
-              type: string;
-              camera_index?: number;
-              width: number;
-              height: number;
-              fps?: number;
-              fourcc?: string;
-              backend?: string;
-            }
-          >,
-        );
+      : serializeCameras(cameras);
 
     const recordingConfig = {
       leader_port: robot.leader_port,
diff --git a/frontend/src/hooks/useRobots.test.tsx b/frontend/src/hooks/useRobots.test.tsx
new file mode 100644
index 000000000..e7e37577c
--- /dev/null
+++ b/frontend/src/hooks/useRobots.test.tsx
@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { useRobots } from "./useRobots";
+const mocks = vi.hoisted(() => ({ fetcher: vi.fn(), toast: vi.fn() }));
+vi.mock("@/contexts/ApiContext", () => ({ useApi: () => ({ baseUrl: "http://test", fetchWithHeaders: mocks.fetcher }) }));
+vi.mock("@/hooks/use-toast", () => ({ useToast: () => ({ toast: mocks.toast }) }));
+vi.mock("react-router-dom", () => ({ useLocation: () => ({ key: "initial" }) }));
+let root: Root;
+let current: ReturnType<typeof useRobots>;
+function Probe() { current = useRobots(); return null; }
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  localStorage.clear(); mocks.fetcher.mockReset(); mocks.toast.mockReset();
+  root = createRoot(document.createElement("div"));
+});
+afterEach(() => act(() => root.unmount()));
+test("profile reload keeps valid robots when another robot has an invalid saved rotation", async () => {
+  const camera = { id: "wrist", name: "wrist", device_id: "usb", type: "opencv", width: 640, height: 480 };
+  const robot = { leader_port: "leader", follower_port: "follower", leader_config: "leader.json", follower_config: "follower.json", is_clean: true };
+  mocks.fetcher.mockResolvedValue(new Response(JSON.stringify({ robots: [
+    { ...robot, name: "old", cameras: [camera] },
+    { ...robot, name: "rotated", cameras: [{ ...camera, rotation: 180 }] },
+    { ...robot, name: "invalid", cameras: [{ ...camera, rotation: 45 }] },
+  ] })));
+  await act(async () => root.render(<Probe />));
+  expect(current.records.old.cameras[0].rotation).toBe(0);
+  expect(current.records.rotated.cameras[0].rotation).toBe(180);
+  expect(current.records.invalid.cameras[0].rotation).toBe(45);
+  expect(mocks.toast).toHaveBeenCalledWith(expect.objectContaining({ title: "Invalid camera rotation", variant: "destructive" }));
+});
diff --git a/frontend/src/hooks/useRobots.ts b/frontend/src/hooks/useRobots.ts
index be5349221..e6404d2c6 100644
--- a/frontend/src/hooks/useRobots.ts
+++ b/frontend/src/hooks/useRobots.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useApi } from "@/contexts/ApiContext";
 import { useToast } from "@/hooks/use-toast";
-import type { CameraConfig } from "@/components/recording/CameraConfiguration";
+import { CameraConfig, cameraConfigurationError, loadCameraConfigs } from "@/lib/cameraConfig";
 
 export interface RobotRecord {
   name: string;
@@ -54,7 +54,12 @@ export const useRobots = () => {
         const data = await res.json();
         if (cancelled) return;
         const next: Record<string, RobotRecord> = {};
-        for (const r of data.robots ?? []) next[r.name] = r;
+        for (const r of data.robots ?? []) {
+          const cameras = loadCameraConfigs(r.cameras ?? []);
+          const error = cameraConfigurationError(cameras);
+          next[r.name] = { ...r, cameras };
+          if (error) toast({ title: "Invalid camera rotation", description: `${r.name}: ${error}`, variant: "destructive" });
+        }
         setRecords(next);
         // Drop the selection if the underlying record vanished (deleted from another tab)
         setSelectedName((prev) => (prev && prev in next ? prev : null));
@@ -70,7 +75,7 @@ export const useRobots = () => {
     return () => {
       cancelled = true;
     };
-  }, [baseUrl, fetchWithHeaders, location.key]);
+  }, [baseUrl, fetchWithHeaders, location.key, toast]);
 
   // Persist selection to localStorage
   useEffect(() => {
diff --git a/frontend/src/lib/cameraConfig.test.ts b/frontend/src/lib/cameraConfig.test.ts
new file mode 100644
index 000000000..8da735c36
--- /dev/null
+++ b/frontend/src/lib/cameraConfig.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "vitest";
+import { CameraConfig, cameraRotation, normalizeCameraConfig, physicalCameraKey, rotatedDimensions, rotationForCamera, serializeCameras } from "./cameraConfig";
+const camera: CameraConfig = { id: "wrist", name: "wrist", device_id: "usb-wrist", camera_index: 1, type: "opencv", width: 640, height: 480, fps: 30 };
+
+test("old profiles default to zero without changing capture dimensions", () => {
+  expect(normalizeCameraConfig(camera)).toEqual({ ...camera, rotation: 0 });
+});
+test.each([0, 90, 180, 270] as const)("rotation %s survives profile and session serialization", (rotation) => {
+  const saved = JSON.parse(JSON.stringify(normalizeCameraConfig({ ...camera, rotation })));
+  expect(serializeCameras([saved]).wrist).toEqual({ type: "opencv", camera_index: 1, width: 640, height: 480, fps: 30, rotation });
+});
+test.each([null, "90", -90, 45, 360, true, NaN])("invalid rotation %s is not replaced with zero", (value) => {
+  expect(() => cameraRotation(value)).toThrow("Camera rotation must be");
+});
+test.each([0, 90, 180, 270] as const)("capture/output conversion is reversible at %s degrees", (rotation) => {
+  const output = rotatedDimensions(640, 480, rotation);
+  expect(output).toEqual(rotation === 90 || rotation === 270 ? { width: 480, height: 640 } : { width: 640, height: 480 });
+  expect(rotatedDimensions(output.width, output.height, rotation)).toEqual({ width: 640, height: 480 });
+});
+test("rotation follows a physical camera across index drift and policy reassignment", () => {
+  const saved = [{ ...camera, rotation: 180 as const }, { ...camera, id: "top", name: "top", device_id: "usb-top", camera_index: 2, rotation: 90 as const }];
+  const wrist = { deviceId: "usb-wrist", index: 2 }, top = { deviceId: "usb-top", index: 1 };
+  expect(rotationForCamera(wrist, saved, {})).toBe(180);
+  expect(rotationForCamera(top, saved, {})).toBe(90);
+  const overrides = { [physicalCameraKey(wrist)]: 270 as const };
+  expect(rotationForCamera(wrist, saved, overrides)).toBe(270);
+  expect(rotationForCamera(top, saved, overrides)).toBe(90);
+  expect(rotationForCamera({ deviceId: "unsaved", index: 5 }, saved, {})).toBe(0);
+});
diff --git a/frontend/src/lib/cameraConfig.ts b/frontend/src/lib/cameraConfig.ts
new file mode 100644
index 000000000..16b21a0f4
--- /dev/null
+++ b/frontend/src/lib/cameraConfig.ts
@@ -0,0 +1,148 @@
+import type { CSSProperties } from "react";
+
+export const CAMERA_ROTATIONS = [0, 90, 180, 270] as const;
+export type CameraRotation = (typeof CAMERA_ROTATIONS)[number];
+
+/** Camera dimensions describe capture before rotation. */
+export interface CameraRequest {
+  type: string;
+  camera_index?: number;
+  width: number;
+  height: number;
+  fps?: number;
+  fourcc?: string;
+  backend?: string;
+  rotation?: CameraRotation;
+}
+
+export interface CameraConfig extends CameraRequest {
+  id: string;
+  name: string;
+  device_id: string;
+}
+
+/** Only an omitted rotation defaults to zero. */
+export function cameraRotation(value: unknown = 0): CameraRotation {
+  if (!CAMERA_ROTATIONS.some((rotation) => rotation === value)) {
+    throw new Error(`Camera rotation must be 0, 90, 180, or 270 degrees clockwise; received ${String(value)}.`);
+  }
+  return value as CameraRotation;
+}
+
+export function cameraRotationError(camera: Pick<CameraRequest, "rotation">): string | null {
+  try {
+    cameraRotation(camera.rotation);
+    return null;
+  } catch (error) {
+    return error instanceof Error ? error.message : String(error);
+  }
+}
+
+export function cameraConfigurationError(cameras: CameraConfig[]): string | null {
+  for (const camera of cameras) {
+    const error = cameraRotationError(camera);
+    if (error) return `${camera.name}: ${error}`;
+  }
+  return null;
+}
+
+/** Preserve invalid stored values so the user can correct them explicitly. */
+export function loadCameraConfigs(cameras: CameraConfig[]): CameraConfig[] {
+  return cameras.map((camera) => cameraRotationError(camera) ? camera : normalizeCameraConfig(camera));
+}
+
+export function normalizeCameraConfig(camera: CameraConfig): CameraConfig {
+  return { ...camera, rotation: cameraRotation(camera.rotation) };
+}
+
+/** Remove browser/profile fields before sending a camera to a session. */
+export function serializeCamera(camera: CameraRequest): CameraRequest {
+  return {
+    type: camera.type,
+    camera_index: camera.camera_index,
+    width: camera.width,
+    height: camera.height,
+    fps: camera.fps,
+    rotation: cameraRotation(camera.rotation),
+    ...(camera.fourcc ? { fourcc: camera.fourcc } : {}),
+    ...(camera.backend ? { backend: camera.backend } : {}),
+  };
+}
+
+export function serializeCameras(cameras: CameraConfig[]): Record<string, CameraRequest> {
+  return Object.fromEntries(cameras.map((camera) => [camera.name, serializeCamera(camera)]));
+}
+
+/** Quarter turns swap capture and output dimensions in both directions. */
+export function rotatedDimensions(width: number, height: number, rotation: CameraRotation) {
+  const angle = cameraRotation(rotation);
+  return angle === 90 || angle === 270 ? { width: height, height: width } : { width, height };
+}
+
+/** Center the complete native rectangle inside the rotated output rectangle. */
+export function cameraPreviewGeometry(width: number, height: number, rotation: CameraRotation) {
+  const output = rotatedDimensions(width, height, rotation);
+  const quarterTurn = rotation === 90 || rotation === 270;
+  const videoStyle: CSSProperties = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    width: quarterTurn ? `${(width / height) * 100}%` : "100%",
+    height: quarterTurn ? `${(height / width) * 100}%` : "100%",
+    objectFit: "contain",
+    maxWidth: "none",
+    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+  };
+  return { aspectRatio: `${output.width} / ${output.height}`, videoStyle };
+}
+
+export interface PhysicalCamera {
+  index: number;
+  deviceId: string;
+}
+
+export function physicalCameraKey(camera: PhysicalCamera): string {
+  return camera.deviceId ? `device:${camera.deviceId}` : `index:${camera.index}`;
+}
+
+/** Rotation follows the physical camera when a policy name is reassigned. */
+export function rotationForCamera(
+  camera: PhysicalCamera,
+  configured: CameraConfig[],
+  overrides: Record<string, CameraRotation>,
+): CameraRotation {
+  const saved = configured.find((item) => camera.deviceId && item.device_id === camera.deviceId)
+    ?? configured.find((item) => item.camera_index === camera.index);
+  return cameraRotation(overrides[physicalCameraKey(camera)] ?? saved?.rotation);
+}
+
+/** Size each corrected camera frame within a common grid cell. */
+export function recordingCameraWindows(
+  names: string[],
+  cameras: Record<string, CameraRequest>,
+  area: { w: number; h: number },
+): Record<string, { width: number; height: number }> {
+  if (!names.length || area.w <= 0 || area.h <= 0) return {};
+  let best: Record<string, { width: number; height: number }> = {};
+  let bestArea = -1;
+  for (let columns = 1; columns <= names.length; columns++) {
+    const rows = Math.ceil(names.length / columns);
+    const cellWidth = (area.w - 12 * (columns - 1)) / columns;
+    const cellHeight = (area.h - 12 * (rows - 1)) / rows;
+    if (cellWidth <= 0 || cellHeight <= 0) continue;
+    let total = 0;
+    const windows = Object.fromEntries(names.map((name) => {
+      const camera = cameras[name];
+      const output = camera
+        ? rotatedDimensions(camera.width, camera.height, cameraRotation(camera.rotation))
+        : { width: 640, height: 480 };
+      const aspect = output.width / output.height;
+      const width = Math.min(cellWidth, cellHeight * aspect);
+      const height = width / aspect;
+      total += width * height;
+      return [name, { width: Math.floor(width), height: Math.floor(height) }];
+    }));
+    if (total > bestArea) { best = windows; bestArea = total; }
+  }
+  return best;
+}
diff --git a/frontend/src/lib/inferenceApi.ts b/frontend/src/lib/inferenceApi.ts
index 3258c9893..52316775e 100644
--- a/frontend/src/lib/inferenceApi.ts
+++ b/frontend/src/lib/inferenceApi.ts
@@ -1,17 +1,12 @@
 import { Fetcher, apiRequest } from "./apiClient";
+import { CameraRequest } from "./cameraConfig";
 
 export interface StartInferenceRequest {
   follower_port: string;
   follower_config: string;
   policy_ref: string;
   task: string;
-  cameras: Record<string, {
-    type: string;
-    camera_index?: number;
-    width: number;
-    height: number;
-    fps?: number;
-  }>;
+  cameras: Record<string, CameraRequest>;
   duration_s: number;
 }
 
diff --git a/frontend/src/pages/Calibration.tsx b/frontend/src/pages/Calibration.tsx
index 92b7a2cb3..1275351d8 100644
--- a/frontend/src/pages/Calibration.tsx
+++ b/frontend/src/pages/Calibration.tsx
@@ -41,9 +41,8 @@ import PortDetectionButton from "@/components/ui/PortDetectionButton";
 import PortDetectionModal from "@/components/ui/PortDetectionModal";
 import { useApi } from "@/contexts/ApiContext";
 import { isMotorRangeComplete } from "@/lib/calibrationTargets";
-import CameraConfiguration, {
-  CameraConfig,
-} from "@/components/recording/CameraConfiguration";
+import CameraConfiguration from "@/components/recording/CameraConfiguration";
+import { CameraConfig, loadCameraConfigs, cameraConfigurationError } from "@/lib/cameraConfig";
 
 const DISCONTINUITY_ERROR_PREFIX = "Motor discontinuity detected";
 
@@ -136,17 +135,21 @@ const Calibration = () => {
           ? r.leader_port || ""
           : r.follower_port || ""
       );
-      setCameras(r.cameras ?? []);
+      const loaded = loadCameraConfigs(r.cameras ?? []);
+      setCameras(loaded);
+      const cameraError = cameraConfigurationError(loaded);
+      if (cameraError) toast({ title: "Invalid camera rotation", description: cameraError, variant: "destructive" });
     })();
     return () => {
       cancelled = true;
     };
-  }, [robotName, fetchRobot]);
+  }, [robotName, fetchRobot, toast]);
 
   // Persist camera changes back to the robot record (debounced).
   const handleCamerasChange = (next: CameraConfig[]) => {
-    setCameras(next);
-    if (!robotName) return;
+    const normalized = loadCameraConfigs(next);
+    setCameras(normalized);
+    if (!robotName || cameraConfigurationError(normalized)) return;
     if (cameraSaveTimerRef.current) {
       clearTimeout(cameraSaveTimerRef.current);
     }
@@ -157,7 +160,7 @@ const Calibration = () => {
           {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ cameras: next }),
+            body: JSON.stringify({ cameras: normalized }),
           }
         );
       } catch (e) {
diff --git a/frontend/src/pages/Recording.tsx b/frontend/src/pages/Recording.tsx
index 976b2fdc5..7387eeaeb 100644
--- a/frontend/src/pages/Recording.tsx
+++ b/frontend/src/pages/Recording.tsx
@@ -37,7 +37,11 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 
+import RecordingCameraFeed from "@/components/control/RecordingCameraFeed";
+import { CameraRequest, recordingCameraWindows } from "@/lib/cameraConfig";
+
 interface RecordingConfig {
+  cameras?: Record<string, CameraRequest>;
   leader_port: string;
   follower_port: string;
   leader_config: string;
@@ -122,20 +126,6 @@ const Recording = () => {
   const [leaveError, setLeaveError] = useState<string | null>(null);
 
   // --- Camera preview layout -------------------------------------------------
-  // Aspect ratio (width / height) of the configured cameras, used to size the
-  // preview windows without letterboxing. Falls back to 4:3 if unknown.
-  const cameraAspect = useMemo(() => {
-    const cams = (recordingConfig as unknown as { cameras?: unknown })?.cameras;
-    const list = Array.isArray(cams)
-      ? cams
-      : cams && typeof cams === "object"
-      ? Object.values(cams as Record<string, unknown>)
-      : [];
-    const first = list[0] as { width?: number; height?: number } | undefined;
-    if (first?.width && first?.height) return first.width / first.height;
-    return 4 / 3;
-  }, [recordingConfig]);
-
   // Measure the space left for the camera windows (via ResizeObserver, so it
   // re-fits on any viewport change) to size them as large as possible while
   // keeping the whole page within one screen (no scroll).
@@ -154,26 +144,9 @@ const Recording = () => {
     }
   }, []);
 
-  // Pick the column count and per-window pixel size that maximizes the video
-  // area within the measured space, given the camera count and aspect ratio.
-  const cameraCount = backendStatus?.cameras?.length ?? 0;
-  const cameraWindow = useMemo(() => {
-    const { w, h } = cameraArea;
-    if (!cameraCount || w <= 0 || h <= 0) return { width: 0, height: 0 };
-    const gap = 12; // matches the grid's gap-3
-    let best = { width: 0, height: 0, area: -1 };
-    for (let cols = 1; cols <= cameraCount; cols++) {
-      const rows = Math.ceil(cameraCount / cols);
-      const cellW = (w - gap * (cols - 1)) / cols;
-      const cellH = (h - gap * (rows - 1)) / rows;
-      if (cellW <= 0 || cellH <= 0) continue;
-      const width = Math.min(cellW, cellH * cameraAspect);
-      const height = width / cameraAspect;
-      const area = width * height;
-      if (area > best.area) best = { width, height, area };
-    }
-    return { width: Math.floor(best.width), height: Math.floor(best.height) };
-  }, [cameraArea, cameraCount, cameraAspect]);
+  const cameraWindows = useMemo(() => recordingCameraWindows(
+    backendStatus?.cameras ?? [], recordingConfig?.cameras ?? {}, cameraArea,
+  ), [backendStatus?.cameras, recordingConfig?.cameras, cameraArea]);
 
   const toggleMute = useCallback(() => {
     setMutedState((prev) => {
@@ -827,7 +800,7 @@ const Recording = () => {
                 className="flex-1 min-h-0 flex flex-wrap gap-3 justify-center content-center overflow-hidden mb-3"
               >
                 {backendStatus.cameras.map((name) => (
-                  <CameraFeed
+                  <RecordingCameraFeed
                     key={name}
                     baseUrl={baseUrl}
                     name={name}
@@ -835,8 +808,8 @@ const Recording = () => {
                       currentPhase === "recording" ||
                       currentPhase === "resetting"
                     }
-                    width={cameraWindow.width}
-                    height={cameraWindow.height}
+                    width={cameraWindows[name]?.width ?? 0}
+                    height={cameraWindows[name]?.height ?? 0}
                   />
                 ))}
               </div>
@@ -928,76 +901,4 @@ const Recording = () => {
   );
 };
 
-interface CameraFeedProps {
-  baseUrl: string;
-  name: string;
-  // False during the preparing phase: show an empty slot until the camera is
-  // connected and streaming. True once recording/resetting, when frames flow.
-  live: boolean;
-  // Pixel size computed by the parent to fit the available space. The box is
-  // sized to the camera's aspect ratio, so the video fills it without letterbox.
-  width: number;
-  height: number;
-}
-
-// Renders one recording camera's window at an explicit size. During preparing it
-// shows an empty placeholder; once live it plays the backend MJPEG stream. The
-// browser renders a `multipart/x-mixed-replace` response natively in an <img>,
-// so we just point it at /camera-feed/{name}. If the stream errors before frames
-// flow (camera still warming up), retry with a cache-busting key after a delay.
-const CameraFeed: React.FC<CameraFeedProps> = ({
-  baseUrl,
-  name,
-  live,
-  width,
-  height,
-}) => {
-  const [reloadKey, setReloadKey] = useState(0);
-  const [hasError, setHasError] = useState(false);
-  const retryRef = useRef<number | null>(null);
-
-  const src = `${baseUrl}/camera-feed/${encodeURIComponent(name)}?k=${reloadKey}`;
-
-  useEffect(() => {
-    return () => {
-      if (retryRef.current) window.clearTimeout(retryRef.current);
-    };
-  }, []);
-
-  const handleError = useCallback(() => {
-    setHasError(true);
-    if (retryRef.current) window.clearTimeout(retryRef.current);
-    retryRef.current = window.setTimeout(() => {
-      setHasError(false);
-      setReloadKey((k) => k + 1);
-    }, 1500);
-  }, []);
-
-  // 0 before the first measurement; skip rendering a zero-size box.
-  if (width <= 0 || height <= 0) return null;
-
-  return (
-    <div
-      style={{ width, height }}
-      className="relative bg-gray-900 rounded-lg border border-gray-700 overflow-hidden flex items-center justify-center"
-    >
-      {!live ? (
-        <span className="text-gray-500 text-sm">Getting ready…</span>
-      ) : hasError ? (
-        <span className="text-gray-500 text-sm">Connecting feed…</span>
-      ) : (
-        <img
-          src={src}
-          alt={`${name} live feed`}
-          onError={handleError}
-          className="w-full h-full object-cover"
-        />
-      )}
-      <span className="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-black/60 text-sm text-gray-200">
-        {name}
-      </span>
-    </div>
-  );
-};
-
 export default Recording;
diff --git a/lelab/camera_config.py b/lelab/camera_config.py
new file mode 100644
index 000000000..1cda34b9c
--- /dev/null
+++ b/lelab/camera_config.py
@@ -0,0 +1,48 @@
+# Copyright 2025 The HuggingFace Inc. team. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Translate native capture settings into LeRobot camera settings."""
+
+from typing import Any
+
+
+def validate_camera_rotations(cameras: dict[str, dict[str, Any]]) -> dict[str, dict[str, Any]]:
+    """Reject invalid OpenCV rotations without changing the API payload."""
+    for name, config in cameras.items():
+        if config.get("type", "opencv") != "opencv":
+            continue
+        rotation = config.get("rotation", 0)
+        if type(rotation) is not int or rotation not in (0, 90, 180, 270):
+            raise ValueError(f"Camera '{name}' rotation must be an integer: 0, 90, 180, or 270.")
+    return cameras
+
+
+def lerobot_camera_settings(config: dict[str, Any]) -> dict[str, Any]:
+    """Return LeRobot output dimensions and its signed rotation value.
+
+    The API dimensions describe the native capture mode. LeRobot v0.6.0
+    dimensions describe the rotated output, so quarter-turns swap them.
+    """
+    validate_camera_rotations({"camera": config})
+    settings = config.copy()
+    if config.get("type", "opencv") != "opencv":
+        return settings
+
+    rotation = config.get("rotation", 0)
+    if rotation in (90, 270):
+        settings["width"], settings["height"] = config.get("height"), config.get("width")
+    # Preserve omission for legacy CLI payloads. LeRobot defaults to no rotation.
+    if "rotation" in config:
+        settings["rotation"] = -90 if rotation == 270 else rotation
+    return settings
diff --git a/lelab/record.py b/lelab/record.py
index 0ad2ca92e..30dd2fb73 100644
--- a/lelab/record.py
+++ b/lelab/record.py
@@ -21,7 +21,7 @@
 from datetime import datetime
 from typing import Any
 
-from pydantic import BaseModel
+from pydantic import BaseModel, field_validator
 
 from lerobot.configs.dataset import DatasetRecordConfig
 from lerobot.datasets import LeRobotDataset
@@ -31,6 +31,7 @@
 from lerobot.scripts.lerobot_record import RecordConfig
 from lerobot.teleoperators.so_leader import SO101LeaderConfig
 
+from .camera_config import lerobot_camera_settings, validate_camera_rotations
 from .episode_media import UnreadableDatasetError, ensure_episode_index
 from .utils.config import setup_calibration_files, with_lelab_tag
 from .utils.devices import safe_disconnect_device
@@ -79,9 +80,14 @@ class RecordingRequest(BaseModel):
     private: bool = False
     resume: bool = False
     streaming_encoding: bool = True
-    cameras: dict = {}
+    cameras: dict[str, dict[str, Any]] = {}
     test_mode: bool = False  # Skip robot connection for testing
 
+    @field_validator("cameras")
+    @classmethod
+    def validate_rotations(cls, cameras: dict[str, dict[str, Any]]) -> dict[str, dict[str, Any]]:
+        return validate_camera_rotations(cameras)
+
 
 class UploadRequest(BaseModel):
     dataset_repo_id: str
@@ -136,7 +142,7 @@ def _build_camera_configs(cameras: dict, default_backend) -> dict:
     `backend` (a Cv2Backends name) and `fourcc` (a 4-char code) are optional per
     camera; when omitted they fall back to `default_backend` and auto-detect.
     """
-    from lerobot.cameras.configs import Cv2Backends
+    from lerobot.cameras.configs import Cv2Backends, Cv2Rotation
     from lerobot.cameras.opencv import OpenCVCameraConfig
 
     camera_configs: dict = {}
@@ -150,20 +156,22 @@ def _build_camera_configs(cameras: dict, default_backend) -> dict:
         backend_name = camera_data.get("backend")
         backend = Cv2Backends[backend_name] if backend_name else default_backend
         fourcc = camera_data.get("fourcc") or None
+        settings = lerobot_camera_settings(camera_data)
 
         camera_configs[camera_name] = OpenCVCameraConfig(
             index_or_path=camera_data.get("camera_index", 0),
             backend=backend,
             fps=camera_data.get("fps"),
-            width=camera_data.get("width"),
-            height=camera_data.get("height"),
+            width=settings.get("width"),
+            height=settings.get("height"),
+            rotation=Cv2Rotation(settings.get("rotation", 0)),
             fourcc=fourcc,
         )
         logger.info(
             f"✅ CAMERA CONFIG: {camera_name} -> OpenCVCameraConfig("
             f"index={camera_data.get('camera_index')}, backend={backend.name}, "
             f"{camera_data.get('width')}x{camera_data.get('height')}@{camera_data.get('fps')}fps, "
-            f"fourcc={fourcc})"
+            f"fourcc={fourcc}, rotation={camera_data.get('rotation', 0)})"
         )
     return camera_configs
 
diff --git a/lelab/rollout.py b/lelab/rollout.py
index 9e0243c54..09c2a8d5a 100644
--- a/lelab/rollout.py
+++ b/lelab/rollout.py
@@ -35,8 +35,9 @@
 from pathlib import Path
 from typing import Any
 
-from pydantic import BaseModel
+from pydantic import BaseModel, field_validator
 
+from .camera_config import lerobot_camera_settings, validate_camera_rotations
 from .utils.config import setup_follower_calibration_file
 
 logger = logging.getLogger(__name__)
@@ -50,6 +51,11 @@ class InferenceRequest(BaseModel):
     cameras: dict[str, dict[str, Any]] = {}
     duration_s: int = 60
 
+    @field_validator("cameras")
+    @classmethod
+    def validate_rotations(cls, cameras: dict[str, dict[str, Any]]) -> dict[str, dict[str, Any]]:
+        return validate_camera_rotations(cameras)
+
 
 inference_active: bool = False
 _inference_proc: subprocess.Popen | None = None
@@ -188,13 +194,14 @@ def _rollout_inference_args(policy_path: str) -> list[str]:
 
 
 def _format_cameras_arg(cameras: dict[str, dict[str, Any]]) -> str:
-    """Convert {name: {type, camera_index, width, height, fps}} into
+    """Convert native camera settings into
     lerobot's CLI dict syntax. The frontend key `camera_index` is
     remapped to lerobot's `index_or_path`."""
     parts = []
     for name, cfg in cameras.items():
+        settings = lerobot_camera_settings(cfg)
         remapped = {
-            ("index_or_path" if k == "camera_index" else k): v for k, v in cfg.items() if v is not None
+            ("index_or_path" if k == "camera_index" else k): v for k, v in settings.items() if v is not None
         }
         body = ", ".join(f"{k}: {v}" for k, v in remapped.items())
         parts.append(f"{name}: {{{body}}}")
diff --git a/tests/test_camera_config.py b/tests/test_camera_config.py
new file mode 100644
index 000000000..86f6ee977
--- /dev/null
+++ b/tests/test_camera_config.py
@@ -0,0 +1,152 @@
+# Copyright 2025 The HuggingFace Inc. team. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Camera rotation contracts across request validation, recording, and rollout."""
+
+from copy import deepcopy
+from unittest.mock import Mock
+
+import draccus
+import numpy as np
+import pytest
+import yaml
+
+from lelab.camera_config import lerobot_camera_settings
+from lelab.record import RecordingRequest, _build_camera_configs
+from lelab.rollout import InferenceRequest, _format_cameras_arg
+from lerobot.cameras.configs import CameraConfig, Cv2Backends, Cv2Rotation
+from lerobot.cameras.opencv import OpenCVCamera
+
+
+@pytest.mark.parametrize(
+    ("rotation", "enum", "turns"),
+    [
+        (0, Cv2Rotation.NO_ROTATION, 0),
+        (90, Cv2Rotation.ROTATE_90, -1),
+        (180, Cv2Rotation.ROTATE_180, 2),
+        (270, Cv2Rotation.ROTATE_270, 1),
+    ],
+)
+def test_recording_and_rollout_produce_same_oriented_frame(rotation, enum, turns) -> None:
+    """Exercise actual LeRobot configuration decoding and image processing."""
+    cameras = {
+        "wrist": {"type": "opencv", "camera_index": 1, "width": 3, "height": 2, "rotation": rotation},
+        "front": {"type": "opencv", "camera_index": 0, "width": 3, "height": 2},
+    }
+    original = deepcopy(cameras)
+    recording_request = RecordingRequest(
+        leader_port="test-leader",
+        follower_port="test-follower",
+        leader_config="leader",
+        follower_config="follower",
+        dataset_repo_id="user/dataset",
+        single_task="test rotation",
+        cameras=cameras,
+    )
+    inference_request = InferenceRequest(
+        follower_port="test-follower",
+        follower_config="follower",
+        policy_ref="user/policy@root",
+        cameras=cameras,
+    )
+    assert recording_request.cameras == original
+    assert inference_request.cameras == original
+    recording = _build_camera_configs(cameras, Cv2Backends.ANY)
+    cli_config = yaml.safe_load(_format_cameras_arg(cameras))
+    rollout = {name: draccus.decode(CameraConfig, config) for name, config in cli_config.items()}
+
+    # Distinct rows and columns expose rotation direction and shape errors.
+    native_frame = np.arange(18, dtype=np.uint8).reshape(2, 3, 3)
+    expected = np.rot90(native_frame[:, :, ::-1], turns)
+    for configs in (recording, rollout):
+        camera = OpenCVCamera(configs["wrist"])
+        assert configs["wrist"].rotation is enum
+        assert (camera.capture_width, camera.capture_height) == (3, 2)
+        np.testing.assert_array_equal(camera._postprocess_image(native_frame), expected)
+        front = OpenCVCamera(configs["front"])
+        np.testing.assert_array_equal(front._postprocess_image(native_frame), native_frame[:, :, ::-1])
+    assert cameras == original
+
+
+def test_legacy_camera_payload_uses_no_rotation_and_preserves_cli_omission() -> None:
+    camera = {"type": "opencv", "camera_index": 2, "width": 640, "height": 480}
+    config = _build_camera_configs({"front": camera}, Cv2Backends.ANY)["front"]
+    assert config.rotation is Cv2Rotation.NO_ROTATION
+    assert (config.width, config.height) == (640, 480)
+    assert "rotation" not in _format_cameras_arg({"front": camera})
+
+
+def test_quarter_turn_without_dimensions_preserves_automatic_resolution() -> None:
+    camera = {"type": "opencv", "camera_index": 2, "rotation": 270}
+    config = _build_camera_configs({"front": camera}, Cv2Backends.ANY)["front"]
+    assert config.width is None
+    assert config.height is None
+    assert config.rotation is Cv2Rotation.ROTATE_270
+    assert "width" not in _format_cameras_arg({"front": camera})
+    assert "height" not in _format_cameras_arg({"front": camera})
+
+
+def test_unsupported_camera_type_retains_previous_behavior() -> None:
+    camera = {"type": "realsense", "camera_index": 1, "width": 640, "height": 480, "rotation": 45}
+    assert lerobot_camera_settings(camera) == camera
+    assert _build_camera_configs({"depth": camera}, Cv2Backends.ANY) == {}
+    assert "rotation: 45" in _format_cameras_arg({"depth": camera})
+
+
+@pytest.mark.parametrize("rotation", [True, False, "90", 90.0, None, -90, 45, 360])
+@pytest.mark.parametrize(
+    ("route", "handler_name", "required"),
+    [
+        (
+            "/start-recording",
+            "handle_start_recording",
+            {
+                "leader_port": "test-leader",
+                "follower_port": "test-follower",
+                "leader_config": "leader",
+                "follower_config": "follower",
+                "dataset_repo_id": "user/dataset",
+                "single_task": "test rotation",
+            },
+        ),
+        (
+            "/start-inference",
+            "handle_start_inference",
+            {
+                "follower_port": "test-follower",
+                "follower_config": "follower",
+                "policy_ref": "user/policy@root",
+            },
+        ),
+    ],
+)
+def test_api_rejects_invalid_rotation_before_handler(
+    client, monkeypatch, rotation, route, handler_name, required
+):
+    """No calibration, worker thread, or rollout process starts for invalid input."""
+    from lelab import record, rollout, server
+
+    handler = Mock()
+    monkeypatch.setattr(server, handler_name, handler)
+    recording_active = record.recording_active
+    inference_active = rollout.inference_active
+    response = client.post(
+        route,
+        json={**required, "cameras": {"wrist": {"type": "opencv", "camera_index": 1, "rotation": rotation}}},
+    )
+    assert response.status_code == 422
+    assert "rotation must be an integer" in response.json()["detail"][0]["msg"]
+    handler.assert_not_called()
+    assert record.recording_active == recording_active
+    assert rollout.inference_active == inference_active