@camera.ui/browser 0.1.14 → 0.1.15

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>;
@@ -1129,6 +1131,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>;
@@ -1345,8 +1349,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 +1366,8 @@ export declare const STREAM_CONFIG: {
     };
 };
 
+export declare type StreamConnectionPath = 'direct' | 'relay' | 'tunnel';
+
 declare type StreamDegradeReason = 'codec';
 
 export declare interface StreamOptions {

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",
@@ -6114,6 +6355,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 +6908,8 @@ function useCameraStream(options) {
 		status,
 		isPlaying,
 		stalled,
+		connectionPath,
+		webrtcUnreachable,
 		activeMode,
 		activeResolution,
 		degradedFrom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -54,7 +54,7 @@
     "@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",
     "rimraf": "^6.1.4",