From 0c4c4fdf8d61e261d286980669146605ecece78e Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Thu, 26 Feb 2026 16:01:27 +0000
Subject: [PATCH] 3

---
 frontend/src/pages/observation.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/observation.tsx b/frontend/src/pages/observation.tsx
index c2edc37..54c9ca8 100644
--- a/frontend/src/pages/observation.tsx
+++ b/frontend/src/pages/observation.tsx
@@ -96,15 +96,16 @@ const ObservationPage = () => {
           facingMode: 'environment',
           width: { ideal: 1920 },
           height: { ideal: 1080 }
-        } 
+        },
+        audio: true // Integrate audio for synchronized recording
       });
       if (videoRef.current) {
         videoRef.current.srcObject = stream;
         setIsCameraActive(true);
       }
     } catch (err) {
-      console.error("Camera access denied:", err);
-      alert("Camera access is required for live observation simulation.");
+      console.error("Camera/Audio access denied:", err);
+      alert("Camera and Microphone access are required for full simulation recording.");
     }
   };
 
@@ -180,9 +181,14 @@ const ObservationPage = () => {
     if (!videoRef.current || !videoRef.current.srcObject) return;
 
     const stream = videoRef.current.srcObject as MediaStream;
-    const recorder = new MediaRecorder(stream, {
-      mimeType: 'video/webm'
-    });
+    
+    // Check for supported types with audio
+    const options = { mimeType: 'video/webm;codecs=vp8,opus' };
+    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+      options.mimeType = 'video/webm';
+    }
+
+    const recorder = new MediaRecorder(stream, options);
 
     const chunks: Blob[] = [];
     recorder.ondataavailable = (event) => {
@@ -215,7 +221,7 @@ const ObservationPage = () => {
       const a = document.createElement('a');
       a.style.display = 'none';
       a.href = videoUrl;
-      a.download = `JWST-REC-${new Date().getTime()}.webm`;
+      a.download = `JWST-AV-REC-${new Date().getTime()}.webm`;
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(videoUrl);
@@ -319,7 +325,7 @@ const ObservationPage = () => {
                 <div className="flex items-center space-x-2">
                    <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-green-500 animate-ping'}`}></div>
                    <div className="font-bold text-[#E3B341] tracking-widest uppercase">
-                      {isRecording ? 'REC ACTIVE' : (isFocusing ? 'Acquiring Target' : 'Observation Stable')}
+                      {isRecording ? 'A/V REC ACTIVE' : (isFocusing ? 'Acquiring Target' : 'Observation Stable')}
                    </div>
                 </div>
                 <div className="mt-3 grid grid-cols-2 gap-x-6 text-[10px]">
@@ -349,7 +355,7 @@ const ObservationPage = () => {
                       <button 
                         onClick={startRecording}
                         className="p-3 bg-black/80 border border-white/20 hover:bg-red-600 transition-all text-white"
-                        title="Start Recording"
+                        title="Start A/V Recording"
                       >
                         <BaseIcon path={mdiRecord} size={20} className="text-red-500" />
                       </button>
@@ -366,7 +372,7 @@ const ObservationPage = () => {
                       <button 
                         onClick={downloadVideo}
                         className="p-3 bg-blue-600 border border-white/20 transition-all text-white"
-                        title="Download Video"
+                        title="Download A/V Video"
                       >
                         <BaseIcon path={mdiDownload} size={20} />
                       </button>