@camera.ui/browser 0.1.9 → 0.1.11

package/dist/index.d.ts

@@ -265,6 +265,7 @@ export declare interface CameraUiContext {
     extraProxyQuery: Readonly<Ref<Record<string, string> | undefined>>;
     error: Readonly<Ref<Error | undefined>>;
     wsTransport?: WsTransport;
+    iceServers?: Readonly<Ref<RTCIceServer[] | undefined>>;
     on: (event: CameraUiEventType, cb: CameraUiEventCallback) => void;
     off: (event: CameraUiEventType, cb: CameraUiEventCallback) => void;
 }
@@ -280,6 +281,7 @@ export declare interface CameraUiPluginInput {
     bulkTransport?: NatsTransport;
     target: Ref<ConnectionTarget | null>;
     wsTransport?: WsTransport;
+    iceServers?: Readonly<Ref<RTCIceServer[] | undefined>>;
 }
 
 /* Excluded from this release type: CarbonDioxideInfoProperties */

package/dist/index.js

@@ -4,7 +4,7 @@ import { tryOnScopeDispose, useTimeoutFn, whenever } from "@vueuse/core";
 import { SensorType } from "@camera.ui/sdk";
 import { isNoRespondersError } from "@camera.ui/rpc";
 import { classifyClose } from "@camera.ui/transport";
-//#region src/utils/createDebouncedCache.ts
+// src/utils/createDebouncedCache.ts
 function createDebouncedCache(options = {}) {
 	const { releaseDelay = 1e3, onRelease } = options;
 	const cache = /* @__PURE__ */ new Map();
@@ -85,8 +85,7 @@ function createDebouncedCache(options = {}) {
 		forEachValue
 	};
 }
-//#endregion
-//#region src/utils/createRetryTimer.ts
+// src/utils/createRetryTimer.ts
 var RETRY_MIN_MS = 1e3;
 var RETRY_MAX_MS$1 = 3e4;
 function createRetryTimer() {
@@ -113,23 +112,20 @@ function createRetryTimer() {
 		reset
 	};
 }
-//#endregion
-//#region src/composables/useCameraUi.ts
+// src/composables/useCameraUi.ts
 function useCameraUi() {
 	const context = inject(CAMERA_UI_INJECTION_KEY);
 	if (!context) throw new Error("[camera.ui] useCameraUi() called without CameraUiPlugin installed. Make sure to call app.use(createCameraUiPlugin({ ... })) before using this composable.");
 	return context;
 }
-//#endregion
-//#region ../../externals/camera.ui/server/src/utils/camera.ts
+// ../../externals/camera.ui/server/src/utils/camera.ts
 function normalizeCameraName(name) {
 	return name.replace(/ /g, "_").toLowerCase();
 }
 function createSourceName(cameraName, sourceName) {
 	return `cui_${normalizeCameraName(cameraName)}_${normalizeCameraName(sourceName)}`;
 }
-//#endregion
-//#region ../../externals/camera.ui/server/src/rpc/namespaces.ts
+// ../../externals/camera.ui/server/src/rpc/namespaces.ts
 var NamespaceManager = class {
 	static coreManagerNamespaces() {
 		return {
@@ -251,8 +247,7 @@ var NamespaceManager = class {
 		return "workers.logs";
 	}
 };
-//#endregion
-//#region src/composables/useRpc.ts
+// src/composables/useRpc.ts
 var DEFAULT_MAX_RETRIES = 3;
 var DEFAULT_CONNECT_TIMEOUT_MS = 3e4;
 var LINK_SETTLE_MS = 3e4;
@@ -488,8 +483,7 @@ function makeAbortError() {
 	err.name = "AbortError";
 	return err;
 }
-//#endregion
-//#region src/composables/bulkLane.ts
+// src/composables/bulkLane.ts
 var PROBE_TIMEOUT_MS = 2e3;
 var RECHECK_AFTER_MS = 6e4;
 var deadMarks = /* @__PURE__ */ new WeakMap();
@@ -544,8 +538,7 @@ function clearMark(lane) {
 	deadMarks.get(lane)?.stop();
 	deadMarks.delete(lane);
 }
-//#endregion
-//#region src/composables/useTabVisibility.ts
+// src/composables/useTabVisibility.ts
 var DEFAULT_TAB_PAUSE_MS = 3e4;
 var log$2 = new Logger("TabVisibility");
 var _isVisible = ref(typeof document === "undefined" ? true : document.visibilityState === "visible");
@@ -662,8 +655,7 @@ function useTabVisibility() {
 		onTabVisible
 	};
 }
-//#endregion
-//#region src/composables/useSnapshot.ts
+// src/composables/useSnapshot.ts
 var REVOKE_DELAY_MS = 5e3;
 var SERVER_CLOCK_STEP_MS = 6e4;
 var REFRESH_LINGER_MS = 500;
@@ -998,8 +990,7 @@ function useSnapshot(cameraIdOrName) {
 		refresh
 	};
 }
-//#endregion
-//#region src/composables/useCamera.ts
+// src/composables/useCamera.ts
 var NOT_MODIFIED = "not-modified";
 var CLOCK_SAMPLE_MAX_MS = 5e3;
 var snapshotWithMetaSupport = /* @__PURE__ */ new WeakMap();
@@ -1386,8 +1377,7 @@ function leaveSensorEvents(client, fanout, handler) {
 	if (sensorEventFanouts.get(client) === fanout) sensorEventFanouts.delete(client);
 	fanout.subscribed.then((off) => off()).catch(() => {});
 }
-//#endregion
-//#region src/composables/useDeviceManager.ts
+// src/composables/useDeviceManager.ts
 function useDeviceManager() {
 	const ctx = useCameraUi();
 	const namespaces = NamespaceManager.deviceManagerNamespaces();
@@ -1397,8 +1387,7 @@ function useDeviceManager() {
 	}
 	return { getCamera };
 }
-//#endregion
-//#region src/composables/useCameraById.ts
+// src/composables/useCameraById.ts
 var cameraCache = createDebouncedCache({
 	releaseDelay: 1e3,
 	onRelease: (_key, device) => device.close()
@@ -1571,8 +1560,7 @@ function useCameraById(cameraIdOrName) {
 		refresh
 	};
 }
-//#endregion
-//#region src/composables/resolvePluginId.ts
+// src/composables/resolvePluginId.ts
 var pluginIdCache = /* @__PURE__ */ new Map();
 var pluginNames = /* @__PURE__ */ new Map();
 var pendingResolves = /* @__PURE__ */ new Map();
@@ -1603,8 +1591,7 @@ async function resolvePluginId(rpcRef, pluginName) {
 	pendingResolves.set(pluginName, promise);
 	return promise;
 }
-//#endregion
-//#region src/composables/useOAuth.ts
+// src/composables/useOAuth.ts
 var POLL_ACTIVE_MS = 1500;
 var POLL_IDLE_MS = 3e4;
 var oauthStates = /* @__PURE__ */ new Map();
@@ -1719,8 +1706,7 @@ function useOAuth(pluginName) {
 		refresh
 	};
 }
-//#endregion
-//#region src/composables/usePlugin.ts
+// src/composables/usePlugin.ts
 var RETRY_BASE_MS = 2e3;
 var RETRY_MAX_MS = 3e4;
 var pluginCache = createDebouncedCache({ releaseDelay: 1e3 });
@@ -2051,15 +2037,13 @@ function usePlugin(pluginName, options = {}) {
 		refresh
 	};
 }
-//#endregion
-//#region src/composables/utils.ts
+// src/composables/utils.ts
 function extractCameraId(camera) {
 	if (!camera) return void 0;
 	if (typeof camera === "string") return camera;
 	return camera.id;
 }
-//#endregion
-//#region src/composables/useSensor.ts
+// src/composables/useSensor.ts
 function createSensorTypeGuard(sensorType) {
 	return (sensor) => sensor.type === sensorType;
 }
@@ -2893,8 +2877,7 @@ function useClassifierSensors(camera) {
 		error
 	};
 }
-//#endregion
-//#region src/composables/useStorage.ts
+// src/composables/useStorage.ts
 function createReactiveStorage(proxy, client) {
 	const config = shallowRef();
 	const isLoading = ref(false);
@@ -3405,8 +3388,7 @@ function useSensorStorage(sensorId, pluginId) {
 		submitValue: operations.submitValue
 	};
 }
-//#endregion
-//#region src/composables/resetClientState.ts
+// src/composables/resetClientState.ts
 function resetClientState() {
 	clearPluginCache();
 	clearCameraCache();
@@ -3424,8 +3406,7 @@ function refreshClientStates() {
 	forgetPluginStatus();
 	refreshAllCameraDevices();
 }
-//#endregion
-//#region src/plugin.ts
+// src/plugin.ts
 var CAMERA_UI_INJECTION_KEY = Symbol("camera-ui");
 var log$1 = new Logger("plugin");
 function isContext(input) {
@@ -3433,7 +3414,7 @@ function isContext(input) {
 }
 var DOWN_DEBOUNCE_MS = 4e3;
 function makeContextFromTransport(input) {
-	const { natsTransport, bulkTransport, target, wsTransport } = input;
+	const { natsTransport, bulkTransport, target, wsTransport, iceServers } = input;
 	let hasBeenConnected = natsTransport.getClient() !== null;
 	let lastClient = natsTransport.getClient();
 	let downTimer = null;
@@ -3525,6 +3506,7 @@ function makeContextFromTransport(input) {
 		extraProxyQuery,
 		error: readonly(error),
 		wsTransport,
+		iceServers,
 		on,
 		off
 	});
@@ -3535,8 +3517,7 @@ function createCameraUiPlugin(input) {
 		app.provide(CAMERA_UI_INJECTION_KEY, ctx);
 	} };
 }
-//#endregion
-//#region src/streaming/activityMode.ts
+// src/streaming/activityMode.ts
 var DEFAULT_CONFIG = {
 	standbyTimeout: 5e3,
 	activityTimeout: 5e3,
@@ -3681,8 +3662,7 @@ function createActivityMode(options) {
 		dispose
 	};
 }
-//#endregion
-//#region src/streaming/config.ts
+// src/streaming/config.ts
 var STREAM_CONFIG = {
 	WEBRTC: {
 		RECONNECT_DELAY: 1e3,
@@ -3719,8 +3699,7 @@ var STREAM_CONFIG = {
 		]
 	}
 };
-//#endregion
-//#region src/streaming/mjpeg.ts
+// src/streaming/mjpeg.ts
 function isJpegFrame(data) {
 	if (data.byteLength < 2) return false;
 	const bytes = new Uint8Array(data, 0, 2);
@@ -3779,8 +3758,7 @@ function createMJPEGHandler(options) {
 		close
 	};
 }
-//#endregion
-//#region src/streaming/fmp4.ts
+// src/streaming/fmp4.ts
 var MOOV = 1836019574;
 var TRAK = 1953653099;
 var TKHD = 1953196132;
@@ -3936,8 +3914,7 @@ function scanRun(view, start, end, fragment, onKeyframe) {
 	}
 	return time;
 }
-//#endregion
-//#region src/streaming/utils.ts
+// src/streaming/utils.ts
 var H265_TEST_CODEC = "hvc1.1.6.L153.B0";
 function safariVersion() {
 	return navigator.userAgent.match(/version\/(\d+)/i);
@@ -4044,8 +4021,7 @@ function abortableSleep(ms, signal) {
 		}, { once: true });
 	});
 }
-//#endregion
-//#region src/streaming/mse.ts
+// src/streaming/mse.ts
 var CUT_MARGIN = .001;
 var MAX_KEYFRAMES = 256;
 var LIVE_EDGE_MARGIN = .3;
@@ -4305,13 +4281,22 @@ async function playVideo(videoElement) {
 		}
 	}
 }
-//#endregion
-//#region src/streaming/webrtc.ts
-function createBasePeerConnection(signal, onCandidate, filterUdp) {
-	const peerConnection = new RTCPeerConnection({
-		bundlePolicy: "max-bundle",
-		iceServers: [...STREAM_CONFIG.WEBRTC.ICE_SERVERS]
-	});
+// src/streaming/webrtc.ts
+function newPeerConnection(iceServers = [...STREAM_CONFIG.WEBRTC.ICE_SERVERS]) {
+	try {
+		return new RTCPeerConnection({
+			bundlePolicy: "max-bundle",
+			iceServers
+		});
+	} catch {
+		return new RTCPeerConnection({
+			bundlePolicy: "max-bundle",
+			iceServers: [...STREAM_CONFIG.WEBRTC.ICE_SERVERS]
+		});
+	}
+}
+function createBasePeerConnection(signal, onCandidate, filterUdp, iceServers) {
+	const peerConnection = newPeerConnection(iceServers);
 	peerConnection.onicecandidate = (ev) => {
 		if (signal.aborted) return;
 		if (filterUdp && ev.candidate?.protocol === "udp") return;
@@ -4354,7 +4339,7 @@ function closePeerConnection(state) {
 	state.isConnected = false;
 }
 function createWebRTCHandler(options) {
-	const { mode, onConnected, onDisconnected, onFailed, onCandidate, signal } = options;
+	const { mode, iceServers, onConnected, onDisconnected, onFailed, onCandidate, signal } = options;
 	const state = {
 		pc: null,
 		micTransceiver: null,
@@ -4362,7 +4347,7 @@ function createWebRTCHandler(options) {
 	};
 	const filterUdp = mode === "webrtc/tcp";
 	function createPeerConnection() {
-		const peerConnection = createBasePeerConnection(signal, onCandidate, filterUdp);
+		const peerConnection = createBasePeerConnection(signal, onCandidate, filterUdp, iceServers);
 		peerConnection.onconnectionstatechange = () => {
 			if (signal.aborted) return;
 			const connectionState = peerConnection.connectionState;
@@ -4407,7 +4392,7 @@ function createWebRTCHandler(options) {
 	};
 }
 function createBackchannelHandler(options) {
-	const { filterUdp, onConnected, onFailed, onCandidate, signal } = options;
+	const { filterUdp, iceServers, onConnected, onFailed, onCandidate, signal } = options;
 	const state = {
 		pc: null,
 		micTransceiver: null,
@@ -4429,7 +4414,7 @@ function createBackchannelHandler(options) {
 		});
 	}
 	function createPeerConnection() {
-		const peerConnection = createBasePeerConnection(signal, sendCandidate, filterUdp);
+		const peerConnection = createBasePeerConnection(signal, sendCandidate, filterUdp, iceServers);
 		peerConnection.onconnectionstatechange = () => {
 			if (signal.aborted) return;
 			const connectionState = peerConnection.connectionState;
@@ -4475,8 +4460,7 @@ async function processWebRTCMessage(handler, msg) {
 		case "webrtc/candidate": if (msg.value) await handler.handleCandidate(msg.value);
 	}
 }
-//#endregion
-//#region src/streaming/streamConnection.ts
+// src/streaming/streamConnection.ts
 var log = new Logger("StreamConnection");
 var MSE_AUDIO_CODEC = /mp4a|opus|flac|mp3/i;
 var RETRY_BASE_DELAY = 1e3;
@@ -4525,6 +4509,7 @@ var StreamConnection = class {
 	triedSourceIds = /* @__PURE__ */ new Set();
 	options;
 	wsTransport;
+	iceServers;
 	scope = effectScope(true);
 	stopsWhenHidden = suspendsWhenHidden();
 	connectionGeneration = 0;
@@ -4580,6 +4565,7 @@ var StreamConnection = class {
 		if (!ctx.wsTransport) throw new Error("[camera.ui] StreamConnection requires a wsTransport on CameraUiContext — pass `wsTransport` to createCameraUiPlugin.");
 		this.target = ctx.target;
 		this.wsTransport = ctx.wsTransport;
+		this.iceServers = ctx.iceServers;
 		const { autoStart = true } = options;
 		this.status = ref("idle");
 		this.activeMode = ref("webrtc");
@@ -5383,6 +5369,7 @@ var StreamConnection = class {
 		this.startConnectTimeout();
 		const handler = createWebRTCHandler({
 			mode,
+			iceServers: this.iceServers?.value,
 			signal: this.abortController.signal,
 			onConnected: (stream) => this.handleWebRTCConnected(stream),
 			onDisconnected: () => this.handleWebRTCDisconnected(),
@@ -5721,6 +5708,7 @@ var StreamConnection = class {
 		if (this.webrtcHandler && (!this.webrtcHandler.isConnected || this.awaitingWebRTCFrame)) return;
 		const handler = createBackchannelHandler({
 			filterUdp: this.requestedMode.value === "webrtc/tcp",
+			iceServers: this.iceServers?.value,
 			signal: this.abortController.signal,
 			onCandidate: (candidate) => this.sendWsMessage({
 				type: "webrtc/candidate",
@@ -5770,8 +5758,7 @@ var StreamConnection = class {
 function createStreamConnection(options) {
 	return new StreamConnection(options);
 }
-//#endregion
-//#region src/streaming/streamManager.ts
+// src/streaming/streamManager.ts
 var StreamManager = class {
 	streams = /* @__PURE__ */ new Map();
 	standalone = /* @__PURE__ */ new Set();
@@ -5932,8 +5919,7 @@ var streamManager = new StreamManager();
 function restartConnectedStreams() {
 	return streamManager.restartConnected();
 }
-//#endregion
-//#region src/composables/useFullscreen.ts
+// src/composables/useFullscreen.ts
 var fsRegistry = /* @__PURE__ */ new WeakMap();
 var fullscreenRoot = null;
 function setFullscreenRoot(el) {
@@ -6056,8 +6042,7 @@ function applyWrapperStyles(wrapper, mode) {
 		overscrollBehavior: "contain"
 	});
 }
-//#endregion
-//#region src/composables/useCameraStream.ts
+// src/composables/useCameraStream.ts
 var AUTO_STAGGER_STEP_MS = 75;
 var AUTO_STAGGER_RESET_MS = 500;
 var OFFSCREEN_STOP_DELAY_MS = 1e4;
@@ -6330,6 +6315,14 @@ function useCameraStream(options) {
 			isUsingCachedStream.value = true;
 			currentStream.value = cached.stream;
 			if (camDevice && cached.cameraDeviceRef) cached.cameraDeviceRef.value = camDevice;
+			const resolution = toValue(options.resolution) ?? "high-resolution";
+			if (cached.stream.requestedResolution.value !== resolution) {
+				streamManager.updateMediaStream(camName, null);
+				cached.stream.setResolution(resolution);
+			}
+			cleanupFns.push(watch(() => toValue(options.resolution), (role) => {
+				if (role) cached.stream.setResolution(role);
+			}));
 			let video = cached.sharedVideoElement;
 			if (!video) {
 				video = createVideoElement();
@@ -6718,8 +6711,7 @@ function useCameraStream(options) {
 		captureScreenshot
 	};
 }
-//#endregion
-//#region src/composables/useCoreManager.ts
+// src/composables/useCoreManager.ts
 function useCoreManager() {
 	const ctx = useCameraUi();
 	const namespaces = NamespaceManager.coreManagerNamespaces();
@@ -6733,8 +6725,7 @@ function useCoreManager() {
 		getInstanceId: () => rpcCall(ctx.rpc, (rpc) => proxy(rpc).getInstanceId())
 	};
 }
-//#endregion
-//#region src/composables/useTerminal.ts
+// src/composables/useTerminal.ts
 function useTerminal() {
 	const cameraUi = useCameraUi();
 	const { rpc, isConnected: isClientConnected } = cameraUi;
@@ -6893,5 +6884,4 @@ function useTerminal() {
 		close
 	};
 }
-//#endregion
 export { CAMERA_UI_INJECTION_KEY, NamespaceManager, STREAM_CONFIG, acquireSensorManager, clearCameraCache, clearOAuthCache, clearPluginCache, clearSensorCache, clearSnapshotCache, clearStorageCache, createActivityMode, createCameraUiPlugin, createReactiveCameraDevice, createSensorManager, getSnapshotUrl, isReactiveAudioSensor, isReactiveBatteryInfo, isReactiveCarbonDioxideInfo, isReactiveCarbonMonoxideSensor, isReactiveClassifierSensor, isReactiveColdSensor, isReactiveContactSensor, isReactiveDoorbellTrigger, isReactiveFaceSensor, isReactiveGarageControl, isReactiveGasSensor, isReactiveHeatSensor, isReactiveHumidityInfo, isReactiveIlluminanceInfo, isReactiveLeakSensor, isReactiveLicensePlateSensor, isReactiveLightControl, isReactiveLockControl, isReactiveMotionSensor, isReactiveObjectSensor, isReactiveOccupancySensor, isReactivePTZControl, isReactivePowerSensor, isReactiveProblemSensor, isReactiveSecuritySystem, isReactiveSirenControl, isReactiveSmokeSensor, isReactiveSwitchControl, isReactiveTamperSensor, isReactiveTemperatureInfo, isReactiveVibrationSensor, refreshClientSubscriptions, releaseSensorManager, resetClientState, restartConnectedStreams, rpcCall, setFullscreenRoot, useAllSensors, useAudioSensor, useCameraById, useCameraStorage, useCameraStream, useCameraUi, useClassifierSensors, useCoreManager, useCuiFullscreen, useDeviceManager, useFaceSensor, useLicensePlateSensor, useMotionSensor, useOAuth, useObjectSensor, usePTZControl, usePlugin, usePluginStorage, useRpcCall, useRpcSubscription, useSensorById, useSensorByType, useSensorStorage, useSensors, useSensorsByType, useSnapshot, useTabVisibility, useTerminal, useTopmostFullscreenElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -62,9 +62,9 @@
     "typescript-eslint": "^8.72.1",
     "unplugin-dts": "^1.1.2",
     "updates": "^20.0.0",
-    "vite": "^8.3.5",
+    "vite": "^8.3.6",
     "vitest": "^5.1.0",
-    "vue": "^3.5.44",
+    "vue": "^3.5.45",
     "vue-tsc": "3.3.11"
   },
   "overrides": {