admin/38781-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-26 16:01:27 +00:00
parent ee308ed2f9
commit 0c4c4fdf8d
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/observation.tsx
View File

@ -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>