diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts index b2467e2804..91f2c71cd2 100644 --- a/src/components/ha-web-rtc-player.ts +++ b/src/components/ha-web-rtc-player.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, html, LitElement } from "lit"; @@ -108,18 +107,18 @@ class HaWebRtcPlayer extends LitElement { return; } - console.time("WebRTC"); - this._error = undefined; - console.timeLog("WebRTC", "start clientConfig"); + this._startTimer(); + + this._logEvent("start clientConfig"); this._clientConfig = await fetchWebRtcClientConfiguration( this.hass, this.entityid ); - console.timeLog("WebRTC", "end clientConfig", this._clientConfig); + this._logEvent("end clientConfig", this._clientConfig); this._peerConnection = new RTCPeerConnection( this._clientConfig.configuration @@ -141,11 +140,10 @@ class HaWebRtcPlayer extends LitElement { this._peerConnection.onsignalingstatechange = (ev) => { switch ((ev.target as RTCPeerConnection).signalingState) { case "stable": - console.timeLog("WebRTC", "ICE negotiation complete"); + this._logEvent("ICE negotiation complete"); break; default: - console.timeLog( - "WebRTC", + this._logEvent( "Signaling state changed", (ev.target as RTCPeerConnection).signalingState ); @@ -170,7 +168,7 @@ class HaWebRtcPlayer extends LitElement { offerToReceiveVideo: true, }; - console.timeLog("WebRTC", "start createOffer", offerOptions); + this._logEvent("start createOffer", offerOptions); const offer: RTCSessionDescriptionInit = await this._peerConnection.createOffer(offerOptions); @@ -179,9 +177,9 @@ class HaWebRtcPlayer extends LitElement { return; } - console.timeLog("WebRTC", "end createOffer", offer); + this._logEvent("end createOffer", offer); - console.timeLog("WebRTC", "start setLocalDescription"); + this._logEvent("start setLocalDescription"); await this._peerConnection.setLocalDescription(offer); @@ -189,7 +187,7 @@ class HaWebRtcPlayer extends LitElement { return; } - console.timeLog("WebRTC", "end setLocalDescription"); + this._logEvent("end setLocalDescription"); let candidates = ""; @@ -203,11 +201,7 @@ class HaWebRtcPlayer extends LitElement { resolve(); } - console.timeLog( - "WebRTC", - "Ice gathering state changed", - iceGatheringState - ); + this._logEvent("Ice gathering state changed", iceGatheringState); }; }); @@ -225,7 +219,7 @@ class HaWebRtcPlayer extends LitElement { const offer_sdp = offer.sdp! + candidates; - console.timeLog("WebRTC", "start webRtcOffer", offer_sdp); + this._logEvent("start webRtcOffer", offer_sdp); try { this._unsub = webRtcOffer(this.hass, this.entityid, offer_sdp, (event) => @@ -238,8 +232,7 @@ class HaWebRtcPlayer extends LitElement { }; private _iceConnectionStateChanged = () => { - console.timeLog( - "WebRTC", + this._logEvent( "ice connection state change", this._peerConnection?.iceConnectionState ); @@ -265,18 +258,19 @@ class HaWebRtcPlayer extends LitElement { this._candidatesList = []; } if (event.type === "answer") { - console.timeLog("WebRTC", "answer", event.answer); + this._logEvent("answer", event.answer); this._handleAnswer(event); } if (event.type === "candidate") { - console.timeLog("WebRTC", "remote ice candidate", event.candidate); + this._logEvent("remote ice candidate", event.candidate); try { await this._peerConnection?.addIceCandidate( new RTCIceCandidate({ candidate: event.candidate, sdpMid: "0" }) ); } catch (err: any) { + // eslint-disable-next-line no-console console.error(err); } } @@ -291,11 +285,7 @@ class HaWebRtcPlayer extends LitElement { return; } - console.timeLog( - "WebRTC", - "local ice candidate", - event.candidate?.candidate - ); + this._logEvent("local ice candidate", event.candidate?.candidate); if (this._sessionId) { addWebRtcCandidate( @@ -334,19 +324,16 @@ class HaWebRtcPlayer extends LitElement { sdp: event.answer, }); try { - console.timeLog("WebRTC", "start setRemoteDescription", remoteDesc); + this._logEvent("start setRemoteDescription", remoteDesc); await this._peerConnection.setRemoteDescription(remoteDesc); } catch (err: any) { this._error = "Failed to connect WebRTC stream: " + err.message; this._cleanUp(); } - console.timeLog("WebRTC", "end setRemoteDescription"); + this._logEvent("end setRemoteDescription"); } private _cleanUp() { - console.timeLog("WebRTC", "stopped"); - console.timeEnd("WebRTC"); - if (this._remoteStream) { this._remoteStream.getTracks().forEach((track) => { track.stop(); @@ -372,6 +359,9 @@ class HaWebRtcPlayer extends LitElement { this._peerConnection.onsignalingstatechange = null; this._peerConnection = undefined; + + this._logEvent("stopped"); + this._stopTimer(); } this._unsub?.then((unsub) => unsub()); this._unsub = undefined; @@ -380,17 +370,43 @@ class HaWebRtcPlayer extends LitElement { } private _loadedData() { - console.timeLog("WebRTC", "loadedData"); - console.timeEnd("WebRTC"); - const video = this._videoEl; const stream = video.srcObject as MediaStream; - fireEvent(this, "load"); - fireEvent(this, "streams", { + const data = { hasAudio: Boolean(stream?.getAudioTracks().length), hasVideo: Boolean(stream?.getVideoTracks().length), - }); + }; + + fireEvent(this, "load"); + fireEvent(this, "streams", data); + + this._logEvent("loadedData", data); + this._stopTimer(); + } + + private _startTimer() { + if (!__DEV__) { + return; + } + // eslint-disable-next-line no-console + console.time("WebRTC"); + } + + private _stopTimer() { + if (!__DEV__) { + return; + } + // eslint-disable-next-line no-console + console.timeEnd("WebRTC"); + } + + private _logEvent(msg: string, ...args: unknown[]) { + if (!__DEV__) { + return; + } + // eslint-disable-next-line no-console + console.timeLog("WebRTC", msg, ...args); } static get styles(): CSSResultGroup {