fix(webapp): require realtime before requesting streams

WebApp/src/lib/app/controller.js

@@ -1577,6 +1577,28 @@ const startSocketHeartbeat = () => {
 	}, SOCKET_HEARTBEAT_INTERVAL_MS);
 };
 
+const ensureRealtimeConnection = async ({ timeoutMs = 4000 } = {}) => {
+	if (socket?.connected || getAppState().socketConnected) {
+		return true;
+	}
+
+	if (!getAppState().deviceToken) {
+		return false;
+	}
+
+	connectSocket();
+
+	const startedAt = Date.now();
+	while (Date.now() - startedAt < timeoutMs) {
+		if (socket?.connected || getAppState().socketConnected) {
+			return true;
+		}
+		await sleep(100);
+	}
+
+	return Boolean(socket?.connected || getAppState().socketConnected);
+};
+
 const connectSocket = () => {
 	const { deviceToken } = getAppState();
 	if (!deviceToken) return;
@@ -2231,6 +2253,12 @@ const actions = {
 	},
 
 	async requestStream(cameraDeviceId) {
+		const realtimeReady = await ensureRealtimeConnection();
+		if (!realtimeReady) {
+			pushToast('Realtime connection unavailable. Reconnect and try again.', 'error');
+			return;
+		}
+
 		try {
 			requestedStreams.add(cameraDeviceId);
 			await api.streams.request(cameraDeviceId);