@camera.ui/browser 0.0.145 → 0.0.147

package/dist/index.d.ts

@@ -163,6 +163,8 @@ export declare interface CameraStream {
     readonly isPlaying: Ref<boolean>;
     readonly activeMode: Ref<'webrtc' | 'webrtc/tcp' | 'mse'>;
     readonly activeResolution: Ref<StreamingRole>;
+    readonly degradedFrom: Ref<StreamingRole | null>;
+    readonly unsupported: Ref<boolean>;
     readonly hasAudio: Ref<boolean>;
     readonly hasBackchannel: Ref<boolean>;
     readonly error: Ref<Error | undefined>;
@@ -837,6 +839,8 @@ export declare interface ReactiveStream {
     readonly requestedMode: Ref<VideoStreamingMode>;
     readonly activeResolution: Ref<StreamingRole>;
     readonly requestedResolution: Ref<StreamingRole>;
+    readonly degradedFrom: Ref<StreamingRole | null>;
+    readonly degradeReason: Ref<StreamDegradeReason | null>;
     readonly source: Ref<CameraSource | undefined>;
     readonly hasVideo: Ref<boolean>;
     readonly hasAudio: Ref<boolean>;
@@ -1023,6 +1027,8 @@ export declare const STREAM_CONFIG: {
     };
 };
 
+declare type StreamDegradeReason = 'codec';
+
 export declare interface StreamOptions {
     camera: MaybeRefOrGetter<ReactiveCameraDevice | undefined>;
     videoElement: MaybeRefOrGetter<HTMLVideoElement | undefined | null>;
@@ -1034,7 +1040,7 @@ export declare interface StreamOptions {
     webrtcConnectTimeout?: number;
 }
 
-export declare type StreamStatus = 'idle' | 'connecting' | 'connected' | 'reconnecting' | 'error' | 'closed';
+export declare type StreamStatus = 'idle' | 'connecting' | 'connected' | 'reconnecting' | 'error' | 'unsupported' | 'closed';
 
 /* Excluded from this release type: SwitchControlProperties */
 

package/dist/index.js

@@ -2322,6 +2322,7 @@ var STREAM_CONFIG = {
 };
 //#endregion
 //#region src/streaming/utils.ts
+var H265_TEST_CODEC = "hvc1.1.6.L153.B0";
 function safariVersion() {
 	return navigator.userAgent.match(/version\/(\d+)/i);
 }
@@ -2354,14 +2355,27 @@ function isWebRTCCompatibleVideo(codec) {
 	if (codec === "H265") return isH265Supported();
 	return false;
 }
-function isH265Supported() {
-	try {
-		const videoCodecs = RTCRtpSender?.getCapabilities("video")?.codecs;
-		if (!videoCodecs) return false;
-		return videoCodecs.some((c) => c.mimeType.toLowerCase().includes("h265") || c.mimeType.toLowerCase().includes("hevc"));
+var mseH265;
+var webrtcH265;
+function canPlayH265(transport) {
+	if (transport === "auto") return canPlayH265("webrtc") || canPlayH265("mse");
+	if (transport === "mse") {
+		if (mseH265 === void 0) mseH265 = !!getMediaSourceConstructor()?.isTypeSupported(`video/mp4; codecs="${H265_TEST_CODEC}"`);
+		return mseH265;
+	}
+	if (webrtcH265 === void 0) try {
+		webrtcH265 = !!(RTCRtpReceiver?.getCapabilities("video")?.codecs)?.some((c) => c.mimeType.toLowerCase().includes("h265") || c.mimeType.toLowerCase().includes("hevc"));
 	} catch {
-		return false;
+		webrtcH265 = false;
 	}
+	return webrtcH265;
+}
+function reportH265DecodeFailure(transport) {
+	if (transport === "mse") mseH265 = false;
+	else webrtcH265 = false;
+}
+function isH265Supported() {
+	return canPlayH265("webrtc");
 }
 function checkWebRTCCompatibility(probe) {
 	const audioStreams = probe.audio.filter((s) => s.direction === "sendonly");
@@ -2755,6 +2769,8 @@ var StreamConnection = class {
 	requestedMode;
 	activeResolution;
 	requestedResolution;
+	degradedFrom;
+	degradeReason;
 	source;
 	hasVideo;
 	hasAudio;
@@ -2766,14 +2782,20 @@ var StreamConnection = class {
 	paused;
 	nativeWidth;
 	nativeHeight;
+	camera;
+	videoElement;
+	containerElement;
+	target;
+	isReady;
+	effectiveMode;
+	triedSourceIds = /* @__PURE__ */ new Set();
 	options;
+	wsTransport;
+	scope = effectScope(true);
 	connectionGeneration = 0;
 	abortController = new AbortController();
-	scope = effectScope(true);
-	offTabVisible;
-	offTabPaused;
+	probedSourceId;
 	wasPausedByVisibility = false;
-	wsTransport;
 	wsHandle;
 	webrtcHandler;
 	mseHandler;
@@ -2783,15 +2805,11 @@ var StreamConnection = class {
 	lastMediaStream = null;
 	stopWatchers = [];
 	mseMonitorInterval;
+	offTabVisible;
+	offTabPaused;
 	onVideoPauseBound;
 	onVideoPlayBound;
 	onVideoResizeBound;
-	camera;
-	videoElement;
-	containerElement;
-	target;
-	isReady;
-	effectiveMode;
 	startWsConnectTimeout;
 	stopWsConnectTimeout;
 	startConnectTimeout;
@@ -2810,6 +2828,8 @@ var StreamConnection = class {
 		this.status = ref("idle");
 		this.activeMode = ref("webrtc");
 		this.activeResolution = ref("low-resolution");
+		this.degradedFrom = ref(null);
+		this.degradeReason = ref(null);
 		this.source = shallowRef();
 		this.hasVideo = ref(false);
 		this.hasAudio = ref(false);
@@ -2846,11 +2866,18 @@ var StreamConnection = class {
 					this.activeMode.value = "mse";
 					if (this.mseHandler?.isReady) this.status.value = "connected";
 					else this.startMSE();
-				} else this.restart();
+				} else {
+					this.markSourceUndecodable();
+					this.restart();
+				}
+				else if (this.status.value === "connected" && !this.isPlaying.value && !this.abortController.signal.aborted && this.sourceLikelyH265()) this.handleNoFramesWhileConnected();
 			}, 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();
+				if (this.mseHandler && !this.mseHandler.isReady) {
+					this.markSourceUndecodable();
+					this.restart();
+				}
 			}, STREAM_CONFIG.WEBRTC.CONNECT_TIMEOUT, { immediate: false });
 			const reconnectTimeout = useTimeoutFn(() => {
 				if (!this.abortController.signal.aborted) this.restart();
@@ -2901,22 +2928,43 @@ var StreamConnection = class {
 		this.cleanup();
 		this.abortController = new AbortController();
 		const gen = ++this.connectionGeneration;
+		this.triedSourceIds.clear();
 		this.status.value = "connecting";
 		this.error.value = void 0;
 		this.isPlaying.value = false;
 		try {
-			if (!this.initializeSource()) {
+			const init = this.initializeSource();
+			if (init === "unsupported") {
+				log.debug("start() — no source with a playable codec");
+				this.setUnsupported();
+				return;
+			}
+			if (!init) {
 				log.debug("start() — no streaming source available");
 				this.error.value = /* @__PURE__ */ new Error("No streaming source available");
 				this.status.value = "error";
 				return;
 			}
-			await this.probeStream();
-			if (gen !== this.connectionGeneration) {
-				log.debug("start() — generation stale after probe, aborting");
-				return;
+			for (let attempt = 0; attempt < 3; attempt++) {
+				const probedSourceId = this.source.value?._id;
+				const probe = await this.probeStream();
+				if (gen !== this.connectionGeneration) {
+					log.debug("start() — generation stale after probe, aborting");
+					return;
+				}
+				if (probe && probedSourceId && this.probeSaysUnplayable(probe)) this.triedSourceIds.add(probedSourceId);
+				const reinit = this.initializeSource();
+				if (reinit === "unsupported") {
+					this.setUnsupported();
+					return;
+				}
+				if (!reinit) {
+					this.error.value = /* @__PURE__ */ new Error("No streaming source available");
+					this.status.value = "error";
+					return;
+				}
+				if (!probe || this.source.value?._id === probedSourceId) break;
 			}
-			this.initializeSource();
 			log.debug("start() — connecting WebSocket");
 			this.connectWebSocket();
 		} catch (err) {
@@ -2940,15 +2988,27 @@ var StreamConnection = class {
 		if (this.requestedMode.value === mode) return;
 		this.requestedMode.value = mode;
 		this.activeMode.value = mode === "auto" ? "webrtc" : mode;
+		if (this.status.value === "unsupported") {
+			this.stop();
+			await this.start();
+			return;
+		}
 		if (this.status.value === "connected") await this.restart();
 	}
 	async setResolution(resolution) {
 		if (this.requestedResolution.value === resolution) return;
 		this.requestedResolution.value = resolution;
+		if (this.status.value === "unsupported") {
+			this.stop();
+			await this.start();
+			return;
+		}
 		const result = this.getSourceForResolution(resolution);
-		if (result && result.source._id !== this.source.value?._id) {
+		if (result && result !== "unsupported" && result.source._id !== this.source.value?._id) {
 			this.source.value = result.source;
 			this.activeResolution.value = result.effectiveResolution;
+			this.degradedFrom.value = result.degradedFrom;
+			this.degradeReason.value = result.degradedFrom ? "codec" : null;
 			if (this.status.value === "connected") await this.restart();
 		}
 	}
@@ -3023,7 +3083,12 @@ var StreamConnection = class {
 			return;
 		}
 		try {
-			if (!this.initializeSource()) {
+			const init = this.initializeSource();
+			if (init === "unsupported") {
+				this.setUnsupported();
+				return;
+			}
+			if (!init) {
 				this.error.value = /* @__PURE__ */ new Error("No streaming source available");
 				this.status.value = "error";
 				return;
@@ -3057,6 +3122,12 @@ var StreamConnection = class {
 			this.restart();
 		});
 		this.stopWatchers.push(stopAuthWatch);
+		const stopSourcesWatch = watch(() => this.camera.value?.sources.value, () => {
+			if (this.status.value !== "unsupported") return;
+			this.stop();
+			this.start();
+		});
+		this.stopWatchers.push(stopSourcesWatch);
 		const stopModeWatch = watch(() => toValue(this.options.mode), (newMode) => {
 			if (newMode !== void 0 && newMode !== this.requestedMode.value) this.setMode(newMode);
 		});
@@ -3107,6 +3178,9 @@ var StreamConnection = class {
 			if (newCamera !== oldCamera) {
 				if (this.status.value === "connected") {
 					if (newCamera && newVideo && newClient) this.restart();
+				} else if (this.status.value === "unsupported" && newCamera && newVideo && newClient) {
+					this.stop();
+					this.start();
 				}
 			} else if (newVideo !== oldVideo && newVideo) {
 				if (newVideo.srcObject instanceof MediaStream) {
@@ -3144,6 +3218,14 @@ var StreamConnection = class {
 		});
 		this.stopWatchers.push(stopCameraWatch);
 	}
+	isSourcePlayable(source) {
+		if (this.triedSourceIds.has(source._id)) return false;
+		if (source.videoCodec !== "H265") return true;
+		const mode = this.requestedMode.value;
+		if (mode === "auto") return canPlayH265("auto");
+		if (mode === "mse") return canPlayH265("mse");
+		return canPlayH265("webrtc");
+	}
 	getSourceForResolution(resolution) {
 		const cam = this.camera.value;
 		if (!cam) return void 0;
@@ -3152,43 +3234,89 @@ var StreamConnection = class {
 			"mid-resolution",
 			"low-resolution"
 		];
-		const exactSource = cam.sources.value.find((s) => s.role === resolution);
-		if (exactSource) return {
-			source: exactSource,
-			effectiveResolution: resolution
-		};
-		const startIndex = resolutionOrder.indexOf(resolution);
+		const startIndex = Math.max(0, resolutionOrder.indexOf(resolution));
+		let skippedUnplayable = false;
 		for (let i = startIndex; i < resolutionOrder.length; i++) {
 			const src = cam.sources.value.find((s) => s.role === resolutionOrder[i]);
-			if (src) return {
+			if (!src) continue;
+			if (!this.isSourcePlayable(src)) {
+				skippedUnplayable = true;
+				continue;
+			}
+			return {
 				source: src,
-				effectiveResolution: resolutionOrder[i]
+				effectiveResolution: resolutionOrder[i],
+				degradedFrom: skippedUnplayable ? resolution : null
 			};
 		}
 		const fallback = cam.streamSource.value;
-		if (fallback) return {
+		if (fallback && this.isSourcePlayable(fallback)) return {
 			source: fallback,
-			effectiveResolution: fallback.role ?? "low-resolution"
+			effectiveResolution: fallback.role ?? "low-resolution",
+			degradedFrom: skippedUnplayable ? resolution : null
 		};
+		if (skippedUnplayable || fallback) return "unsupported";
 	}
 	initializeSource() {
 		const result = this.getSourceForResolution(this.requestedResolution.value);
 		if (!result) return false;
+		if (result === "unsupported") return "unsupported";
 		this.source.value = result.source;
 		this.activeResolution.value = result.effectiveResolution;
+		this.degradedFrom.value = result.degradedFrom;
+		this.degradeReason.value = result.degradedFrom ? "codec" : null;
+		if (this.probedSourceId && this.probedSourceId !== result.source._id) {
+			this.probeInfo.value = void 0;
+			this.probedSourceId = void 0;
+			this.hasVideo.value = false;
+			this.hasAudio.value = false;
+			this.hasBackchannel.value = false;
+		}
 		return true;
 	}
+	setUnsupported() {
+		const codec = this.camera.value?.sources.value.find((s) => s.videoCodec)?.videoCodec ?? "H265";
+		this.error.value = /* @__PURE__ */ new Error(`${codec} cannot be played on this device`);
+		this.status.value = "unsupported";
+	}
+	probeSaysUnplayable(probe) {
+		const video = probe.video.filter((v) => v.direction === "sendonly");
+		if (!video.length) return false;
+		if (!video.every((v) => v.codec === "H265")) return false;
+		const mode = this.requestedMode.value;
+		return !canPlayH265(mode === "auto" ? "auto" : mode === "mse" ? "mse" : "webrtc");
+	}
+	sourceLikelyH265() {
+		const src = this.source.value;
+		if (!src) return false;
+		if (src.videoCodec === "H265") return true;
+		if (src.videoCodec !== void 0) return false;
+		const video = this.probeInfo.value?.video.filter((v) => v.direction === "sendonly") ?? [];
+		return video.length > 0 && video.every((v) => v.codec === "H265");
+	}
+	markSourceUndecodable() {
+		const src = this.source.value;
+		if (!src || !this.sourceLikelyH265()) return;
+		this.triedSourceIds.add(src._id);
+	}
+	handleNoFramesWhileConnected() {
+		reportH265DecodeFailure(this.activeMode.value === "mse" ? "mse" : "webrtc");
+		this.markSourceUndecodable();
+		this.restart();
+	}
 	async probeStream() {
 		const cam = this.camera.value;
-		if (!cam || !this.source.value || this.abortController.signal.aborted) return void 0;
+		const source = this.source.value;
+		if (!cam || !source || this.abortController.signal.aborted) return void 0;
 		try {
-			const probe = await cam.probeStream(this.source.value._id, {
+			const probe = await cam.probeStream(source._id, {
 				video: true,
 				audio: ["pcma", "opus"],
 				microphone: true
 			});
 			if (probe && !this.abortController.signal.aborted) {
 				this.probeInfo.value = probe;
+				this.probedSourceId = source._id;
 				this.hasBackchannel.value = probe.audio.some((a) => a.direction === "recvonly");
 				this.hasAudio.value = probe.audio.filter((a) => a.direction === "sendonly").length > 0;
 				this.hasVideo.value = probe.video.filter((v) => v.direction === "sendonly").length > 0;
@@ -3294,7 +3422,6 @@ var StreamConnection = class {
 		if (this.abortController.signal.aborted) return;
 		const video = this.videoElement.value;
 		if (!video) return;
-		this.stopConnectTimeout();
 		this.activeMode.value = this.requestedMode.value === "auto" ? "webrtc" : this.requestedMode.value;
 		this.lastMediaStream = stream;
 		video.srcObject = stream;
@@ -3393,7 +3520,10 @@ var StreamConnection = class {
 		this.startWebRTC("webrtc");
 	}
 	handleFirstFrame() {
-		if (!this.isPlaying.value && !this.abortController.signal.aborted) this.isPlaying.value = true;
+		if (!this.isPlaying.value && !this.abortController.signal.aborted) {
+			this.stopConnectTimeout();
+			this.isPlaying.value = true;
+		}
 	}
 	monitorMseBuffer() {
 		const video = this.videoElement.value;
@@ -3800,11 +3930,13 @@ function useCameraStream(options) {
 	const isPlaying = computed(() => currentStream.value?.isPlaying.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);
+	const unsupported = computed(() => status.value === "unsupported");
 	const hasAudio = computed(() => currentStream.value?.hasAudio.value ?? false);
 	const hasBackchannel = computed(() => currentStream.value?.hasBackchannel.value ?? false);
 	const error = computed(() => currentStream.value?.error.value);
 	const isReconnecting = computed(() => status.value === "reconnecting");
-	const isBusy = computed(() => cameraDeviceLoading.value || !isPlaying.value && status.value !== "error");
+	const isBusy = computed(() => cameraDeviceLoading.value || !isPlaying.value && status.value !== "error" && status.value !== "unsupported");
 	const hasSound = computed(() => hasAudio.value && status.value === "connected");
 	const hasIntercom = computed(() => Boolean(typeof navigator !== "undefined" && navigator.mediaDevices) && hasBackchannel.value);
 	const muted = computed(() => currentStream.value?.muted.value ?? true);
@@ -3848,7 +3980,6 @@ function useCameraStream(options) {
 		video.disablePictureInPicture = false;
 		video.preload = "auto";
 		video.poster = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-		video.style.backgroundColor = "#000";
 		video.style.position = "absolute";
 		video.style.width = "100%";
 		video.style.height = "100%";
@@ -4197,6 +4328,8 @@ function useCameraStream(options) {
 		isPlaying,
 		activeMode,
 		activeResolution,
+		degradedFrom,
+		unsupported,
 		hasAudio,
 		hasBackchannel,
 		error,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.0.145",
+  "version": "0.0.147",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "@camera.ui/logger": ">=0.0.2",
     "@camera.ui/rpc": ">=1.0.10",
-    "@camera.ui/sdk": ">=0.0.31",
+    "@camera.ui/sdk": ">=0.0.33",
     "@camera.ui/transport": ">=0.0.1",
     "@vueuse/core": ">=14.3.0",
     "vue": ">=3.5.40"
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@camera.ui/logger": "file:../../packages/logger",
     "@camera.ui/rpc": "^1.0.10",
-    "@camera.ui/sdk": "~0.0.31",
+    "@camera.ui/sdk": "~0.0.33",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.3.1",
     "@microsoft/api-extractor": "^7.58.12",
@@ -61,7 +61,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "^8.65.0",
     "unplugin-dts": "^1.0.3",
-    "updates": "^17.19.1",
+    "updates": "^17.19.2",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
     "vue": "^3.5.40",