diff --git a/Backend/docs/changelog.md b/Backend/docs/changelog.md new file mode 100644 index 0000000..9d68bac --- /dev/null +++ b/Backend/docs/changelog.md @@ -0,0 +1,19 @@ +- Answered user question regarding how video streaming works between clients. +- Answered user question regarding what technologies are used in the project. +- Created a plan for setting up and testing video streaming on the mobile simulator. +- Clarified the presence of Expo in the MobileApp folder and updated the video streaming plan to offer a simple web-based alternative. +- Researched the overall project architecture (turning old phones into security cameras) and analyzed video streaming requirements. +- Adjusted the video streaming plan to focus exclusively on the web-based simulator (mobile-sim.html) instead of the React Native app. +- Commenced execution of WebRTC simulator streaming implementation. +- Located the WebRTC P2P signaling logic in mobile-sim.js and began preparing the edits to fix the SDP Offer/Answer flow. +- Fixed SDP answer processing in mobile-sim.js. +- Tested the backend API endpoints... +- Received request to redesign the mobile simulator into a full-page web UI. Updating the implementation plan. +- Commenced execution of redesigning the Web UI. +- Replaced the DaisyUI phone mockup wrapper with a full-page app shell grid layout in mobile-sim.html. +- Validating matching DOM mappings between the new mobile-sim.html UI and mobile-sim.js. +- Converted mobile-sim.js state rendering logic to support the new desktop layout, including sidebar active states and live stream dot tracking. +- Starting local test for the new Web UI and WebRTC live stream. +- Ran backend tests to verify logic correctness. +- Received user request to make the system logs scrollable in the new Web UI. +- Updating camera logs container to be scrollable. diff --git a/Backend/public/mobile-sim.html b/Backend/public/mobile-sim.html index 1226772..5f0b84c 100644 --- a/Backend/public/mobile-sim.html +++ b/Backend/public/mobile-sim.html @@ -1,312 +1,555 @@ - - - - SecureCam Mobile Simulator - - - - - - - - - -
+ + + + SecureCam Web Dashboard + + + + + + + + + + + +
+ + +
+ + + + + +
+ + +
+
+
+ + OFFLINE +
+ +
+ +
+
+ ?
+ +
+
+
+ + +
+ + +
+
+
+ + +
- -
-
- Signed Out +

SecureCam Web

+

Sign in to manage visual security from your browser.

+
+ +
+
+ + +
+
+ +
+ + +
+ +
OR
+ +
+
+
+ + + + + +
+ + + + +
+ + + + + + + + + + + - - - + \ No newline at end of file diff --git a/Backend/public/mobile-sim.js b/Backend/public/mobile-sim.js index 994873c..d8311e5 100644 --- a/Backend/public/mobile-sim.js +++ b/Backend/public/mobile-sim.js @@ -355,7 +355,7 @@ const openRecordingModal = (downloadUrl, title) => { videoEl.src = downloadUrl; modal.classList.remove('hidden'); modal.classList.add('flex'); - void videoEl.play().catch(() => {}); + void videoEl.play().catch(() => { }); }; const closeRecordingModal = () => { @@ -624,7 +624,7 @@ const ensurePeerConnection = async ({ if (videoEl) { videoEl.srcObject = stream; setClientStreamMode('video'); - void videoEl.play().catch(() => {}); + void videoEl.play().catch(() => { }); } }; @@ -893,7 +893,7 @@ const connectSocket = () => { } await peerConnection.setRemoteDescription(new RTCSessionDescription(payload.data)); await applyQueuedCandidates(peerConnection, payload.streamSessionId, payload.fromDeviceId); - addActivity('WebRTC', 'Answer received'); + addActivity('WebRTC', 'Answer received and applied'); return; } @@ -1183,6 +1183,7 @@ const render = (state) => { const target = btn.dataset.target; const isActive = target === state.screen || (target === 'home' && (state.screen === 'home-camera' || state.screen === 'home-client')); btn.setAttribute('data-active', isActive); + // Optional: Force styles for Web/Desktop mode if needed, though data-active is handled by Tailwind variants }); } else { nav.classList.add('hidden'); @@ -1225,9 +1226,8 @@ const render = (state) => { list.innerHTML = state.linkedCameras.map(link => `
- ${ - state.activeCameraDeviceId === link.cameraDeviceId - ? ` + ${state.activeCameraDeviceId === link.cameraDeviceId + ? `
@@ -1237,7 +1237,7 @@ const render = (state) => {

${state.activeStreamSessionId ? 'Connecting stream...' : 'Waiting for stream'}

` - : ` + : `
@@ -1245,7 +1245,7 @@ const render = (state) => {

Stand by

` - } + }
@@ -1261,8 +1261,11 @@ const render = (state) => { if (videoEl && videoEl.srcObject !== remoteClientStream) { videoEl.srcObject = remoteClientStream; setClientStreamMode('video'); - void videoEl.play().catch(() => {}); + $('clientLiveDot')?.classList.remove('hidden'); + void videoEl.play().catch(() => { }); } + } else { + $('clientLiveDot')?.classList.add('hidden'); } const imageEl = $('clientStreamImage');