From c39c2484b08ef60818402eaacce5a954df30ee18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Wed, 6 Dec 2023 23:23:45 +0100 Subject: [PATCH 1/6] feat: state based rendering --- custom_components/webrtc/www/webrtc-camera.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index bf273e4..85e6459 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -21,6 +21,7 @@ class WebRTCCamera extends VideoRTC { * entity: string, * mode: string, * media: string, + * state: string * * streams: Array<{ * name: string, @@ -32,7 +33,6 @@ class WebRTCCamera extends VideoRTC { * * title: string, * poster: string, - * poster_remote: boolean, * muted: boolean, * intersection: number, * ui: boolean, @@ -64,18 +64,28 @@ class WebRTCCamera extends VideoRTC { this.config = Object.assign({ mode: config.mse === false ? 'webrtc' : config.webrtc === false ? 'mse' : this.mode, media: this.media, - streams: [{url: config.url, entity: config.entity}], - poster_remote: config.poster && (config.poster.indexOf('://') > 0 || config.poster.charAt(0) === '/'), }, config); + if (!this.config.streams) { + this.config.streams = [{ url: config.url, entity: config.entity }]; + } + this.streamID = -1; this.nextStream(false); + setTimeout(() => this.checkStateChange(), 500); } - set hass(hass) { - // if card in vertical stack - `hass` property assign after `onconnect` - super.hass = hass; - this.onconnect(); + checkStateChange() { + if (!this.config.state){ + this.config.state = this.hass.states[this.config.entity].state + console.log("config state set", this.config.state) + } + const state = this.hass.states[this.config.entity].state + if (this.config.state != state) { + this.config.state = state + this.nextStream(true); + } + setTimeout(() => this.checkStateChange(), 100); } /** @@ -144,7 +154,7 @@ class WebRTCCamera extends VideoRTC { this.hass.callWS({ type: 'auth/sign_path', path: '/api/webrtc/ws' }).then(data => { - if (this.config.poster && !this.config.poster_remote) { + if (this.config.poster && this.config.poster.indexOf('://') < 0) { this.video.poster = this.hass.hassUrl(data.path) + '&poster=' + encodeURIComponent(this.config.poster); } @@ -261,7 +271,7 @@ class WebRTCCamera extends VideoRTC { mode.addEventListener('click', () => this.nextStream(true)); if (this.config.muted) this.video.muted = true; - if (this.config.poster_remote) this.video.poster = this.config.poster; + if (this.config.poster && this.config.poster.indexOf('://') > 0) this.video.poster = this.config.poster; } renderDigitalPTZ() { @@ -496,13 +506,7 @@ class WebRTCCamera extends VideoRTC { fullscreen.icon = document.fullscreenElement ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'; }); } else if (video.webkitEnterFullscreen) { - this.requestFullscreen = () => new Promise((resolve, reject) => { - try { - video.webkitEnterFullscreen(); - } catch (e) { - reject(e); - } - }); + this.requestFullscreen = () => video.webkitEnterFullscreen(); video.addEventListener('webkitendfullscreen', () => { setTimeout(() => this.play(), 1000); // fix bug in iOS }); @@ -639,4 +643,3 @@ const card = { // Apple iOS 12 doesn't support `||=` if (window.customCards) window.customCards.push(card); else window.customCards = [card]; - From 755a27d57ab116865ebafeb3861b4046d3f38072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Wed, 6 Dec 2023 23:26:47 +0100 Subject: [PATCH 2/6] feat: adjust timeout listening on camera state changes --- custom_components/webrtc/www/webrtc-camera.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index 85e6459..69c7575 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -72,7 +72,7 @@ class WebRTCCamera extends VideoRTC { this.streamID = -1; this.nextStream(false); - setTimeout(() => this.checkStateChange(), 500); + setTimeout(() => this.checkStateChange(), 1000); } checkStateChange() { @@ -85,7 +85,7 @@ class WebRTCCamera extends VideoRTC { this.config.state = state this.nextStream(true); } - setTimeout(() => this.checkStateChange(), 100); + setTimeout(() => this.checkStateChange(), 1000); } /** From 1fef1c17fa69594bedfc303f8290af3ce43ee6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Wed, 6 Dec 2023 23:48:42 +0100 Subject: [PATCH 3/6] feat: relax timer for state based rendering --- custom_components/webrtc/www/webrtc-camera.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index 69c7575..147b206 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -72,7 +72,7 @@ class WebRTCCamera extends VideoRTC { this.streamID = -1; this.nextStream(false); - setTimeout(() => this.checkStateChange(), 1000); + setTimeout(() => this.checkStateChange(), 2000); } checkStateChange() { @@ -85,7 +85,7 @@ class WebRTCCamera extends VideoRTC { this.config.state = state this.nextStream(true); } - setTimeout(() => this.checkStateChange(), 1000); + setTimeout(() => this.checkStateChange(), 2000); } /** From fcb4ee813b2d77fdc1af53525ee207466e0c7487 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Thu, 7 Dec 2023 08:36:05 +0100 Subject: [PATCH 4/6] feat: react on idle and streaming states only --- custom_components/webrtc/www/webrtc-camera.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index 147b206..eefaf22 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -72,7 +72,7 @@ class WebRTCCamera extends VideoRTC { this.streamID = -1; this.nextStream(false); - setTimeout(() => this.checkStateChange(), 2000); + setTimeout(() => this.checkStateChange(), 1000); } checkStateChange() { @@ -83,9 +83,10 @@ class WebRTCCamera extends VideoRTC { const state = this.hass.states[this.config.entity].state if (this.config.state != state) { this.config.state = state - this.nextStream(true); + if (this.config.state === "idle" || this.config.state === "streaming") + this.nextStream(true); } - setTimeout(() => this.checkStateChange(), 2000); + setTimeout(() => this.checkStateChange(), 1000); } /** From 6b58af793e882cffe3e1f3f1d65d00f67181e69b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Thu, 7 Dec 2023 08:44:15 +0100 Subject: [PATCH 5/6] feat: apply missing changes from upstream --- custom_components/webrtc/www/webrtc-camera.js | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index eefaf22..fbef64a 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -21,7 +21,6 @@ class WebRTCCamera extends VideoRTC { * entity: string, * mode: string, * media: string, - * state: string * * streams: Array<{ * name: string, @@ -33,6 +32,7 @@ class WebRTCCamera extends VideoRTC { * * title: string, * poster: string, + * poster_remote: boolean, * muted: boolean, * intersection: number, * ui: boolean, @@ -64,15 +64,14 @@ class WebRTCCamera extends VideoRTC { this.config = Object.assign({ mode: config.mse === false ? 'webrtc' : config.webrtc === false ? 'mse' : this.mode, media: this.media, + streams: [{url: config.url, entity: config.entity}], + poster_remote: config.poster && (config.poster.indexOf('://') > 0 || config.poster.charAt(0) === '/'), }, config); - if (!this.config.streams) { - this.config.streams = [{ url: config.url, entity: config.entity }]; - } - this.streamID = -1; this.nextStream(false); - setTimeout(() => this.checkStateChange(), 1000); + if(this.config.entity) + setTimeout(() => this.checkStateChange(), 1000); } checkStateChange() { @@ -89,6 +88,12 @@ class WebRTCCamera extends VideoRTC { setTimeout(() => this.checkStateChange(), 1000); } + set hass(hass) { + // if card in vertical stack - `hass` property assign after `onconnect` + super.hass = hass; + this.onconnect(); + } + /** * Called by the Hass to calculate default card height. */ @@ -155,7 +160,7 @@ class WebRTCCamera extends VideoRTC { this.hass.callWS({ type: 'auth/sign_path', path: '/api/webrtc/ws' }).then(data => { - if (this.config.poster && this.config.poster.indexOf('://') < 0) { + if (this.config.poster && !this.config.poster_remote) { this.video.poster = this.hass.hassUrl(data.path) + '&poster=' + encodeURIComponent(this.config.poster); } @@ -272,7 +277,7 @@ class WebRTCCamera extends VideoRTC { mode.addEventListener('click', () => this.nextStream(true)); if (this.config.muted) this.video.muted = true; - if (this.config.poster && this.config.poster.indexOf('://') > 0) this.video.poster = this.config.poster; + if (this.config.poster_remote) this.video.poster = this.config.poster; } renderDigitalPTZ() { @@ -507,7 +512,13 @@ class WebRTCCamera extends VideoRTC { fullscreen.icon = document.fullscreenElement ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'; }); } else if (video.webkitEnterFullscreen) { - this.requestFullscreen = () => video.webkitEnterFullscreen(); + this.requestFullscreen = () => new Promise((resolve, reject) => { + try { + video.webkitEnterFullscreen(); + } catch (e) { + reject(e); + } + }); video.addEventListener('webkitendfullscreen', () => { setTimeout(() => this.play(), 1000); // fix bug in iOS }); From e875efca3fc59d23aa062f3109add6f0e48f1d78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fuat=20Akg=C3=BCn?= Date: Sat, 9 Dec 2023 20:27:51 +0100 Subject: [PATCH 6/6] feat: adjust the timeout --- custom_components/webrtc/www/webrtc-camera.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index fbef64a..3e38124 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -71,7 +71,7 @@ class WebRTCCamera extends VideoRTC { this.streamID = -1; this.nextStream(false); if(this.config.entity) - setTimeout(() => this.checkStateChange(), 1000); + setTimeout(() => this.checkStateChange(), 2000); } checkStateChange() { @@ -85,7 +85,7 @@ class WebRTCCamera extends VideoRTC { if (this.config.state === "idle" || this.config.state === "streaming") this.nextStream(true); } - setTimeout(() => this.checkStateChange(), 1000); + setTimeout(() => this.checkStateChange(), 2000); } set hass(hass) {