@camera.ui/browser 0.0.124 → 0.0.125

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Logger } from "@camera.ui/logger";
-import { computed, inject, markRaw, onBeforeUnmount, reactive, readonly, ref, shallowRef, toValue, watch } from "vue";
+import { computed, effectScope, inject, markRaw, onBeforeUnmount, reactive, readonly, ref, shallowRef, toValue, watch } from "vue";
 import { tryOnScopeDispose, useTimeoutFn, whenever } from "@vueuse/core";
 import { SensorType } from "@camera.ui/sdk";
 //#region src/utils/createDebouncedCache.ts
@@ -302,6 +302,8 @@ function useRpcSubscription(subscribeFn, options = {}) {
 			}
 		} finally {
 			pending = false;
+			const current = ctx.rpc.value;
+			if (!disposed && current && current !== rpc) bind(current);
 		}
 	}
 	function unbind() {
@@ -337,13 +339,15 @@ function defaultRetryDelayMs(attempt) {
 }
 function defaultShouldRetry(err) {
 	if (!(err instanceof Error)) return false;
+	const code = err.code;
+	if (code === "TIMEOUT" || code === "CONNECTION_CLOSED") return true;
 	const msg = err.message.toLowerCase();
 	if (msg.includes("not connected")) return true;
 	if (msg.includes("connection closed")) return true;
 	if (msg.includes("no responders")) return true;
 	if (msg.includes("connection refused")) return true;
 	if (msg.includes("socket")) return true;
-	if (msg.includes("timeout")) return true;
+	if (msg.includes("timed out") || msg.includes("timeout")) return true;
 	return false;
 }
 async function waitForRpc(rpcRef, timeoutMs, signal) {
@@ -417,6 +421,13 @@ function setSnapshot(cameraId, data) {
 function getSnapshot(cameraId) {
 	return snapshotCache.get(cameraId);
 }
+function subscribeSnapshot(cameraId, cb) {
+	if (!subscribers.has(cameraId)) subscribers.set(cameraId, /* @__PURE__ */ new Set());
+	subscribers.get(cameraId).add(cb);
+	return () => {
+		subscribers.get(cameraId)?.delete(cb);
+	};
+}
 function getSnapshotUrl(cameraId) {
 	const buffer = snapshotCache.get(cameraId);
 	if (!buffer) return void 0;
@@ -464,13 +475,17 @@ function useSnapshot(cameraIdOrName) {
 		}
 		_isLoading.value = true;
 		try {
-			const device = await deviceManager.getCamera(id);
-			if (device) {
-				const result = await device.fetchSnapshot();
-				if (result) {
-					setSnapshot(id, result);
-					snapshot.value = result;
+			const device = await acquireCameraDevice(deviceManager, id);
+			try {
+				if (device) {
+					const result = await device.fetchSnapshot();
+					if (result) {
+						setSnapshot(id, result);
+						snapshot.value = result;
+					}
 				}
+			} finally {
+				if (device) releaseCameraDevice(id);
 			}
 		} catch {} finally {
 			_isLoading.value = false;
@@ -487,13 +502,17 @@ function useSnapshot(cameraIdOrName) {
 		if (isCameraDisabled(cameraIdName)) return;
 		_isLoading.value = true;
 		try {
-			const device = await deviceManager.getCamera(id);
-			if (device) {
-				const result = await device.fetchSnapshot(void 0, true);
-				if (result) {
-					setSnapshot(id, result);
-					snapshot.value = result;
+			const device = await acquireCameraDevice(deviceManager, id);
+			try {
+				if (device) {
+					const result = await device.fetchSnapshot(void 0, true);
+					if (result) {
+						setSnapshot(id, result);
+						snapshot.value = result;
+					}
 				}
+			} finally {
+				if (device) releaseCameraDevice(id);
 			}
 		} catch {} finally {
 			_isLoading.value = false;
@@ -538,9 +557,12 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 	const camera = shallowRef(initialCamera);
 	const connected = ref(false);
 	const frameWorkerConnected = ref(false);
-	const snapshot = computed(() => getSnapshot(initialCamera._id));
+	const snapshot = shallowRef(getSnapshot(initialCamera._id));
 	const snapshotLoading = ref(false);
 	const sensorStates = ref({});
+	const unsubscribeSnapshot = subscribeSnapshot(initialCamera._id, () => {
+		snapshot.value = getSnapshot(initialCamera._id);
+	});
 	const name = computed(() => camera.value.name);
 	const room = computed(() => camera.value.room);
 	const nativeId = computed(() => camera.value.nativeId);
@@ -643,6 +665,7 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 		closeSubscription = void 0;
 		closeSensorSubscription?.();
 		closeSensorSubscription = void 0;
+		unsubscribeSnapshot();
 	}
 	async function fetchSnapshotFn(sourceId, forceNew) {
 		const useForSnapshotSource = sources.value.find((s) => s.useForSnapshot);
@@ -715,6 +738,27 @@ function clearCameraCache() {
 	cameraCache.clear();
 	pendingLoads$1.clear();
 }
+async function acquireCameraDevice(deviceManager, id) {
+	if (cameraCache.has(id)) return cameraCache.acquire(id, () => {
+		throw new Error("Should not create - already cached");
+	});
+	const pending = pendingLoads$1.get(id);
+	if (pending) {
+		const device = await pending;
+		return device ? cameraCache.acquire(id, () => device) : void 0;
+	}
+	const loadPromise = deviceManager.getCamera(id);
+	pendingLoads$1.set(id, loadPromise);
+	try {
+		const device = await loadPromise;
+		return device ? cameraCache.acquire(id, () => device) : void 0;
+	} finally {
+		pendingLoads$1.delete(id);
+	}
+}
+function releaseCameraDevice(id) {
+	cameraCache.release(id);
+}
 function reconnectAllCameraDevices() {
 	cameraCache.forEachValue((device) => {
 		device.reconnect().catch(() => {});
@@ -749,7 +793,7 @@ function useCameraById(cameraIdOrName) {
 			_isLoading.value = true;
 			try {
 				const device = await pending;
-				if (device && cameraCache.has(id)) {
+				if (device && cameraCache.has(id) && toValue(cameraIdOrName) === id) {
 					const cached = cameraCache.acquire(id, () => device);
 					currentCameraId = id;
 					camera.value = cached;
@@ -770,6 +814,10 @@ function useCameraById(cameraIdOrName) {
 			const device = await loadPromise;
 			if (device) {
 				cameraCache.acquire(id, () => device);
+				if (toValue(cameraIdOrName) !== id) {
+					cameraCache.release(id);
+					return;
+				}
 				currentCameraId = id;
 				camera.value = device;
 			}
@@ -862,7 +910,7 @@ function usePlugin(pluginName) {
 		if (pending) {
 			_isLoading.value = true;
 			try {
-				if (await pending) {
+				if (await pending && toValue(pluginName) === name) {
 					const cachedAfterPending = acquirePlugin(name);
 					if (cachedAfterPending) {
 						currentPluginName = name;
@@ -895,6 +943,10 @@ function usePlugin(pluginName) {
 			const result = await loadPromise;
 			if (result) {
 				pluginCache.acquire(name, () => result);
+				if (toValue(pluginName) !== name) {
+					pluginCache.release(name);
+					return;
+				}
 				currentPluginName = name;
 				plugin.value = result.proxy;
 				contract.value = result.contract;
@@ -1121,19 +1173,28 @@ function createSensorManager(rpcOrContext, cameraId, sensorSubjectNamespace, sen
 		for (const msg of queued) handleGlobalSensorEvent(msg);
 		initialized.value = true;
 	}
+	function launchInit() {
+		const p = doInit().finally(() => {
+			if (initPromise === p) initPromise = void 0;
+		});
+		initPromise = p;
+		return p;
+	}
 	async function ensureInitialized() {
 		if (initialized.value) return;
-		if (!initPromise) initPromise = doInit().finally(() => {
-			initPromise = void 0;
-		});
+		if (!initPromise) launchInit();
 		return initPromise;
 	}
 	async function reconnect() {
 		initialized.value = false;
-		if (!initPromise) initPromise = doInit().finally(() => {
-			initPromise = void 0;
-		});
-		return initPromise;
+		if (initPromise) {
+			const p = initPromise.catch(() => {}).then(() => doInit()).finally(() => {
+				if (initPromise === p) initPromise = void 0;
+			});
+			initPromise = p;
+			return p;
+		}
+		return launchInit();
 	}
 	function close() {
 		globalUnsubscribe?.();
@@ -1830,7 +1891,7 @@ function isContext(input) {
 }
 function makeContextFromTransport(input) {
 	const { natsTransport, target, wsTransport } = input;
-	let hasBeenConnected = false;
+	let hasBeenConnected = natsTransport.getClient() !== null;
 	const rpc = shallowRef(natsTransport.getClient() ?? void 0);
 	const isConnected = ref(natsTransport.getClient()?.isConnected ?? false);
 	const error = ref(void 0);
@@ -2263,6 +2324,7 @@ function createMSEHandler(options) {
 	const { videoElement, onReady, onFirstData, onError, signal } = options;
 	let mediaSource = null;
 	let sourceBuffer = null;
+	let objectUrl = null;
 	let isReady = false;
 	let hasFirstData = false;
 	let pendingBuffer = new Uint8Array(STREAM_CONFIG.MSE.BUFFER_SIZE);
@@ -2287,7 +2349,8 @@ function createMSEHandler(options) {
 			videoElement.disableRemotePlayback = true;
 			videoElement.srcObject = mediaSource;
 		} else {
-			videoElement.src = URL.createObjectURL(mediaSource);
+			objectUrl = URL.createObjectURL(mediaSource);
+			videoElement.src = objectUrl;
 			videoElement.srcObject = null;
 		}
 		return filterSupportedCodecs(supportedCodecs, MediaSourceConstructor.isTypeSupported.bind(MediaSourceConstructor));
@@ -2327,7 +2390,9 @@ function createMSEHandler(options) {
 			const data = pendingBuffer.slice(0, pendingLength);
 			sourceBuffer.appendBuffer(data);
 			pendingLength = 0;
-		} catch {}
+		} catch (err) {
+			if (!recoverFromQuota(err)) onError(err instanceof Error ? err : new Error(String(err)));
+		}
 		if (!sourceBuffer.updating && sourceBuffer.buffered?.length) {
 			const end = sourceBuffer.buffered.end(sourceBuffer.buffered.length - 1);
 			const start = end - STREAM_CONFIG.MSE.BUFFER_WINDOW;
@@ -2359,11 +2424,38 @@ function createMSEHandler(options) {
 		}
 		if (sourceBuffer.updating || pendingLength > 0) {
 			const bytes = new Uint8Array(data);
+			if (pendingLength + bytes.byteLength > pendingBuffer.byteLength) {
+				pendingLength = 0;
+				onError(/* @__PURE__ */ new Error("MSE pending buffer overflow"));
+				return;
+			}
 			pendingBuffer.set(bytes, pendingLength);
 			pendingLength += bytes.byteLength;
 		} else try {
 			sourceBuffer.appendBuffer(data);
-		} catch {}
+		} catch (err) {
+			if (recoverFromQuota(err)) {
+				const bytes = new Uint8Array(data);
+				if (bytes.byteLength <= pendingBuffer.byteLength) {
+					pendingBuffer.set(bytes, 0);
+					pendingLength = bytes.byteLength;
+				}
+			}
+		}
+	}
+	function recoverFromQuota(err) {
+		if (err?.name !== "QuotaExceededError") return false;
+		if (!sourceBuffer || sourceBuffer.updating || !sourceBuffer.buffered?.length) return false;
+		try {
+			const start0 = sourceBuffer.buffered.start(0);
+			const end = sourceBuffer.buffered.end(sourceBuffer.buffered.length - 1);
+			const evictTo = Math.max(start0 + 1, end - STREAM_CONFIG.MSE.BUFFER_WINDOW);
+			if (evictTo <= start0) return false;
+			sourceBuffer.remove(start0, evictTo);
+			return true;
+		} catch {
+			return false;
+		}
 	}
 	function close() {
 		if (sourceBuffer) {
@@ -2377,6 +2469,10 @@ function createMSEHandler(options) {
 			mediaSource.endOfStream();
 		} catch {}
 		mediaSource = null;
+		if (objectUrl) {
+			URL.revokeObjectURL(objectUrl);
+			objectUrl = null;
+		}
 		isReady = false;
 		hasFirstData = false;
 		pendingLength = 0;
@@ -2592,6 +2688,7 @@ var StreamConnection = class {
 	options;
 	connectionGeneration = 0;
 	abortController = new AbortController();
+	scope = effectScope(true);
 	offTabVisible;
 	offTabPaused;
 	wasPausedByVisibility = false;
@@ -2618,6 +2715,8 @@ var StreamConnection = class {
 	stopWsConnectTimeout;
 	startConnectTimeout;
 	stopConnectTimeout;
+	startMseConnectTimeout;
+	stopMseConnectTimeout;
 	startReconnectTimeout;
 	stopReconnectTimeout;
 	constructor(options) {
@@ -2651,55 +2750,62 @@ var StreamConnection = class {
 			if (this.requestedMode.value === "auto") return this.activeMode.value;
 			return this.requestedMode.value;
 		});
-		const { onTabPaused, onTabVisible } = useTabVisibility();
-		const { start: startWsConnectTimeout, stop: stopWsConnectTimeout } = useTimeoutFn(() => {
-			if (this.wsHandle?.readyState === WebSocket.CONNECTING) {
-				this.disconnectWebSocket();
-				if (!this.abortController.signal.aborted && this.status.value !== "closed") this.restart();
-			}
-		}, STREAM_CONFIG.WEBRTC.WS_CONNECT_TIMEOUT, { immediate: false });
-		this.startWsConnectTimeout = startWsConnectTimeout;
-		this.stopWsConnectTimeout = stopWsConnectTimeout;
-		const { start: startConnectTimeout, stop: stopConnectTimeout } = useTimeoutFn(() => {
-			if (this.webrtcHandler && !this.webrtcHandler.isConnected) if (this.requestedMode.value === "auto") if (this.mseHandler?.isReady) {
-				this.activeMode.value = "mse";
-				this.status.value = "connected";
-			} else {
-				this.activeMode.value = "mse";
-				this.startMSE();
-			}
-			else this.restart();
-		}, STREAM_CONFIG.WEBRTC.CONNECT_TIMEOUT, { immediate: false });
-		this.startConnectTimeout = startConnectTimeout;
-		this.stopConnectTimeout = stopConnectTimeout;
-		const { start: startReconnectTimeout, stop: stopReconnectTimeout } = useTimeoutFn(() => {
-			if (!this.abortController.signal.aborted) this.restart();
-		}, STREAM_CONFIG.WEBRTC.RECONNECT_DELAY, { immediate: false });
-		this.startReconnectTimeout = startReconnectTimeout;
-		this.stopReconnectTimeout = stopReconnectTimeout;
-		this.setupWatchers();
-		this.offTabPaused = onTabPaused(() => {
-			log.debug(`onTabPaused fired — status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
-			if (this.status.value === "idle" || this.status.value === "closed") {
-				log.debug(`onTabPaused — already in ${this.status.value}, skipping stop()`);
-				return;
-			}
-			this.wasPausedByVisibility = true;
-			this.stop();
-			log.debug("onTabPaused — stop() done, wasPausedByVisibility=true");
-		});
-		this.offTabVisible = onTabVisible(() => {
-			log.debug(`onTabVisible fired — wasPausedByVisibility=${this.wasPausedByVisibility}, status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
-			if (!this.wasPausedByVisibility) {
-				log.debug("onTabVisible — not paused by visibility, no-op");
-				return;
-			}
-			this.wasPausedByVisibility = false;
-			this.startWhenReady();
+		this.scope.run(() => {
+			const { onTabPaused, onTabVisible } = useTabVisibility();
+			const wsConnectTimeout = useTimeoutFn(() => {
+				if (this.wsHandle?.readyState === WebSocket.CONNECTING) {
+					this.disconnectWebSocket();
+					if (!this.abortController.signal.aborted && this.status.value !== "closed") this.restart();
+				}
+			}, STREAM_CONFIG.WEBRTC.WS_CONNECT_TIMEOUT, { immediate: false });
+			const connectTimeout = useTimeoutFn(() => {
+				if (this.webrtcHandler && !this.webrtcHandler.isConnected) if (this.requestedMode.value === "auto") {
+					this.webrtcHandler.close();
+					this.webrtcHandler = void 0;
+					this.activeMode.value = "mse";
+					if (this.mseHandler?.isReady) this.status.value = "connected";
+					else this.startMSE();
+				} else this.restart();
+			}, STREAM_CONFIG.WEBRTC.CONNECT_TIMEOUT, { immediate: false });
+			const mseConnectTimeout = useTimeoutFn(() => {
+				if (this.abortController.signal.aborted || this.status.value === "connected" || this.status.value === "closed") return;
+				if (this.mseHandler && !this.mseHandler.isReady) this.restart();
+			}, STREAM_CONFIG.WEBRTC.CONNECT_TIMEOUT, { immediate: false });
+			const reconnectTimeout = useTimeoutFn(() => {
+				if (!this.abortController.signal.aborted) this.restart();
+			}, STREAM_CONFIG.WEBRTC.RECONNECT_DELAY, { immediate: false });
+			this.startWsConnectTimeout = wsConnectTimeout.start;
+			this.stopWsConnectTimeout = wsConnectTimeout.stop;
+			this.startConnectTimeout = connectTimeout.start;
+			this.stopConnectTimeout = connectTimeout.stop;
+			this.startMseConnectTimeout = mseConnectTimeout.start;
+			this.stopMseConnectTimeout = mseConnectTimeout.stop;
+			this.startReconnectTimeout = reconnectTimeout.start;
+			this.stopReconnectTimeout = reconnectTimeout.stop;
+			this.setupWatchers();
+			this.offTabPaused = onTabPaused(() => {
+				log.debug(`onTabPaused fired — status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
+				if (this.status.value === "idle" || this.status.value === "closed") {
+					log.debug(`onTabPaused — already in ${this.status.value}, skipping stop()`);
+					return;
+				}
+				this.wasPausedByVisibility = true;
+				this.stop();
+				log.debug("onTabPaused — stop() done, wasPausedByVisibility=true");
+			});
+			this.offTabVisible = onTabVisible(() => {
+				log.debug(`onTabVisible fired — wasPausedByVisibility=${this.wasPausedByVisibility}, status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
+				if (!this.wasPausedByVisibility) {
+					log.debug("onTabVisible — not paused by visibility, no-op");
+					return;
+				}
+				this.wasPausedByVisibility = false;
+				this.startWhenReady();
+			});
+			if (autoStart) whenever(this.isReady, () => {
+				if (this.status.value === "idle" || this.status.value === "closed") this.start();
+			}, { immediate: true });
 		});
-		if (autoStart) whenever(this.isReady, () => {
-			if (this.status.value === "idle" || this.status.value === "closed") this.start();
-		}, { immediate: true });
 	}
 	async start() {
 		log.debug(`start() called — status=${this.status.value}, isReady=${this.isReady.value}`);
@@ -2810,7 +2916,14 @@ var StreamConnection = class {
 		this.offTabVisible = void 0;
 		this.offTabPaused?.();
 		this.offTabPaused = void 0;
+		const video = this.videoElement.value;
+		if (video) {
+			if (this.onVideoPauseBound) video.removeEventListener("pause", this.onVideoPauseBound);
+			if (this.onVideoPlayBound) video.removeEventListener("play", this.onVideoPlayBound);
+			if (this.onVideoResizeBound) video.removeEventListener("resize", this.onVideoResizeBound);
+		}
 		this.stop();
+		this.scope.stop();
 	}
 	async restart() {
 		this.status.value = "reconnecting";
@@ -3046,7 +3159,12 @@ var StreamConnection = class {
 	handleWsMessage(ev) {
 		if (this.abortController.signal.aborted) return;
 		if (typeof ev.data === "string") {
-			const msg = JSON.parse(ev.data);
+			let msg;
+			try {
+				msg = JSON.parse(ev.data);
+			} catch {
+				return;
+			}
 			this.handleMessage(msg);
 		} else if (this.mseHandler) {
 			this.mseHandler.appendBuffer(ev.data);
@@ -3106,12 +3224,15 @@ var StreamConnection = class {
 		if (this.requestedMode.value === "auto" && this.mseHandler) {
 			this.mseHandler.close();
 			this.mseHandler = void 0;
+			this.stopMseConnectTimeout();
 		}
 	}
 	handleWebRTCDisconnected() {
 		if (this.status.value !== "closed" && !this.abortController.signal.aborted) {
 			this.status.value = "reconnecting";
 			if (this.requestedMode.value === "auto" && this.mseHandler?.isReady) {
+				this.webrtcHandler?.close();
+				this.webrtcHandler = void 0;
 				this.activeMode.value = "mse";
 				this.status.value = "connected";
 			} else this.restart();
@@ -3121,6 +3242,8 @@ var StreamConnection = class {
 		if (this.abortController.signal.aborted) return;
 		this.stopConnectTimeout();
 		if (this.requestedMode.value === "auto") {
+			this.webrtcHandler?.close();
+			this.webrtcHandler = void 0;
 			this.activeMode.value = "mse";
 			if (!this.mseHandler?.isReady) this.startMSE();
 			else this.status.value = "connected";
@@ -3130,6 +3253,7 @@ var StreamConnection = class {
 		}
 	}
 	startMSE() {
+		if (this.mseHandler) return;
 		const video = this.videoElement.value;
 		if (this.abortController.signal.aborted || !video) return;
 		this.mseHandler = createMSEHandler({
@@ -3141,17 +3265,24 @@ var StreamConnection = class {
 				if (this.requestedMode.value !== "auto") {
 					this.error.value = err;
 					this.status.value = "error";
+				} else if (this.activeMode.value === "mse" && this.status.value === "connected") {
+					log.debug("MSE error while active in auto mode — restarting:", err);
+					this.restart();
 				}
 			}
 		});
 		const codecs = this.mseHandler.setup();
-		if (codecs) this.sendWsMessage({
-			type: "mse",
-			value: codecs
-		});
+		if (codecs) {
+			this.sendWsMessage({
+				type: "mse",
+				value: codecs
+			});
+			this.startMseConnectTimeout();
+		}
 	}
 	handleMSEReady() {
 		if (this.abortController.signal.aborted) return;
+		this.stopMseConnectTimeout();
 		if (this.requestedMode.value === "auto") {
 			if (!this.webrtcHandler?.isConnected) {
 				this.activeMode.value = "mse";
@@ -3221,14 +3352,9 @@ var StreamConnection = class {
 		this.abortController.abort();
 		this.stopConnectTimeout();
 		this.stopWsConnectTimeout();
+		this.stopMseConnectTimeout();
 		this.stopReconnectTimeout();
 		this.stopMseMonitor();
-		const videoEl = this.videoElement.value;
-		if (videoEl) {
-			if (this.onVideoPauseBound) videoEl.removeEventListener("pause", this.onVideoPauseBound);
-			if (this.onVideoPlayBound) videoEl.removeEventListener("play", this.onVideoPlayBound);
-			if (this.onVideoResizeBound) videoEl.removeEventListener("resize", this.onVideoResizeBound);
-		}
 		this.lastMediaStream = null;
 		this.webrtcHandler?.close();
 		this.webrtcHandler = void 0;
@@ -3293,6 +3419,9 @@ var StreamManager = class {
 	has(cameraName) {
 		return this.streams.has(cameraName);
 	}
+	getRefCount(cameraName) {
+		return this.streams.get(cameraName)?.refCount ?? 0;
+	}
 	get(cameraName) {
 		return this.streams.get(cameraName);
 	}
@@ -3367,7 +3496,7 @@ var StreamManager = class {
 		for (const timer of this.releaseTimers.values()) clearTimeout(timer);
 		this.releaseTimers.clear();
 		for (const [cameraName, entry] of this.streams) {
-			entry.stream.stop();
+			destroyStream(entry.stream);
 			this.streams.delete(cameraName);
 		}
 	}
@@ -3406,12 +3535,17 @@ var StreamManager = class {
 		const entry = this.streams.get(cameraName);
 		if (!entry) return;
 		if (entry.refCount <= 0) {
-			entry.stream.stop();
+			destroyStream(entry.stream);
 			this.streams.delete(cameraName);
 		}
 		this.releaseTimers.delete(cameraName);
 	}
 };
+function destroyStream(stream) {
+	const s = stream;
+	if (typeof s.destroy === "function") s.destroy();
+	else s.stop();
+}
 var streamManager = new StreamManager();
 //#endregion
 //#region src/composables/useFullscreen.ts
@@ -3552,13 +3686,15 @@ function useCameraStream(options) {
 		const cam = cameraGetter.value;
 		return typeof cam === "string" ? cam : cam.name.value;
 	});
-	const { camera: cameraDeviceFromLookup, isLoading: cameraDeviceLoading } = useCameraById(cameraName);
+	const { camera: cameraDeviceFromLookup, isLoading: lookupLoading } = useCameraById(computed(() => isCameraString.value ? cameraName.value : ""));
+	const cameraDeviceLoading = computed(() => isCameraString.value && lookupLoading.value);
 	const resolvedCameraDevice = computed(() => {
 		if (isCameraString.value) return cameraDeviceFromLookup.value;
 		return cameraGetter.value;
 	});
 	let startDelayTimer;
 	let ownedConnection;
+	let registeredCamName;
 	const containerElement = shallowRef();
 	const fullscreenElement = shallowRef();
 	const videoElement = shallowRef();
@@ -3601,7 +3737,13 @@ function useCameraStream(options) {
 		onStreamStart: () => {
 			if (!isCameraDisabled.value) currentStream.value?.start();
 		},
-		onStreamStop: () => currentStream.value?.stop(),
+		onStreamStop: () => {
+			if (isUsingCachedStream.value) {
+				const camName = registeredCamName ?? cameraName.value;
+				if (camName && streamManager.getRefCount(camName) > 1) return;
+			}
+			currentStream.value?.stop();
+		},
 		isStreamPlaying: () => isPlaying.value
 	});
 	const { isFullscreen, toggle: toggleFullscreen } = useCuiFullscreen(fullscreenTarget);
@@ -3679,6 +3821,7 @@ function useCameraStream(options) {
 		const cached = streamManager.acquire(camName, containerElement);
 		if (cached) {
 			initialized.value = true;
+			registeredCamName = camName;
 			isUsingCachedStream.value = true;
 			currentStream.value = cached.stream;
 			if (camDevice && cached.cameraDeviceRef) cached.cameraDeviceRef.value = camDevice;
@@ -3693,10 +3836,11 @@ function useCameraStream(options) {
 			videoElement.value = video;
 			cached.videoElementRef.value = video;
 			setupCachedStreamWatchers(cached.stream, video, camName);
-			if (shouldAutoStart() && autoStartReady.value && !isCameraDisabled.value) if (cached.stream.activeMode.value !== "mse") attachCachedStream(cached, video, camName);
+			if (shouldAutoStart() && autoStartReady.value && activityModeManager.mode.value === "always-on" && !isCameraDisabled.value) if (cached.stream.activeMode.value !== "mse") attachCachedStream(cached, video, camName);
 			else video.play().catch(() => {});
 		} else if (camDevice) {
 			initialized.value = true;
+			registeredCamName = camName;
 			isUsingCachedStream.value = false;
 			currentStream.value = ownedStream;
 			const video = createVideoElement();
@@ -3846,11 +3990,12 @@ function useCameraStream(options) {
 		if (video) video.muted = true;
 		for (const stopFn of cleanupFns) stopFn();
 		cleanupFns.length = 0;
-		if (isolated) ownedConnection?.stop();
+		if (isolated) ownedConnection?.destroy();
 		else {
-			const camName = cameraName.value;
+			const camName = registeredCamName;
 			const video = videoElement.value;
 			if (camName && initialized.value) streamManager.release(camName, video, containerElement);
+			if (!initialized.value || currentStream.value !== ownedStream) ownedConnection?.destroy();
 		}
 		activityModeManager.dispose();
 	}
@@ -3955,7 +4100,7 @@ function useCameraStream(options) {
 		autoStartReady
 	], () => {
 		if (!initialized.value) initialize();
-		else if (autoStartReady.value && shouldAutoStart() && !isPlaying.value && status.value === "idle" && !isCameraDisabled.value) currentStream.value?.start();
+		else if (autoStartReady.value && shouldAutoStart() && activityModeManager.mode.value === "always-on" && !isPlaying.value && status.value === "idle" && !isCameraDisabled.value) currentStream.value?.start();
 	}, { immediate: true });
 	watch(isCameraDisabled, (disabled, wasDisabled) => {
 		if (!initialized.value) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.0.124",
+  "version": "0.0.125",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@camera.ui/logger": ">=0.0.2",
-    "@camera.ui/rpc": ">=1.0.6",
+    "@camera.ui/rpc": ">=1.0.7",
     "@camera.ui/sdk": ">=0.0.11",
     "@camera.ui/transport": ">=0.0.1",
     "@vueuse/core": ">=14.3.0",
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@camera.ui/logger": "file:../../packages/logger",
-    "@camera.ui/rpc": "^1.0.6",
+    "@camera.ui/rpc": "^1.0.7",
     "@camera.ui/sdk": "~0.0.11",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.3.1",
@@ -60,8 +60,8 @@
     "typescript": "5.9.3",
     "typescript-eslint": "^8.62.1",
     "unplugin-dts": "^1.0.3",
-    "updates": "^17.18.1",
-    "vite": "^8.1.2",
+    "updates": "^17.18.2",
+    "vite": "^8.1.3",
     "vitest": "^4.1.9",
     "vue": "^3.5.39",
     "vue-tsc": "^3.3.6"