Task: Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay.
1. Window Management (React):
- Requirement: Use
react-grid-layout to create a draggable and resizable grid container.
- Component: Create a
CameraCard component that encapsulates the video stream, topic name, and a "Close" button.
- State: Use a local
LayoutConfig to save the positions of windows during the session.
2. Data Stream Multiplexing:
- Logic: When this workspace is active, initialize a
MultiTopicSubscriber.
- Action: It should send a batch "Subscribe" message to the Dreamview backend for all selected camera topics.
- Format: Render each stream using
canvas or img tags optimized for base64/binary JPEG strings.
3. Transition Logic:
- Requirement: Provide a
toggleWorkspace function.
- Behavior: *
onEnter: Save current Dreamview state -> Disable 3D cloud rendering -> Open Workspace.
onExit: Unsubscribe from extra cameras -> Enable 3D cloud rendering -> Close Workspace.