Task Document: Dual Camera Implementation (Ionic/Capacitor) https://docs.google.com/document/d/1zIB1lKudB0A_miRk9hhqzArlGgYh7HvBNFR9ITKjPi8/edit?tab=t.0#heading=h.g65gfq4jxbr8 1. Objective Enable simultaneous video streaming and capture from both the front-facing and rear-facing cameras within the Ionic application. The end goal is to allow users to create "Picture-in-Picture" or "Split-Screen" content where they can narrate a scene while filming it. 2. Success Definition (Results) The task is considered complete when a user can open the camera feature in the deployed app and see a live feed of themselves (front camera) and their environment (back camera) simultaneously, with the ability to capture this combined view and follow code conventions/policies. 3. Functional Requirements 3.1. Live Preview Dual Feed: The application must render two distinct video feeds on the screen at the same time. Latency: Both video feeds must be synchronized with no perceptible lag between the two streams. Orientation: The feeds must correctly respect the device orientation (Portrait/Landscape). 3.2. User Interface (Layout) Composition: The default layout shall be Picture-in-Picture (PiP), where the primary camera fills the screen and the secondary camera overlays a smaller rectangle in the corner. Swap Capability: The user must be able to tap a button to swap which camera is the "Primary" (background) and which is the "Secondary" (overlay). 3.3. Capture & Output Recording: The user must be able to record a video session. Output Format: The resulting video file must be a single .mp4 (or platform equivalent) file that combines both streams exactly as they appeared on the preview screen (burned-in PiP). Gallery: The captured video must be saved to the device’s native photo gallery. 3.4. Device Eligibility & Fallback Compatibility Check: The app must programmatically check if the user's device hardware supports multi-camera concurrency. Graceful Degradation: If the device does not support dual-camera (e.g., older hardware), the app must silently fall back to standard single-camera mode without crashing. 4. Acceptance Criteria (Definition of Done) [ ] iOS Verification: Tested on iPhone XS or newer (running iOS 13+). Both cameras active simultaneously. [ ] Android Verification: Tested on a device supporting API Level 30+ with FEATURE_CAMERA_CONCURRENT. Both cameras active simultaneously. [ ] Permissions: The app correctly prompts for Camera and Microphone permissions once, covering both streams. [ ] File Artifact: A video recorded in the app plays back in the native phone gallery with both video streams visible. [ ] Stability: The app does not crash when switching between Dual Mode and Single Mode. [ ] Performance: The device does not overheat or drop below 24fps during a 60-second recording session. 5. Technical Suggestions & Implementation Strategy This section provides architectural guidance to achieve the results above, acknowledging that standard Ionic plugins do not currently support this feature. 5.1. Architecture: Custom Capacitor Plugin Since standard web technologies (navigator.mediaDevices.getUserMedia) and existing plugins (@capacitor/camera) do not support simultaneous multi-camera streams, a Custom Capacitor Plugin is required. Plugin Name: DualCameraPlugin Approach: The plugin should handle the video processing natively and render the preview behind the Ionic WebView. The Ionic app background must be set to transparent to see the video feeds. 5.2. iOS Implementation Strategy API: Must use AVCaptureMultiCamSession (available on iOS 13+). Session Management: Verify AVCaptureMultiCamSession.isMultiCamSupported. Create two AVCaptureDeviceInput objects (one for .front, one for .back). Use AVCaptureVideoPreviewLayer to composite the views. Crucial: Use AVCaptureVideoDataOutput to grab frames from both buffers for recording/compositing into a single file. 5.3. Android Implementation Strategy API: Must use Camera2 API. Concurrency Check: Query PackageManager for FEATURE_CAMERA_CONCURRENT. Session Management: Open two camera IDs simultaneously using cameraManager.openCamera. Note: Android devices have strict bandwidth limits. The implementation may need to limit resolution (e.g., 720p or 480p) to ensure both streams run smoothly without error. SurfaceViews should be used for the preview rendering. 5.4. User Interface Layer (Ionic/Angular/React) The web layer should only contain "Controls" (Record button, Swap button, Stop button). These buttons will fire methods exposed by the Capacitor Plugin (e.g., DualCamera.start(), DualCamera.swap()).