Initial support for go2rtc provider.

src/components/live/live-go2rtc.ts

@@ -0,0 +1,146 @@
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  unsafeCSS,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import liveMSEStyle from '../../scss/live-mse-webrtc.scss';
+import { CameraConfig, ExtendedHomeAssistant } from '../../types.js';
+import '../image.js';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+} from '../../utils/media';
+import { dispatchMediaLoadedEvent } from '../../utils/media-info';
+import { localize } from '../../localize/localize';
+import { dispatchErrorMessageEvent } from '../message';
+import { VideoRTC } from '../../external/go2rtc/video-rtc';
+import { homeAssistantSignPath } from '../../utils/ha';
+import { errorToConsole } from '../../utils/basic';
+
+// Note (2023-02-18): Depending on the behavior of the player / browser is
+// possible this URL will need to be re-signed in order to avoid HA spamming
+// logs after the expiry time, but this complexity is not added for now until
+// there are verified cases of this being an issue (see equivalent in the JSMPEG
+// provider).
+const GO2RTC_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
+
+@customElement('frigate-card-live-go2rtc-player')
+class FrigateCardGo2RTCPlayer extends VideoRTC {
+  public play(): void {
+    // Let Frigate card control auto playing.
+  }
+
+  public oninit(): void {
+    super.oninit();
+
+    if (this.video) {
+      const onloadeddata = this.video.onloadeddata;
+      this.video.onloadeddata = (e) => {
+        if (onloadeddata) {
+          onloadeddata.call(this.video, e);
+        }
+        hideMediaControlsTemporarily(this.video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
+        dispatchMediaLoadedEvent(this, this.video);
+      };
+    }
+  }
+}
+
+@customElement('frigate-card-live-go2rtc')
+export class FrigateCardGo2RTC extends LitElement {
+  // Not an reactive property to avoid resetting the video.
+  public hass?: ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  protected _player?: FrigateCardGo2RTCPlayer;
+
+  public play(): void {
+    this._player?.video?.play();
+  }
+
+  public pause(): void {
+    this._player?.video?.pause();
+  }
+
+  public mute(): void {
+    if (this._player?.video) {
+      this._player.video.muted = true;
+    }
+  }
+
+  public unmute(): void {
+    if (this._player?.video) {
+      this._player.video.muted = false;
+    }
+  }
+
+  public seek(seconds: number): void {
+    if (this._player?.video) {
+      this._player.video.currentTime = seconds;
+    }
+  }
+
+  protected async _createPlayer(): Promise<void> {
+    if (
+      !this.hass ||
+      !this.cameraConfig?.frigate.client_id ||
+      !this.cameraConfig.frigate.camera_name
+    ) {
+      return;
+    }
+
+    let response: string | null | undefined;
+    try {
+      response = await homeAssistantSignPath(
+        this.hass,
+        `/api/frigate/${this.cameraConfig.frigate.client_id}` +
+          `/mse/api/ws?src=${this.cameraConfig.frigate.camera_name}`,
+        GO2RTC_URL_SIGN_EXPIRY_SECONDS,
+      );
+    } catch (e) {
+      errorToConsole(e as Error);
+      return;
+    }
+    if (!response) {
+      return;
+    }
+    const url = response.replace(/^http/i, 'ws');
+    if (!url) {
+      return dispatchErrorMessageEvent(this, localize('error.failed_sign'));
+    }
+
+    this._player = new FrigateCardGo2RTCPlayer();
+    this._player.src = url;
+    this._player.visibilityCheck = false;
+    this._player.background = true;
+    this._player.mode = 'webrtc';
+
+    this.requestUpdate();
+  }
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('cameraConfig')) {
+      this._createPlayer();
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    return html`${this._player}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveMSEStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-go2rtc': FrigateCardGo2RTC;
+  }
+}

src/components/live/live-ha.ts

@@ -2,7 +2,7 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
-import liveFrigateStyle from '../../scss/live-frigate.scss';
+import liveHAStyle from '../../scss/live-ha.scss';
 import { CameraConfig, FrigateCardMediaPlayer } from '../../types.js';
 import { getStateObjOrDispatchError } from './live.js';
 import '../../patches/ha-camera-stream';
@@ -83,7 +83,7 @@ export class FrigateCardLiveHA extends LitElement {
    * Get styles.
    */
   static get styles(): CSSResultGroup {
-    return unsafeCSS(liveFrigateStyle);
+    return unsafeCSS(liveHAStyle);
   }
 }
 

src/components/live/live-image.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import liveFrigateStyle from '../../scss/live-frigate.scss';
+import liveImageStyle from '../../scss/live-image.scss';
 import { CameraConfig, LiveImageConfig } from '../../types.js';
 import { getStateObjOrDispatchError } from './live.js';
 import '../image.js';
@@ -84,7 +84,7 @@ export class FrigateCardLiveImage extends LitElement {
    * Get styles.
    */
   static get styles(): CSSResultGroup {
-    return unsafeCSS(liveFrigateStyle);
+    return unsafeCSS(liveImageStyle);
   }
 }
 

src/components/live/live-jsmpeg.ts

@@ -17,10 +17,10 @@ import { dispatchErrorMessageEvent } from '../message.js';
 import { contentsChanged, errorToConsole } from '../../utils/basic.js';
 
 // Number of seconds a signed URL is valid for.
-const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
+const JSMPEG_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
 
 // Number of seconds before the expiry to trigger a refresh.
-const URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
+const JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
 
 @customElement('frigate-card-live-jsmpeg')
 export class FrigateCardLiveJSMPEG extends LitElement {
@@ -102,7 +102,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
         this.hass,
         `/api/frigate/${this.cameraConfig.frigate.client_id}` +
           `/jsmpeg/${this.cameraConfig.frigate.camera_name}`,
-        URL_SIGN_EXPIRY_SECONDS,
+        JSMPEG_URL_SIGN_EXPIRY_SECONDS,
       );
     } catch (e) {
       errorToConsole(e as Error);
@@ -221,7 +221,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
       this._jsmpegVideoPlayer = await this._createJSMPEGPlayer(url);
       this._refreshPlayerTimerID = window.setTimeout(() => {
         this.requestUpdate();
-      }, (URL_SIGN_EXPIRY_SECONDS - URL_SIGN_REFRESH_THRESHOLD_SECONDS) * 1000);
+      }, (JSMPEG_URL_SIGN_EXPIRY_SECONDS - JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS) * 1000);
     } else {
       dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_sign'));
     }

src/components/live/live-webrtc-card.ts

@@ -3,7 +3,7 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { localize } from '../../localize/localize.js';
-import liveWebRTCStyle from '../../scss/live-webrtc.scss';
+import liveWebRTCCardStyle from '../../scss/live-webrtc-card.scss';
 import {
   CameraConfig,
   CardWideConfig,
@@ -193,7 +193,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
    * Get styles.
    */
   static get styles(): CSSResultGroup {
-    return unsafeCSS(liveWebRTCStyle);
+    return unsafeCSS(liveWebRTCCardStyle);
   }
 }
 

src/components/live/live.ts

@@ -573,18 +573,16 @@ export class FrigateCardLiveCarousel extends LitElement {
 
     const [prevID, nextID] = this._getCameraIDsOfNeighbors();
 
-    const cameraMetadataPrevious = prevID ? this.cameraManager.getCameraMetadata(
-      this.hass,
-      prevID,
-    ) : null;
+    const cameraMetadataPrevious = prevID
+      ? this.cameraManager.getCameraMetadata(this.hass, prevID)
+      : null;
     const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
       this.hass,
       this.view.camera,
     );
-    const cameraMetadataNext = nextID ? this.cameraManager.getCameraMetadata(
-      this.hass,
-      nextID,
-    ) : null;
+    const cameraMetadataNext = nextID
+      ? this.cameraManager.getCameraMetadata(this.hass, nextID)
+      : null;
 
     // Notes on the below:
     // - guard() is used to avoid reseting the carousel unless the
@@ -607,7 +605,9 @@ export class FrigateCardLiveCarousel extends LitElement {
           [this.cameraManager, this.liveConfig],
           this._getPlugins.bind(this),
         ) as EmblaCarouselPlugins}
-        .label="${cameraMetadataCurrent ? `${localize('common.live')}: ${cameraMetadataCurrent.title}` : ''}"
+        .label="${cameraMetadataCurrent
+          ? `${localize('common.live')}: ${cameraMetadataCurrent.title}`
+          : ''}"
         .titlePopupConfig=${config.controls.title}
         .selected=${this._getSelectedCameraIndex()}
         transitionEffect=${this._getTransitionEffect()}
@@ -796,9 +796,11 @@ export class FrigateCardLiveProvider extends LitElement {
       } else if (provider === 'ha') {
         import('./live-ha.js');
       } else if (provider === 'webrtc-card') {
-        import('./live-webrtc.js');
+        import('./live-webrtc-card.js');
       } else if (provider === 'image') {
         import('./live-image.js');
+      } else if (provider === 'go2rtc') {
+        import('./live-go2rtc.js');
       }
     }
   }
@@ -850,6 +852,15 @@ export class FrigateCardLiveProvider extends LitElement {
             @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
           >
           </frigate-card-live-ha>`
+        : provider === 'go2rtc'
+        ? html`<frigate-card-live-go2rtc
+              ${ref(this._providerRef)}
+              class=${classMap(providerClasses)}
+              .hass=${this.hass}
+              .cameraConfig=${this.cameraConfig}
+              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
+            >
+            </frigate-card-live-webrtc-card>`
         : provider === 'webrtc-card'
         ? html`<frigate-card-live-webrtc-card
             ${ref(this._providerRef)}