+
+ )}
+
{/* Add Camera Section */}
+
+ ๐ฑ Phone Access URL:
+
+
+ {networkAddress.error && (
+
+ {networkAddress.address}
+
+ {networkAddress.isLocalhost && networkAddress.localNetworkIP && (
+
+ (Network IP detected)
+
+ )}
+ {networkAddress.isLocalhost && !networkAddress.localNetworkIP && (
+ (Using localhost)
+ )}
+
+ Note: {networkAddress.error}
+
+ )}
+ Add Camera
@@ -432,17 +660,29 @@ const CameraConfiguration: React.FC
{/* Camera Preview */}
= ({
- {/* Always show the video element if we have a stream, regardless of isPreviewActive */}
- {stream ? (
+ {camera.type === "phone" ? (
+ /* Phone Camera - Show Stream if Active, Otherwise QR Code */
+
) : (
+ /* No Stream Available */
+ {phoneStream && phoneStream.isActive ? (
+ /* Live Phone Stream */
+ <>
+ 
+
+ ) : stream ? (
+ /* Regular Camera Stream */
<>
+
+
+
+ LIVE
+
+
+ ๐ฑ Phone Stream
+
+
+ ) : (
+ /* QR Code Display */
+
+ {camera.session_id ? (
+
+ )}
+
+
+ )}
+
+
+
+
+
+ WAITING
+
+
- Type: {camera.type} | Device: {camera.device_id?.substring(0, 10)}...
+ Type: {camera.type} |{" "}
+ {camera.type === "phone" && camera.session_id ? (
+ <>Session: {camera.session_id.substring(0, 12)}...
+ ) : (
+ <>Device: {camera.device_id?.substring(0, 10)}...
+ )}
+
+ {/* Phone Camera URL Display */}
+ {camera.type === "phone" && camera.session_id && (
+
+ Phone URL:
+
+ )}
+ {generatePhoneUrl(camera)}
+
+
+ {/* QR Code */}
+
+ );
+};
diff --git a/src/hooks/useNetworkAddress.ts b/src/hooks/useNetworkAddress.ts
new file mode 100644
index 0000000..474d6db
--- /dev/null
+++ b/src/hooks/useNetworkAddress.ts
@@ -0,0 +1,215 @@
+import { useState, useEffect } from 'react';
+
+interface NetworkAddressResult {
+ address: string;
+ isLocalhost: boolean;
+ localNetworkIP: string | null;
+ loading: boolean;
+ error: string | null;
+}
+
+export const useNetworkAddress = (): NetworkAddressResult => {
+ const [result, setResult] = useState
+
+
+ {/* Title */}
+
+
+
+ {/* Controls */}
+ {showControls && (
+ {title}
+ {showUrl && ( +{url}
+ )} +
+
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+ Invalid URL
++ Missing session ID or WebRTC ID in URL +
++ URL should be: + /remote_cam/<session_id>?webrtcId=<webrtc_id> +
+
+ {/* Header */}
+
+ );
+};
+
+export default RemoteCamera;
diff --git a/vite.config.ts b/vite.config.ts
index 6ef54e8..d133786 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,25 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
+import fs from "fs";
import { componentTagger } from "lovable-tagger";
+// Check if certificates exist
+const certPath = path.resolve(__dirname, "./certs/localhost+3.pem");
+const keyPath = path.resolve(__dirname, "./certs/localhost+3-key.pem");
+const certsExist = fs.existsSync(certPath) && fs.existsSync(keyPath);
+
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
server: {
host: "::",
port: 8080,
+ ...(certsExist && {
+ https: {
+ key: fs.readFileSync(keyPath),
+ cert: fs.readFileSync(certPath),
+ },
+ }),
// Proxy removed - the React app now handles API URLs directly through the ApiContext
// This provides full flexibility for localhost/ngrok switching at runtime
},
+
+
+ {/* Main Content */}
+
+
+
+
+
+
+
+ + Remote Camera +
++ Session: {sessionId?.substring(0, 8)}... +
+
+ {getStatusIcon()}
+ {getStatusText()}
+
+
+ {/* Video Preview */}
+
+
+ {isStreaming ? (
+
+
+ {/* Controls */}
+
+ {error && (
+
+
+
+ )}
+
+ Error:
+{error}
+
+ {!isStreaming ? (
+
+ ) : (
+
+ )}
+
+ {!isConnected && (
+
+ )}
+
+
+ {/* Debug Information */}
+
+
+
+
+
+
+
+
+
+ Session ID: {debugInfo.sessionId}
+
+
+ WebRTC ID: {debugInfo.webrtcId}
+
+
+ Server URL: {debugInfo.serverUrl}
+
+
+ Status: {connectionStatus}
+
+
+ Streaming: {isStreaming ? "Yes" : "No"}
+
+ {stream && (
+
+ Stream Active: {stream.active ? "Yes" : "No"}
+
+ )}
+
+ User Agent: {debugInfo.userAgent}
+
+