@camera.ui/browser 0.1.14 → 0.1.16

package/dist/index.d.ts

@@ -209,6 +209,8 @@ export declare interface CameraStream {
     readonly status: Ref<StreamStatus>;
     readonly isPlaying: Ref<boolean>;
     readonly stalled: Ref<boolean>;
+    readonly connectionPath: Ref<StreamConnectionPath | undefined>;
+    readonly webrtcUnreachable: Ref<boolean>;
     readonly activeMode: Ref<ActiveStreamingMode>;
     readonly activeResolution: Ref<StreamingRole>;
     readonly degradedFrom: Ref<StreamingRole | null>;
@@ -769,6 +771,11 @@ export declare class NamespaceManager {
     }
 }
 
+export declare interface NativeFullscreen {
+    enter: () => Promise<boolean>;
+    exit: () => Promise<void>;
+}
+
 export { NatsStatus }
 
 declare interface NotificationManagerNamespaces {
@@ -1129,6 +1136,8 @@ export declare interface ReactiveStream {
     readonly hasBackchannel: Ref<boolean>;
     readonly isPlaying: Ref<boolean>;
     readonly stalled?: Ref<boolean>;
+    readonly connectionPath?: Readonly<Ref<StreamConnectionPath | undefined>>;
+    readonly webrtcUnreachable?: Readonly<Ref<boolean>>;
     readonly error: Ref<Error | undefined>;
     readonly probeInfo: Ref<ProbeStream | undefined>;
     readonly muted: Ref<boolean>;
@@ -1294,6 +1303,8 @@ export declare interface SensorRegistryRPC {
 
 export declare function setFullscreenRoot(el: HTMLElement | null): void;
 
+export declare function setNativeFullscreen(native: NativeFullscreen | null): void;
+
 /* Excluded from this release type: SirenControlProperties */
 
 /* Excluded from this release type: SirenProperty */
@@ -1345,8 +1356,9 @@ export declare const STREAM_CONFIG: {
         readonly RECONNECT_DELAY: 1000;
         readonly CONNECT_TIMEOUT: 10000;
         readonly WS_CONNECT_TIMEOUT: 5000;
+        readonly DISCONNECT_GRACE: 5000;
         readonly ICE_SERVERS: readonly [{
-            readonly urls: "stun:stun.l.google.com:19302";
+            readonly urls: "stun:stun.cloudflare.com:3478";
         }];
     };
     readonly MSE: {
@@ -1361,6 +1373,8 @@ export declare const STREAM_CONFIG: {
     };
 };
 
+export declare type StreamConnectionPath = 'direct' | 'relay' | 'tunnel';
+
 declare type StreamDegradeReason = 'codec';
 
 export declare interface StreamOptions {
@@ -1705,204 +1719,3 @@ declare module 'fastify' {
     uploadToDisk?: boolean;
   }
 }
-
-/**
- * Copyright (c) 2017, Daniel Imms (MIT License).
- * Copyright (c) 2018, Microsoft Corporation (MIT License).
- */
-
-declare module '@scrypted/node-pty' {
-  /**
-   * Forks a process as a pseudoterminal.
-   * @param file The file to launch.
-   * @param args The file's arguments as argv (string[]) or in a pre-escaped CommandLine format
-   * (string). Note that the CommandLine option is only available on Windows and is expected to be
-   * escaped properly.
-   * @param options The options of the terminal.
-   * @see CommandLineToArgvW https://msdn.microsoft.com/en-us/library/windows/desktop/bb776391(v=vs.85).aspx
-   * @see Parsing C++ Comamnd-Line Arguments https://msdn.microsoft.com/en-us/library/17w5ykft.aspx
-   * @see GetCommandLine https://msdn.microsoft.com/en-us/library/windows/desktop/ms683156.aspx
-   */
-  export function spawn(file: string, args: string[] | string, options: IPtyForkOptions | IWindowsPtyForkOptions): IPty;
-
-  export interface IBasePtyForkOptions {
-    /**
-     * Name of the terminal to be set in environment ($TERM variable).
-     */
-    name?: string;
-
-    /**
-     * Number of intial cols of the pty.
-     */
-    cols?: number;
-
-    /**
-     * Number of initial rows of the pty.
-     */
-    rows?: number;
-
-    /**
-     * Working directory to be set for the child program.
-     */
-    cwd?: string;
-
-    /**
-     * Environment to be set for the child program.
-     */
-    env?: Record<string, string | undefined>;
-
-    /**
-     * String encoding of the underlying pty.
-     * If set, incoming data will be decoded to strings and outgoing strings to bytes applying this encoding.
-     * If unset, incoming data will be delivered as raw bytes (Buffer type).
-     * By default 'utf8' is assumed, to unset it explicitly set it to `null`.
-     */
-    encoding?: string | null;
-
-    /**
-     * (EXPERIMENTAL)
-     * Whether to enable flow control handling (false by default). If enabled a message of `flowControlPause`
-     * will pause the socket and thus blocking the child program execution due to buffer back pressure.
-     * A message of `flowControlResume` will resume the socket into flow mode.
-     * For performance reasons only a single message as a whole will match (no message part matching).
-     * If flow control is enabled the `flowControlPause` and `flowControlResume` messages are not forwarded to
-     * the underlying pseudoterminal.
-     */
-    handleFlowControl?: boolean;
-
-    /**
-     * (EXPERIMENTAL)
-     * The string that should pause the pty when `handleFlowControl` is true. Default is XOFF ('\x13').
-     */
-    flowControlPause?: string;
-
-    /**
-     * (EXPERIMENTAL)
-     * The string that should resume the pty when `handleFlowControl` is true. Default is XON ('\x11').
-     */
-    flowControlResume?: string;
-  }
-
-  export interface IPtyForkOptions extends IBasePtyForkOptions {
-    /**
-     * Security warning: use this option with great caution,
-     * as opened file descriptors with higher privileges might leak to the child program.
-     */
-    uid?: number;
-    gid?: number;
-  }
-
-  export interface IWindowsPtyForkOptions extends IBasePtyForkOptions {
-    /**
-     * Whether to use the ConPTY system on Windows. When this is not set, ConPTY will be used when
-     * the Windows build number is >= 18309 (instead of winpty). Note that ConPTY is available from
-     * build 17134 but is too unstable to enable by default.
-     *
-     * This setting does nothing on non-Windows.
-     */
-    useConpty?: boolean;
-
-    /**
-     * Whether to use PSEUDOCONSOLE_INHERIT_CURSOR in conpty.
-     * @see https://docs.microsoft.com/en-us/windows/console/createpseudoconsole
-     */
-    conptyInheritCursor?: boolean;
-  }
-
-  /**
-   * An interface representing a pseudoterminal, on Windows this is emulated via the winpty library.
-   */
-  export interface IPty {
-    /**
-     * The process ID of the outer process.
-     */
-    readonly pid: number;
-
-    /**
-     * The column size in characters.
-     */
-    readonly cols: number;
-
-    /**
-     * The row size in characters.
-     */
-    readonly rows: number;
-
-    /**
-     * The title of the active process.
-     */
-    readonly process: string;
-
-    /**
-     * (EXPERIMENTAL)
-     * Whether to handle flow control. Useful to disable/re-enable flow control during runtime.
-     * Use this for binary data that is likely to contain the `flowControlPause` string by accident.
-     */
-    handleFlowControl: boolean;
-
-    /**
-     * Adds an event listener for when a data event fires. This happens when data is returned from
-     * the pty.
-     * @returns an `IDisposable` to stop listening.
-     */
-    readonly onData: IEvent<string>;
-
-    /**
-     * Adds an event listener for when an exit event fires. This happens when the pty exits.
-     * @returns an `IDisposable` to stop listening.
-     */
-    readonly onExit: IEvent<{ exitCode: number; signal?: number }>;
-
-    /**
-     * Resizes the dimensions of the pty.
-     * @param columns The number of columns to use.
-     * @param rows The number of rows to use.
-     */
-    resize(columns: number, rows: number): void;
-
-    /**
-     * Clears the pty's internal representation of its buffer. This is a no-op
-     * unless on Windows/ConPTY. This is useful if the buffer is cleared on the
-     * frontend in order to synchronize state with the backend to avoid ConPTY
-     * possibly reprinting the screen.
-     */
-    clear(): void;
-
-    /**
-     * Writes data to the pty.
-     * @param data The data to write.
-     */
-    write(data: string): void;
-
-    /**
-     * Kills the pty.
-     * @param signal The signal to use, defaults to SIGHUP. This parameter is not supported on
-     * Windows.
-     * @throws Will throw when signal is used on Windows.
-     */
-    kill(signal?: string): void;
-
-    /**
-     * Pauses the pty for customizable flow control.
-     */
-    pause(): void;
-
-    /**
-     * Resumes the pty for customizable flow control.
-     */
-    resume(): void;
-  }
-
-  /**
-   * An object that can be disposed via a dispose function.
-   */
-  export interface IDisposable {
-    dispose(): void;
-  }
-
-  /**
-   * An event that can be listened to.
-   * @returns an `IDisposable` to stop listening.
-   */
-  export type IEvent<T> = (listener: (e: T) => any) => IDisposable;
-}

package/dist/index.js

@@ -484,7 +484,7 @@ function makeAbortError() {
 	return err;
 }
 // src/composables/bulkLane.ts
-var PROBE_TIMEOUT_MS = 2e3;
+var PROBE_TIMEOUT_MS$1 = 2e3;
 var RECHECK_AFTER_MS = 6e4;
 var deadMarks = /* @__PURE__ */ new WeakMap();
 var runningProbes = /* @__PURE__ */ new WeakMap();
@@ -521,7 +521,7 @@ function probeBulkClient(client) {
 }
 async function answersPing(client) {
 	try {
-		await client.flush(PROBE_TIMEOUT_MS);
+		await client.flush(PROBE_TIMEOUT_MS$1);
 		return true;
 	} catch {
 		return false;
@@ -3668,7 +3668,8 @@ var STREAM_CONFIG = {
 		RECONNECT_DELAY: 1e3,
 		CONNECT_TIMEOUT: 1e4,
 		WS_CONNECT_TIMEOUT: 5e3,
-		ICE_SERVERS: [{ urls: "stun:stun.l.google.com:19302" }]
+		DISCONNECT_GRACE: 5e3,
+		ICE_SERVERS: [{ urls: "stun:stun.cloudflare.com:3478" }]
 	},
 	MSE: {
 		BUFFER_SIZE: 2097152,
@@ -3999,6 +4000,9 @@ function checkWebRTCCompatibility(probe) {
 function hasManagedMediaSource() {
 	return "ManagedMediaSource" in window;
 }
+function hasMediaSource() {
+	return "MediaSource" in window || hasManagedMediaSource();
+}
 function getMediaSourceConstructor() {
 	if (hasManagedMediaSource()) return window.ManagedMediaSource;
 	if ("MediaSource" in window) return window.MediaSource;
@@ -4281,6 +4285,101 @@ async function playVideo(videoElement) {
 		}
 	}
 }
+// src/streaming/relayFirst.ts
+var PROBE_STUN_SERVERS = [{ urls: "stun:stun.cloudflare.com:3478" }, { urls: "stun:stun.l.google.com:19302" }];
+var PROBE_SETTLE_MS = 1500;
+var PROBE_TIMEOUT_MS = 4e3;
+var PROBE_REUSE_MS = 6e4;
+var RELAY_WAIT_MS = 3e3;
+var RELAY_HEAD_START_MS = 500;
+var IPV4 = /^\d{1,3}(\.\d{1,3}){3}$/;
+var lastProbe;
+function relayFirstAddress(iceServers) {
+	if (!usesWebKitNetworking() || !iceServers?.some((server) => urlsOf(server).some(isIPv6OnlyStun))) return Promise.resolve(void 0);
+	if (!lastProbe || Date.now() - lastProbe.startedAt > PROBE_REUSE_MS) lastProbe = {
+		startedAt: Date.now(),
+		address: probeSingleIPv4Target()
+	};
+	return lastProbe.address;
+}
+function relayFirstIceServers(iceServers) {
+	return (iceServers ?? []).map((server) => ({
+		...server,
+		urls: urlsOf(server).filter((url) => !/^stuns?:/i.test(url) || isIPv6OnlyStun(url))
+	})).filter((server) => server.urls.length > 0);
+}
+function relayPermitCandidate(address) {
+	return `candidate:1 1 udp 1 ${address} 9 typ srflx raddr 0.0.0.0 rport 0`;
+}
+function orderRelayFirst(add) {
+	const held = [];
+	let relaySeen = false;
+	let open = false;
+	function release() {
+		if (open) return;
+		open = true;
+		clearTimeout(wait);
+		for (const candidate of held.splice(0)) add(candidate).catch(() => {});
+	}
+	const wait = setTimeout(release, RELAY_WAIT_MS);
+	return async (candidate) => {
+		if (open || !isUdpIPv4(candidate)) return add(candidate);
+		if (relaySeen || !/ typ relay\b/.test(candidate)) {
+			held.push(candidate);
+			return;
+		}
+		relaySeen = true;
+		setTimeout(release, RELAY_HEAD_START_MS);
+		return add(candidate);
+	};
+}
+function probeSingleIPv4Target() {
+	return new Promise((resolve) => {
+		let pc;
+		try {
+			pc = new RTCPeerConnection({ iceServers: PROBE_STUN_SERVERS });
+		} catch {
+			resolve(void 0);
+			return;
+		}
+		let address;
+		let settle;
+		const timeout = setTimeout(() => finish(void 0), PROBE_TIMEOUT_MS);
+		function finish(result) {
+			clearTimeout(timeout);
+			clearTimeout(settle);
+			pc.onicecandidate = null;
+			pc.close();
+			resolve(result);
+		}
+		pc.onicecandidate = (event) => {
+			if (!event.candidate) {
+				finish(void 0);
+				return;
+			}
+			const found = event.candidate.address ?? event.candidate.candidate.split(" ")[4];
+			if (address || event.candidate.type !== "srflx" || !found || !IPV4.test(found)) return;
+			address = found;
+			settle = setTimeout(() => finish(address), PROBE_SETTLE_MS);
+		};
+		pc.createDataChannel("probe");
+		pc.createOffer().then((offer) => pc.setLocalDescription(offer)).catch(() => finish(void 0));
+	});
+}
+function usesWebKitNetworking() {
+	if (typeof navigator === "undefined") return false;
+	return /AppleWebKit/i.test(navigator.userAgent) && !/Chrome|Chromium|Android|Edg/i.test(navigator.userAgent);
+}
+function urlsOf(server) {
+	return Array.isArray(server.urls) ? server.urls : [server.urls];
+}
+function isIPv6OnlyStun(url) {
+	return /^stuns?:\[/i.test(url);
+}
+function isUdpIPv4(candidate) {
+	const fields = candidate.split(" ");
+	return fields[2]?.toLowerCase() === "udp" && IPV4.test(fields[4] ?? "");
+}
 // src/streaming/webrtc.ts
 function newPeerConnection(iceServers = [...STREAM_CONFIG.WEBRTC.ICE_SERVERS]) {
 	try {
@@ -4320,12 +4419,40 @@ async function handleIceCandidate(pc, signal, candidate, filterUdp) {
 		sdpMid: "0"
 	});
 }
+function createRelayFirst(state, signal, filterUdp, probe) {
+	const add = (candidate) => handleIceCandidate(state.pc, signal, candidate, filterUdp);
+	let address;
+	let handle = add;
+	return {
+		async settle() {
+			address = probe && !filterUdp ? await probe : void 0;
+			if (address) handle = orderRelayFirst(add);
+		},
+		iceServers: (servers) => address ? relayFirstIceServers(servers) : servers,
+		permit(send) {
+			if (address && !signal.aborted) send(relayPermitCandidate(address));
+		},
+		handleCandidate: (candidate) => handle(candidate)
+	};
+}
 async function setMicTrack(micTransceiver, signal, track) {
 	if (signal.aborted || !micTransceiver) return;
 	try {
 		await micTransceiver.sender.replaceTrack(track);
 	} catch {}
 }
+async function readPeerPath(pc) {
+	const reports = /* @__PURE__ */ new Map();
+	let pairId;
+	(await pc.getStats()).forEach((report, id) => {
+		reports.set(id, report);
+		if (report.type === "transport" && report.selectedCandidatePairId) pairId = report.selectedCandidatePairId;
+		else if (report.type === "candidate-pair" && report.selected) pairId ??= id;
+	});
+	const pair = pairId ? reports.get(pairId) : void 0;
+	if (!pair) return void 0;
+	return [reports.get(pair.localCandidateId)?.candidateType, reports.get(pair.remoteCandidateId)?.candidateType].includes("relay") ? "relay" : "direct";
+}
 function closePeerConnection(state) {
 	if (state.micTransceiver) {
 		state.micTransceiver.sender.replaceTrack(null).catch(() => {});
@@ -4339,21 +4466,38 @@ function closePeerConnection(state) {
 	state.isConnected = false;
 }
 function createWebRTCHandler(options) {
-	const { mode, iceServers, onConnected, onDisconnected, onFailed, onCandidate, signal } = options;
+	const { mode, iceServers, relayFirst, onConnected, onReconnected, onDisconnected, onFailed, onCandidate, onPath, signal } = options;
 	const state = {
 		pc: null,
 		micTransceiver: null,
 		isConnected: false
 	};
 	const filterUdp = mode === "webrtc/tcp";
+	const relay = createRelayFirst(state, signal, filterUdp, relayFirst);
+	async function handleAnswer(sdp) {
+		await handleSdpAnswer(state.pc, signal, sdp);
+		relay.permit(onCandidate);
+	}
 	function createPeerConnection() {
-		const peerConnection = createBasePeerConnection(signal, onCandidate, filterUdp, iceServers);
+		const peerConnection = createBasePeerConnection(signal, onCandidate, filterUdp, relay.iceServers(iceServers));
+		let stream;
+		function reportPath() {
+			readPeerPath(peerConnection).then((path) => {
+				if (path && !signal.aborted && state.pc === peerConnection) onPath(path);
+			}, () => {});
+		}
 		peerConnection.onconnectionstatechange = () => {
 			if (signal.aborted) return;
 			const connectionState = peerConnection.connectionState;
 			if (connectionState === "connected") {
 				state.isConnected = true;
-				const stream = new MediaStream(peerConnection.getTransceivers().filter((tr) => tr.currentDirection === "recvonly").map((tr) => tr.receiver.track));
+				reportPath();
+				if (stream) {
+					onReconnected();
+					return;
+				}
+				stream = new MediaStream(peerConnection.getTransceivers().filter((tr) => tr.currentDirection === "recvonly").map((tr) => tr.receiver.track));
+				peerConnection.getReceivers()[0]?.transport?.iceTransport?.addEventListener("selectedcandidatepairchange", reportPath);
 				onConnected(stream);
 			} else if (connectionState === "failed") {
 				state.isConnected = false;
@@ -4363,11 +4507,16 @@ function createWebRTCHandler(options) {
 				onDisconnected();
 			}
 		};
+		peerConnection.oniceconnectionstatechange = () => {
+			if (!signal.aborted && state.isConnected) reportPath();
+		};
 		peerConnection.addTransceiver("video", { direction: "recvonly" });
 		peerConnection.addTransceiver("audio", { direction: "recvonly" });
 		return peerConnection;
 	}
 	async function createOffer() {
+		if (signal.aborted) return void 0;
+		await relay.settle();
 		if (signal.aborted) return void 0;
 		state.pc = createPeerConnection();
 		const offer = await state.pc.createOffer();
@@ -4386,13 +4535,13 @@ function createWebRTCHandler(options) {
 			return state.isConnected;
 		},
 		createOffer,
-		handleAnswer: (sdp) => handleSdpAnswer(state.pc, signal, sdp),
-		handleCandidate: (candidate) => handleIceCandidate(state.pc, signal, candidate, filterUdp),
+		handleAnswer,
+		handleCandidate: relay.handleCandidate,
 		close
 	};
 }
 function createBackchannelHandler(options) {
-	const { filterUdp, iceServers, onConnected, onFailed, onCandidate, signal } = options;
+	const { filterUdp, iceServers, relayFirst, onConnected, onFailed, onCandidate, signal } = options;
 	const state = {
 		pc: null,
 		micTransceiver: null,
@@ -4400,6 +4549,8 @@ function createBackchannelHandler(options) {
 	};
 	let answered = false;
 	const heldCandidates = [];
+	let disconnectGrace;
+	const relay = createRelayFirst(state, signal, filterUdp, relayFirst);
 	function sendCandidate(candidate) {
 		if (answered) onCandidate(candidate);
 		else heldCandidates.push(candidate);
@@ -4408,21 +4559,26 @@ function createBackchannelHandler(options) {
 		if (signal.aborted || !state.pc) return;
 		answered = true;
 		for (const candidate of heldCandidates.splice(0)) onCandidate(candidate);
+		relay.permit(onCandidate);
 		await state.pc.setRemoteDescription({
 			type: "answer",
 			sdp
 		});
 	}
 	function createPeerConnection() {
-		const peerConnection = createBasePeerConnection(signal, sendCandidate, filterUdp, iceServers);
+		const peerConnection = createBasePeerConnection(signal, sendCandidate, filterUdp, relay.iceServers(iceServers));
 		peerConnection.onconnectionstatechange = () => {
 			if (signal.aborted) return;
 			const connectionState = peerConnection.connectionState;
 			if (connectionState === "connected") {
+				clearTimeout(disconnectGrace);
 				state.isConnected = true;
 				onConnected();
-			} else if (connectionState === "disconnected") state.isConnected = false;
-			else if (connectionState === "failed") {
+			} else if (connectionState === "disconnected") {
+				state.isConnected = false;
+				disconnectGrace = setTimeout(onFailed, STREAM_CONFIG.WEBRTC.DISCONNECT_GRACE);
+			} else if (connectionState === "failed") {
+				clearTimeout(disconnectGrace);
 				state.isConnected = false;
 				onFailed();
 			}
@@ -4431,6 +4587,8 @@ function createBackchannelHandler(options) {
 		return peerConnection;
 	}
 	async function createOffer() {
+		if (signal.aborted) return void 0;
+		await relay.settle();
 		if (signal.aborted) return void 0;
 		state.pc = createPeerConnection();
 		const offer = await state.pc.createOffer();
@@ -4438,6 +4596,7 @@ function createBackchannelHandler(options) {
 		return offer.sdp;
 	}
 	function close() {
+		clearTimeout(disconnectGrace);
 		closePeerConnection(state);
 	}
 	signal.addEventListener("abort", close, { once: true });
@@ -4447,7 +4606,7 @@ function createBackchannelHandler(options) {
 		},
 		createOffer,
 		handleAnswer,
-		handleCandidate: (candidate) => handleIceCandidate(state.pc, signal, candidate, filterUdp),
+		handleCandidate: relay.handleCandidate,
 		setMicrophoneTrack: (track) => setMicTrack(state.micTransceiver, signal, track),
 		close
 	};
@@ -4472,6 +4631,11 @@ var STALL_AFTER = 3e3;
 var STALL_RECONNECT_AFTER = 15e3;
 var HAVE_CURRENT_DATA$1 = 2;
 var PROBE_WAIT_MS = 2e3;
+var WEBRTC_RETRY_DELAYS = [
+	3e4,
+	12e4,
+	6e5
+];
 function isPageHidden() {
 	return typeof document !== "undefined" && document.visibilityState === "hidden";
 }
@@ -4495,6 +4659,8 @@ var StreamConnection = class {
 	hasBackchannel;
 	isPlaying;
 	stalled;
+	connectionPath;
+	webrtcUnreachable;
 	error;
 	probeInfo;
 	muted;
@@ -4512,6 +4678,7 @@ var StreamConnection = class {
 	iceServers;
 	scope = effectScope(true);
 	stopsWhenHidden = suspendsWhenHidden();
+	webrtcPath = ref();
 	connectionGeneration = 0;
 	abortController = new AbortController();
 	probedSourceId;
@@ -4548,6 +4715,9 @@ var StreamConnection = class {
 	lastMediaTime = 0;
 	lastFrameCount;
 	frameCounterLive = false;
+	webrtcRetries = 0;
+	webrtcRetryDue = false;
+	webrtcPlayingSince;
 	offTabVisible;
 	offTabPaused;
 	onVideoPauseBound;
@@ -4559,6 +4729,10 @@ var StreamConnection = class {
 	stopConnectTimeout;
 	startMseConnectTimeout;
 	stopMseConnectTimeout;
+	startDisconnectGrace;
+	stopDisconnectGrace;
+	startWebRTCRetry;
+	stopWebRTCRetry;
 	constructor(options) {
 		this.options = options;
 		const ctx = useCameraUi();
@@ -4578,6 +4752,7 @@ var StreamConnection = class {
 		this.hasBackchannel = ref(false);
 		this.isPlaying = ref(false);
 		this.stalled = ref(false);
+		this.webrtcUnreachable = ref(false);
 		this.error = ref();
 		this.probeInfo = shallowRef();
 		this.muted = ref(true);
@@ -4590,6 +4765,10 @@ var StreamConnection = class {
 		this.videoElement = computed(() => toValue(options.videoElement));
 		this.containerElement = computed(() => toValue(options.containerElement));
 		this.isReady = computed(() => !!this.camera.value && !!this.videoElement.value && !!this.target.value);
+		this.connectionPath = computed(() => {
+			if (this.status.value !== "connected") return void 0;
+			return this.activeMode.value === "mse" || this.activeMode.value === "mjpeg" ? "tunnel" : this.webrtcPath.value;
+		});
 		this.scope.run(() => {
 			const { onTabPaused, onTabVisible } = useTabVisibility();
 			const hiddenStopDelay = this.stopsWhenHidden ? 0 : DEFAULT_TAB_PAUSE_MS;
@@ -4605,10 +4784,8 @@ var StreamConnection = class {
 			}, STREAM_CONFIG.WEBRTC.WS_CONNECT_TIMEOUT, { immediate: false });
 			const connectTimeout = useTimeoutFn(() => {
 				if (this.abortController.signal.aborted) return;
-				if (this.webrtcHandler && !this.webrtcHandler.isConnected) {
-					if (this.requestedMode.value === "auto") this.fallBackToMSE();
-					else this.retryAfterNoMedia();
-				} else if (this.webrtcHandler && this.awaitingWebRTCFrame || this.mjpegHandler && !this.isPlaying.value || this.status.value === "connected" && !this.isPlaying.value) {
+				if (this.webrtcHandler && !this.webrtcHandler.isConnected) this.handleWebRTCFailed(true);
+				else if (this.webrtcHandler && this.awaitingWebRTCFrame || this.mjpegHandler && !this.isPlaying.value || this.status.value === "connected" && !this.isPlaying.value) {
 					if (isPageHidden()) {
 						this.startConnectTimeout();
 						return;
@@ -4620,12 +4797,18 @@ var StreamConnection = class {
 				if (this.abortController.signal.aborted || this.status.value === "connected" || this.status.value === "closed") return;
 				if (this.mseHandler && !this.mseHandler.isReady) this.retryAfterNoMedia();
 			}, STREAM_CONFIG.WEBRTC.CONNECT_TIMEOUT, { immediate: false });
+			const disconnectGrace = useTimeoutFn(() => this.handleWebRTCLost(), STREAM_CONFIG.WEBRTC.DISCONNECT_GRACE, { immediate: false });
+			const webrtcRetry = useTimeoutFn(() => this.retryWebRTC(), () => WEBRTC_RETRY_DELAYS[Math.min(this.webrtcRetries, WEBRTC_RETRY_DELAYS.length - 1)], { 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.startDisconnectGrace = disconnectGrace.start;
+			this.stopDisconnectGrace = disconnectGrace.stop;
+			this.startWebRTCRetry = webrtcRetry.start;
+			this.stopWebRTCRetry = webrtcRetry.stop;
 			this.setupWatchers();
 			this.offTabPaused = onTabPaused(() => {
 				log.debug(`onTabPaused fired — status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
@@ -4658,6 +4841,11 @@ var StreamConnection = class {
 					this.restart();
 					return;
 				}
+				if (this.webrtcRetryDue) {
+					log.debug("onTabVisible: trying WebRTC again");
+					this.retryWebRTC();
+					return;
+				}
 				log.debug("onTabVisible — not paused by visibility, no-op");
 			});
 			if (autoStart) whenever(this.isReady, () => {
@@ -4710,6 +4898,8 @@ var StreamConnection = class {
 		this.status.value = "connecting";
 		this.error.value = void 0;
 		this.isPlaying.value = false;
+		this.webrtcUnreachable.value = false;
+		if (this.requestedMode.value !== "mse") relayFirstAddress(this.iceServers?.value);
 		try {
 			const init = this.initializeSource();
 			if (init === "unsupported") {
@@ -4993,6 +5183,10 @@ var StreamConnection = class {
 			if (active) this.startHealthCheck();
 		}, { immediate: true });
 		this.stopWatchers.push(stopHealthWatch);
+		const stopPathWatch = watch(this.connectionPath, (path) => {
+			if (path) log.debug(`connection path: ${path}`);
+		});
+		this.stopWatchers.push(stopPathWatch);
 		const stopCameraWatch = watch([
 			this.camera,
 			this.videoElement,
@@ -5129,8 +5323,7 @@ var StreamConnection = class {
 	handleNoFramesWhileConnected() {
 		if (this.sourceLikelyH265() && !this.webrtcTookOver()) reportH265DecodeFailure(this.activeMode.value === "mse" ? "mse" : "webrtc");
 		if (this.requestedMode.value === "auto" && this.activeMode.value !== "mse" && !this.mjpegHandler && !this.mseRejected) {
-			this.webrtcHandler?.close();
-			this.webrtcHandler = void 0;
+			this.closeWebRTC();
 			this.awaitingWebRTCFrame = false;
 			this.activeMode.value = "mse";
 			this.isPlaying.value = false;
@@ -5333,7 +5526,7 @@ var StreamConnection = class {
 			if (peer && peer === this.webrtcHandler && !peer.isConnected) {
 				this.lastError = err;
 				this.stopConnectTimeout();
-				if (this.requestedMode.value === "auto") this.fallBackToMSE();
+				if (this.requestedMode.value === "auto") this.fallBackToMSE(false);
 				else this.retryLater(err);
 				return;
 			}
@@ -5370,14 +5563,19 @@ var StreamConnection = class {
 		const handler = createWebRTCHandler({
 			mode,
 			iceServers: this.iceServers?.value,
+			relayFirst: relayFirstAddress(this.iceServers?.value),
 			signal: this.abortController.signal,
 			onConnected: (stream) => this.handleWebRTCConnected(stream),
+			onReconnected: () => this.handleWebRTCReconnected(),
 			onDisconnected: () => this.handleWebRTCDisconnected(),
-			onFailed: () => this.handleWebRTCFailed(),
+			onFailed: () => this.handleWebRTCFailed(true),
 			onCandidate: (candidate) => this.sendWsMessage({
 				type: "webrtc/candidate",
 				value: candidate
-			})
+			}),
+			onPath: (path) => {
+				this.webrtcPath.value = path;
+			}
 		});
 		this.webrtcHandler = handler;
 		const offer = await handler.createOffer();
@@ -5385,12 +5583,14 @@ var StreamConnection = class {
 	}
 	handleWebRTCConnected(stream) {
 		if (this.abortController.signal.aborted) return;
+		this.stopDisconnectGrace();
 		const video = this.videoElement.value;
 		if (!video) return;
 		if (this.hasVideo.value && stream.getVideoTracks().length === 0) {
-			this.handleWebRTCFailed();
+			this.handleWebRTCFailed(false);
 			return;
 		}
+		this.webrtcUnreachable.value = false;
 		this.noteDeliveredAudio(stream.getAudioTracks().length > 0);
 		this.activeMode.value = this.requestedMode.value === "auto" ? "webrtc" : this.requestedMode.value;
 		this.lastMediaStream = stream;
@@ -5407,26 +5607,35 @@ var StreamConnection = class {
 		if (this.requestedMode.value === "auto" && this.mseHandler) this.dropMSE();
 	}
 	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";
-				this.resumeBackchannel();
-			} else this.retryLater();
+		if (this.status.value === "closed" || this.abortController.signal.aborted) return;
+		log.debug("WebRTC disconnected, waiting for it to come back");
+		if (this.activeMode.value !== "mse") this.status.value = "reconnecting";
+		this.startDisconnectGrace();
+	}
+	handleWebRTCReconnected() {
+		if (this.abortController.signal.aborted) return;
+		log.debug("WebRTC connected again");
+		this.stopDisconnectGrace();
+		this.status.value = "connected";
+	}
+	handleWebRTCLost() {
+		log.debug("WebRTC did not come back");
+		if (this.requestedMode.value !== "auto" || this.mseRejected || !hasMediaSource()) {
+			this.retryLater();
+			return;
 		}
+		if (this.activeMode.value !== "mse") this.isPlaying.value = false;
+		this.fallBackToMSE(true);
 	}
-	handleWebRTCFailed() {
+	handleWebRTCFailed(retryWebRTC) {
 		if (this.abortController.signal.aborted) return;
 		this.stopConnectTimeout();
-		if (this.requestedMode.value === "auto") this.fallBackToMSE();
+		if (this.requestedMode.value === "auto") this.fallBackToMSE(retryWebRTC);
 		else this.retryLater(this.lastError ?? /* @__PURE__ */ new Error("WebRTC connection failed"));
 	}
-	fallBackToMSE() {
-		this.webrtcHandler?.close();
-		this.webrtcHandler = void 0;
+	fallBackToMSE(retryWebRTC) {
+		this.closeWebRTC();
+		this.webrtcUnreachable.value = retryWebRTC;
 		this.awaitingWebRTCFrame = false;
 		if (this.mseRejected) {
 			this.retryLater(this.lastError);
@@ -5436,6 +5645,33 @@ var StreamConnection = class {
 		if (this.mseHandler?.isReady) this.handleMSEReady();
 		else this.startMSE();
 		this.resumeBackchannel();
+		if (retryWebRTC) this.scheduleWebRTCRetry();
+	}
+	scheduleWebRTCRetry() {
+		if (this.webrtcPlayingSince !== void 0 && performance.now() - this.webrtcPlayingSince >= RETRY_RESET_AFTER) this.webrtcRetries = 0;
+		this.webrtcPlayingSince = void 0;
+		this.startWebRTCRetry();
+	}
+	retryWebRTC() {
+		if (isPageHidden()) {
+			this.webrtcRetryDue = true;
+			return;
+		}
+		this.webrtcRetryDue = false;
+		this.webrtcRetries++;
+		const signalingBusy = !!this.offerPeer || !!this.backchannelHandler;
+		if (this.requestedMode.value !== "auto" || this.activeMode.value !== "mse" || this.status.value !== "connected" || this.webrtcHandler || signalingBusy) {
+			this.startWebRTCRetry();
+			return;
+		}
+		log.debug("trying WebRTC again while MSE plays");
+		this.startWebRTC("webrtc");
+	}
+	closeWebRTC() {
+		this.stopDisconnectGrace();
+		this.webrtcHandler?.close();
+		this.webrtcHandler = void 0;
+		this.webrtcPath.value = void 0;
 	}
 	startMSE() {
 		if (this.mseHandler) return;
@@ -5599,6 +5835,7 @@ var StreamConnection = class {
 		if (!this.webrtcHandler || this.webrtcHandler.isConnected) {
 			this.stopConnectTimeout();
 			this.awaitingWebRTCFrame = false;
+			if (this.webrtcHandler) this.webrtcPlayingSince = performance.now();
 			this.resumeBackchannel();
 		}
 		this.error.value = void 0;
@@ -5680,12 +5917,15 @@ var StreamConnection = class {
 		this.stopConnectTimeout();
 		this.stopWsConnectTimeout();
 		this.stopMseConnectTimeout();
+		this.stopWebRTCRetry();
+		this.webrtcRetryDue = false;
+		this.webrtcRetries = 0;
+		this.webrtcPlayingSince = void 0;
 		this.stopHealthCheck();
 		this.cancelFirstFrameWatch?.();
 		this.awaitingWebRTCFrame = false;
 		this.lastMediaStream = null;
-		this.webrtcHandler?.close();
-		this.webrtcHandler = void 0;
+		this.closeWebRTC();
 		this.mseHandler?.close();
 		this.mseHandler = void 0;
 		this.mjpegHandler?.close();
@@ -5709,6 +5949,7 @@ var StreamConnection = class {
 		const handler = createBackchannelHandler({
 			filterUdp: this.requestedMode.value === "webrtc/tcp",
 			iceServers: this.iceServers?.value,
+			relayFirst: relayFirstAddress(this.iceServers?.value),
 			signal: this.abortController.signal,
 			onCandidate: (candidate) => this.sendWsMessage({
 				type: "webrtc/candidate",
@@ -5920,16 +6161,46 @@ function restartConnectedStreams() {
 	return streamManager.restartConnected();
 }
 // src/composables/useFullscreen.ts
+var documentFullscreen = {
+	async enter() {
+		if (!document.fullscreenEnabled || document.fullscreenElement) return false;
+		await document.documentElement.requestFullscreen({ navigationUI: "hide" });
+		return true;
+	},
+	async exit() {
+		if (document.fullscreenElement) await document.exitFullscreen();
+	}
+};
 var fsRegistry = /* @__PURE__ */ new WeakMap();
 var fullscreenRoot = null;
+var nativeFullscreen = documentFullscreen;
+var nativeOwned = false;
 function setFullscreenRoot(el) {
 	fullscreenRoot = el;
 }
+function setNativeFullscreen(native) {
+	nativeFullscreen = native;
+}
 var fullscreenStack = [];
 var topmostFullscreenWrapper = shallowRef(null);
 function refreshTopmost() {
 	topmostFullscreenWrapper.value = fullscreenStack[fullscreenStack.length - 1] ?? null;
 }
+function enterNative() {
+	if (!nativeFullscreen || nativeOwned) return;
+	nativeOwned = true;
+	nativeFullscreen.enter().then((taken) => {
+		nativeOwned = taken;
+		exitNative();
+	}, () => {
+		nativeOwned = false;
+	});
+}
+function exitNative() {
+	if (!nativeOwned || fullscreenStack.length > 0) return;
+	nativeOwned = false;
+	nativeFullscreen?.exit();
+}
 function useTopmostFullscreenElement() {
 	return computed(() => topmostFullscreenWrapper.value);
 }
@@ -5943,9 +6214,13 @@ function useCuiFullscreen(target, options = {}) {
 	function onEscape(e) {
 		if (e.key === "Escape" && isFullscreen.value) exit();
 	}
+	function onNativeChange() {
+		if (nativeOwned && nativeFullscreen === documentFullscreen && !document.fullscreenElement) exit();
+	}
 	async function enter() {
 		const el = currentEl.value;
 		if (!el || isFullscreen.value) return;
+		enterNative();
 		const wrapper = document.createElement("div");
 		wrapper.className = `cui-fullscreen cui-fullscreen-${mode}`;
 		applyWrapperStyles(wrapper, mode);
@@ -5970,6 +6245,7 @@ function useCuiFullscreen(target, options = {}) {
 			behavior: "instant"
 		});
 		document.addEventListener("keydown", onEscape);
+		document.addEventListener("fullscreenchange", onNativeChange);
 		fullscreenStack.push(wrapper);
 		refreshTopmost();
 		isFullscreen.value = true;
@@ -5991,9 +6267,11 @@ function useCuiFullscreen(target, options = {}) {
 			behavior: "instant"
 		});
 		document.removeEventListener("keydown", onEscape);
+		document.removeEventListener("fullscreenchange", onNativeChange);
 		const stackIndex = fullscreenStack.indexOf(state.wrapper);
 		if (stackIndex !== -1) fullscreenStack.splice(stackIndex, 1);
 		refreshTopmost();
+		exitNative();
 		isFullscreen.value = false;
 	}
 	async function toggle() {
@@ -6003,6 +6281,7 @@ function useCuiFullscreen(target, options = {}) {
 	tryOnScopeDispose(() => {
 		if (isFullscreen.value && currentEl.value) exit();
 		document.removeEventListener("keydown", onEscape);
+		document.removeEventListener("fullscreenchange", onNativeChange);
 	});
 	return {
 		isFullscreen: computed(() => isFullscreen.value),
@@ -6114,6 +6393,8 @@ function useCameraStream(options) {
 	const status = computed(() => currentStream.value?.status.value ?? "idle");
 	const isPlaying = computed(() => currentStream.value?.isPlaying.value ?? false);
 	const stalled = computed(() => currentStream.value?.stalled?.value ?? false);
+	const connectionPath = computed(() => currentStream.value?.connectionPath?.value);
+	const webrtcUnreachable = computed(() => currentStream.value?.webrtcUnreachable?.value ?? false);
 	const activeMode = computed(() => currentStream.value?.activeMode.value ?? "webrtc");
 	const activeResolution = computed(() => currentStream.value?.activeResolution.value ?? "low-resolution");
 	const degradedFrom = computed(() => currentStream.value?.degradedFrom.value ?? null);
@@ -6665,6 +6946,8 @@ function useCameraStream(options) {
 		status,
 		isPlaying,
 		stalled,
+		connectionPath,
+		webrtcUnreachable,
 		activeMode,
 		activeResolution,
 		degradedFrom,
@@ -6935,4 +7218,4 @@ function useTerminalSessions() {
 function terminalProxy(r) {
 	return r.createProxy(NamespaceManager.terminalManagerNamespaces().terminalManagerRpc);
 }
-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, useTerminalSessions, useTopmostFullscreenElement };
+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, setNativeFullscreen, 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, useTerminalSessions, useTopmostFullscreenElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -39,14 +39,14 @@
   "devDependencies": {
     "@camera.ui/logger": "file:../../packages/logger",
     "@camera.ui/rpc": "^1.1.2",
-    "@camera.ui/sdk": "~1.4.8",
+    "@camera.ui/sdk": "~1.4.9",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.4.0",
     "@microsoft/api-extractor": "^7.60.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/webrtc": "^0.0.47",
     "@typescript-eslint/parser": "^8.72.2",
-    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitejs/plugin-vue": "^6.0.11",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/language-core": "^3.3.14",
@@ -54,15 +54,15 @@
     "@vueuse/core": "^15.0.0",
     "@webgpu/types": "^0.1.74",
     "eslint": "9.39.2",
-    "eslint-plugin-vue": "^10.12.0",
+    "eslint-plugin-vue": "^10.12.1",
     "globals": "^17.14.0",
-    "prettier": "^3.9.10",
+    "prettier": "^3.10.1",
     "rimraf": "^6.1.4",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.72.2",
     "unplugin-dts": "^1.1.2",
     "updates": "^20.0.1",
-    "vite": "^8.3.7",
+    "vite": "^8.3.8",
     "vitest": "^5.1.0",
     "vue": "^3.5.45",
     "vue-tsc": "3.3.11"