[FRONTEND] Add comprehensive camera detection, configuration and live streaming UI

[DavidLMS]

Problem Solved

• Camera functionality was missing from teleoperation and recording workflows.
• No UI for detecting and configuring cameras before starting robot operations.
• Missing live camera feeds during teleoperation for better robot control.
• Camera configurations were not integrated with existing modal workflows.

Changes Made

• Camera detection modal: Full-featured camera detection and configuration interface.
• Live streaming display: Real-time camera feeds in teleoperation view.
• Integrated workflows: Camera setup in both recording and teleoperation modals.
• Persistent configuration: Camera settings persist between sessions.
• Improved visualization: Vertical camera layout with larger preview sizes.
• Enhanced UX: Auto-loading, preview images, and seamless camera management.

Related PRs

• Backend PR: Link to backend PR

New Components

• components/ui/CameraDetectionModal.tsx - Comprehensive camera detection and configuration

  • Auto-detection on modal open with loading states
  • Live preview capture with refresh functionality
  • Camera selection with visual feedback
  • Resolution and FPS configuration
  • Integration with backend camera endpoints

• components/ui/CameraDetectionButton.tsx - Compact camera detection trigger

  • Consistent styling with existing detection buttons
  • Accessible design with proper tooltips

Enhanced Components

• components/control/VisualizerPanel.tsx - Complete refactor for live streaming

  • Dynamic vertical camera layout (replaces static 2x2 grid)
  • Live camera streams with img tags pointing to streaming endpoints
  • Stream status indicators (connecting, live, error states)
  • Only shows configured cameras (no empty placeholders)
  • Responsive design with proper aspect ratios

• components/landing/RecordingModal.tsx - Camera integration for recording

  • Complete camera configuration section
  • Camera detection button and camera list display
  • Remove camera functionality with backend integration
  • Auto-loading of saved camera configurations

• components/landing/TeleoperationModal.tsx - Camera integration for teleoperation

  • Same camera configuration features as recording modal
  • Consistent UI patterns and styling
  • Real-time camera management with backend sync

Breaking Changes

• VisualizerPanel: Changed from static 2x2 grid to dynamic vertical layout.
• This change improves the user experience by showing only configured cameras.

[nicolas-rabault]

Hi @DavidLMS
I'm trying to test this, but this branch also has some strange conflicts.
As I understand, you have something working on your side.
What should I get to test it?

[DavidLMS]

@nicolas-rabault fixed!

[DavidLMS]

I think it must be working now

[nicolas-rabault]

This is very nice!
I like the fact that the camera configuration is saved!
In my version (the one you can directly use on the space) I displayed the cameras with their names but don't provide a capture to select them.
On the phone version on top of I added a special camera for this. In your point of view how we could create the phone camera feature on top of your version?
I can't try the recording because I don't have any robot with me for now...

[DavidLMS]

@nicolas-rabault
On a UI/UX level, I think the best thing would be to move the ‘Need an extra angle?’ banner inside the menu that appears when you click on the ‘Detect Cameras’ button on my PR. This way, if we get it working, the external camera would be added as an extra camera and it would be easier to integrate in any of the functionalities. What do you think?