refactor: Split live.ts into multiple files (#1644)

src/components/live/providers/go2rtc/README.md

@@ -0,0 +1,15 @@
+# go2rtc Player
+
+This is a modified version of the go2rtc example video player code, modified for
+use in the Frigate card. In order to make future maintenance easier,
+modifications have been kept to a minimum.
+
+## Original Example Code
+
+**Link**: https://github.com/AlexxIT/go2rtc/tree/master/www
+
+**Description**: Example video player imported from go2rtc.
+
+**Copyright**: [Alexey Khit](https://github.com/AlexxIT)
+
+**License**: [MIT](https://github.com/AlexxIT/go2rtc/blob/master/LICENSE)

src/components/live/providers/go2rtc/index.ts

@@ -0,0 +1,178 @@
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  unsafeCSS,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { CameraEndpoints } from '../../../../camera-manager/types.js';
+import { CameraConfig, MicrophoneConfig } from '../../../../config/types.js';
+import { localize } from '../../../../localize/localize.js';
+import liveGo2RTCStyle from '../../../../scss/live-go2rtc.scss';
+import { ExtendedHomeAssistant, FrigateCardMediaPlayer } from '../../../../types.js';
+import { getEndpointAddressOrDispatchError } from '../../../../utils/endpoint.js';
+import { setControlsOnVideo } from '../../../../utils/media.js';
+import { screenshotMedia } from '../../../../utils/screenshot.js';
+import '../../../image.js';
+import { dispatchErrorMessageEvent } from '../../../message.js';
+import { VideoRTC } from './video-rtc.js';
+
+customElements.define('frigate-card-live-go2rtc-player', VideoRTC);
+
+// 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')
+export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPlayer {
+  // Not an reactive property to avoid resetting the video.
+  public hass?: ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: false })
+  public cameraEndpoints?: CameraEndpoints;
+
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
+  @property({ attribute: false })
+  public microphoneConfig?: MicrophoneConfig;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = false;
+
+  protected _player?: VideoRTC;
+
+  public async play(): Promise<void> {
+    return this._player?.video?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._player?.video?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    if (this._player?.video) {
+      this._player.video.muted = true;
+    }
+  }
+
+  public async unmute(): Promise<void> {
+    if (this._player?.video) {
+      this._player.video.muted = false;
+    }
+  }
+
+  public isMuted(): boolean {
+    return this._player?.video?.muted ?? true;
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    if (this._player?.video) {
+      this._player.video.currentTime = seconds;
+    }
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    if (this._player?.video) {
+      setControlsOnVideo(this._player.video, controls ?? this.controls);
+    }
+  }
+
+  public isPaused(): boolean {
+    return this._player?.video?.paused ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    return this._player?.video ? screenshotMedia(this._player.video) : null;
+  }
+
+  disconnectedCallback(): void {
+    this._player = undefined;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Reset the player when reconnected to the DOM.
+    // https://github.com/dermotduffy/frigate-hass-card/issues/996
+    this.requestUpdate();
+  }
+
+  protected async _createPlayer(): Promise<void> {
+    if (!this.hass) {
+      return;
+    }
+
+    const endpoint = this.cameraEndpoints?.go2rtc;
+    if (!endpoint) {
+      return dispatchErrorMessageEvent(this, localize('error.live_camera_no_endpoint'), {
+        context: this.cameraConfig,
+      });
+    }
+
+    const address = await getEndpointAddressOrDispatchError(
+      this,
+      this.hass,
+      endpoint,
+      GO2RTC_URL_SIGN_EXPIRY_SECONDS,
+    );
+    if (!address) {
+      return;
+    }
+
+    this._player = new VideoRTC();
+    this._player.containingPlayer = this;
+    this._player.microphoneStream = this.microphoneStream ?? null;
+    this._player.src = address;
+    this._player.visibilityCheck = false;
+    this._player.controls = this.controls;
+
+    if (this.cameraConfig?.go2rtc?.modes && this.cameraConfig.go2rtc.modes.length) {
+      this._player.mode = this.cameraConfig.go2rtc.modes.join(',');
+    }
+
+    this.requestUpdate();
+  }
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (!this._player || changedProps.has('cameraEndpoints')) {
+      this._createPlayer();
+    }
+
+    if (changedProps.has('controls') && this._player) {
+      this._player.controls = this.controls;
+    }
+
+    if (this._player && changedProps.has('microphoneStream')) {
+      if (this._player?.microphoneStream !== this.microphoneStream) {
+        this._player.microphoneStream = this.microphoneStream ?? null;
+
+        // Need to force a reconnect if the microphone stream changes since
+        // WebRTC cannot introduce a new stream after the offer is already made.
+        this._player.reconnect();
+      }
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    return html`${this._player}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveGo2RTCStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-go2rtc': FrigateCardGo2RTC;
+  }
+}

src/components/live/providers/go2rtc/video-rtc.d.ts

@@ -0,0 +1,36 @@
+export class VideoRTC extends HTMLElement {
+  DISCONNECT_TIMEOUT: number;
+  RECONNECT_TIMEOUT: number;
+  CODECS: string[];
+  mode: string;
+  background: boolean;
+  visibilityThreshold: number;
+  visibilityCheck: boolean;
+  pcConfig: RTCConfiguration;
+  wsState: number;
+  pcState: number;
+  video: HTMLVideoElement | null;
+  ws: WebSocket | null;
+  wsURL: string;
+  pc: RTCPeerConnection | null;
+  connectTS: number;
+  mseCodecs: string;
+
+  src: string | URL;
+
+  oninit(): void;
+  send(value: unknown): void;
+  onpcvideo(ev: Event): void;
+  onconnect(): void;
+  ondisconnect(): void;
+  onclose(): void;
+  onopen(): void;
+  onwebrtc(): void;
+  onmessage: Record<string, (msg: { type: string; value: string }) => void>;
+
+  // Custom methods/members.
+  controls: boolean;
+  containingPlayer: FrigateCardMediaPlayer | null;
+  microphoneStream: MediaStream | null;
+  reconnect();
+}

src/components/live/providers/go2rtc/video-rtc.js

@@ -0,0 +1,799 @@
+import { mayHaveAudio } from '../../../../utils/audio';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+  setControlsOnVideo,
+} from '../../../../utils/media';
+import {
+  dispatchMediaLoadedEvent,
+  dispatchMediaPauseEvent,
+  dispatchMediaPlayEvent,
+  dispatchMediaVolumeChangeEvent,
+} from '../../../../utils/media-info';
+import { getTechnologyForVideoRTC } from '../../../../components-lib/live/utils/get-technology-for-video-rtc.js';
+
+/**
+ * VideoRTC v1.6.0 - Video player for go2rtc streaming application.
+ *
+ * All modern web technologies are supported in almost any browser except Apple Safari.
+ *
+ * Support:
+ * - ECMAScript 2017 (ES8) = ES6 + async
+ * - RTCPeerConnection for Safari iOS 11.0+
+ * - IntersectionObserver for Safari iOS 12.2+
+ * - ManagedMediaSource for Safari 17+
+ *
+ * Doesn't support:
+ * - MediaSource for Safari iOS
+ * - Customized built-in elements (extends HTMLVideoElement) because Safari
+ * - Autoplay for WebRTC in Safari
+ */
+export class VideoRTC extends HTMLElement {
+  constructor() {
+    super();
+
+    this.DISCONNECT_TIMEOUT = 5000;
+    this.RECONNECT_TIMEOUT = 15000;
+
+    this.CODECS = [
+      'avc1.640029', // H.264 high 4.1 (Chromecast 1st and 2nd Gen)
+      'avc1.64002A', // H.264 high 4.2 (Chromecast 3rd Gen)
+      'avc1.640033', // H.264 high 5.1 (Chromecast with Google TV)
+      'hvc1.1.6.L153.B0', // H.265 main 5.1 (Chromecast Ultra)
+      'mp4a.40.2', // AAC LC
+      'mp4a.40.5', // AAC HE
+      'flac', // FLAC (PCM compatible)
+      'opus', // OPUS Chrome, Firefox
+    ];
+
+    /**
+     * [config] Supported modes (webrtc, webrtc/tcp, mse, hls, mp4, mjpeg).
+     * @type {string}
+     */
+    this.mode = 'webrtc,mse,hls,mjpeg';
+
+    /**
+     * [Config] Requested medias (video, audio, microphone).
+     * @type {string}
+     */
+    this.media = 'video,audio';
+
+    /**
+     * [config] Run stream when not displayed on the screen. Default `false`.
+     * @type {boolean}
+     */
+    this.background = false;
+
+    /**
+     * [config] Run stream only when player in the viewport. Stop when user scroll out player.
+     * Value is percentage of visibility from `0` (not visible) to `1` (full visible).
+     * Default `0` - disable;
+     * @type {number}
+     */
+    this.visibilityThreshold = 0;
+
+    /**
+     * [config] Run stream only when browser page on the screen. Stop when user change browser
+     * tab or minimise browser windows.
+     * @type {boolean}
+     */
+    this.visibilityCheck = true;
+
+    /**
+     * [config] WebRTC configuration
+     * @type {RTCConfiguration}
+     */
+    this.pcConfig = {
+      bundlePolicy: 'max-bundle',
+      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+      sdpSemantics: 'unified-plan', // important for Chromecast 1
+    };
+
+    /**
+     * [info] WebSocket connection state. Values: CONNECTING, OPEN, CLOSED
+     * @type {number}
+     */
+    this.wsState = WebSocket.CLOSED;
+
+    /**
+     * [info] WebRTC connection state.
+     * @type {number}
+     */
+    this.pcState = WebSocket.CLOSED;
+
+    /**
+     * @type {HTMLVideoElement}
+     */
+    this.video = null;
+
+    /**
+     * @type {WebSocket}
+     */
+    this.ws = null;
+
+    /**
+     * @type {string|URL}
+     */
+    this.wsURL = '';
+
+    /**
+     * @type {RTCPeerConnection}
+     */
+    this.pc = null;
+
+    /**
+     * @type {number}
+     */
+    this.connectTS = 0;
+
+    /**
+     * @type {string}
+     */
+    this.mseCodecs = '';
+
+    /**
+     * [internal] Disconnect TimeoutID.
+     * @type {number}
+     */
+    this.disconnectTID = 0;
+
+    /**
+     * [internal] Reconnect TimeoutID.
+     * @type {number}
+     */
+    this.reconnectTID = 0;
+
+    /**
+     * [internal] Handler for receiving Binary from WebSocket.
+     * @type {Function}
+     */
+    this.ondata = null;
+
+    /**
+     * [internal] Handlers list for receiving JSON from WebSocket.
+     * @type {Object.<string,Function>}
+     */
+    this.onmessage = null;
+
+    /**
+     * A microphone stream to attach to a WebRTC connection.
+     * @type {MediaStream}}
+     */
+    this.microphoneStream = null;
+
+    /**
+     * A reference to a containing FrigateCardMediaPlayer object.
+     * @type {FrigateCardMediaPlayer}}
+     */
+    this.containingPlayer = null;
+
+    /**
+     * Whether to show or hide video controls.
+     * @type {boolean}}
+     */
+    this.controls = true;
+  }
+
+  /**
+   * Reconnect the stream.
+   */
+  reconnect() {
+    if (this.wsState !== WebSocket.CLOSED) {
+      // The websocket has onclose handlers, so don't call onconnect directly,
+      // wait until the eventhandlers are finished..
+      this.ws?.addEventListener('close', () => this.onconnect());
+      this.ondisconnect();
+    } else {
+      // Still call ondisconnect() as there may be an RTC connection to
+      // terminate even if the websocket is closed.
+      this.ondisconnect();
+      this.onconnect();
+    }
+  }
+
+  /**
+   * Set video source (WebSocket URL). Support relative path.
+   * @param {string|URL} value
+   */
+  set src(value) {
+    if (typeof value !== 'string') value = value.toString();
+    if (value.startsWith('http')) {
+      value = 'ws' + value.substring(4);
+    } else if (value.startsWith('/')) {
+      value = 'ws' + location.origin.substring(4) + value;
+    }
+
+    this.wsURL = value;
+
+    this.onconnect();
+  }
+
+  /**
+   * Play video. Support automute when autoplay blocked.
+   * https://developer.chrome.com/blog/autoplay/
+   */
+  play() {
+    // Frigate card controls playing at a higher level.
+  }
+
+  /**
+   * Send message to server via WebSocket
+   * @param {Object} value
+   */
+  send(value) {
+    if (this.ws) this.ws.send(JSON.stringify(value));
+  }
+
+  /** @param {Function} isSupported */
+  codecs(isSupported) {
+    return this.CODECS.filter(
+      (codec) => this.media.indexOf(codec.indexOf('vc1') > 0 ? 'video' : 'audio') >= 0,
+    )
+      .filter((codec) => isSupported(`video/mp4; codecs="${codec}"`))
+      .join();
+  }
+
+  /**
+   * `CustomElement`. Invoked each time the custom element is appended into a
+   * document-connected element.
+   */
+  connectedCallback() {
+    if (this.disconnectTID) {
+      clearTimeout(this.disconnectTID);
+      this.disconnectTID = 0;
+    }
+
+    // because video autopause on disconnected from DOM
+    if (this.video) {
+      const seek = this.video.seekable;
+      if (seek.length > 0) {
+        this.video.currentTime = seek.end(seek.length - 1);
+      }
+      this.play();
+    } else {
+      this.oninit();
+    }
+
+    this.onconnect();
+  }
+
+  /**
+   * `CustomElement`. Invoked each time the custom element is disconnected from the
+   * document's DOM.
+   */
+  disconnectedCallback() {
+    if (this.background || this.disconnectTID) return;
+    if (this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED) return;
+
+    this.disconnectTID = setTimeout(() => {
+      if (this.reconnectTID) {
+        clearTimeout(this.reconnectTID);
+        this.reconnectTID = 0;
+      }
+
+      this.disconnectTID = 0;
+
+      this.ondisconnect();
+    }, this.DISCONNECT_TIMEOUT);
+  }
+
+  /**
+   * Creates child DOM elements. Called automatically once on `connectedCallback`.
+   */
+  oninit() {
+    this.video = document.createElement('video');
+    setControlsOnVideo(this.video, this.controls);
+    this.video.playsInline = true;
+    this.video.preload = 'auto';
+
+    this.video.style.display = 'block'; // fix bottom margin 4px
+    this.video.style.width = '100%';
+    this.video.style.height = '100%';
+
+    this.appendChild(this.video);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.video.addEventListener('error', (_ev) => {
+      // For Frigate Card, we avoid log spam here from errors, and also don't
+      // attempt to close the websocket unless the connection is open (otherwise
+      // on reconnect() an exception will be thrown here that we're attempting
+      // to close a connection that's not open)
+
+      // console.warn(ev);
+      if (this.ws && this.wsState === WebSocket.OPEN) this.ws.close(); // run reconnect for broken MSE stream
+    });
+
+    // all Safari lies about supported audio codecs
+    const m = window.navigator.userAgent.match(/Version\/(\d+).+Safari/);
+    if (m) {
+      // AAC from v13, FLAC from v14, OPUS - unsupported
+      const skip = m[1] < '13' ? 'mp4a.40.2' : m[1] < '14' ? 'flac' : 'opus';
+      this.CODECS.splice(this.CODECS.indexOf(skip));
+    }
+
+    if (this.background) return;
+
+    if ('hidden' in document && this.visibilityCheck) {
+      document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+          this.disconnectedCallback();
+        } else if (this.isConnected) {
+          this.connectedCallback();
+        }
+      });
+    }
+
+    if ('IntersectionObserver' in window && this.visibilityThreshold) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) {
+              this.disconnectedCallback();
+            } else if (this.isConnected) {
+              this.connectedCallback();
+            }
+          });
+        },
+        { threshold: this.visibilityThreshold },
+      );
+      observer.observe(this);
+    }
+
+    this.video.onloadeddata = () => {
+      if (this.controls) {
+        hideMediaControlsTemporarily(this.video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
+      }
+      dispatchMediaLoadedEvent(this, this.video, {
+        player: this.containingPlayer,
+        capabilities: {
+          // 2-way audio is only supported on WebRTC connections. The state of
+          // `this.microphoneStream` is not taken into account here since
+          // that can be created after the fact -- this is purely saying that
+          // were a microphone stream available it could be used usefully.
+          supports2WayAudio: !!this.pc,
+          supportsPause: true,
+          hasAudio: mayHaveAudio(this.video),
+        },
+        technology: getTechnologyForVideoRTC(this),
+      });
+    };
+    this.video.onvolumechange = () => dispatchMediaVolumeChangeEvent(this);
+    this.video.onplay = () => dispatchMediaPlayEvent(this);
+    this.video.onpause = () => dispatchMediaPauseEvent(this);
+    // Always started muted. Media may be unmuted in accordance with user
+    // configuration.
+    this.video.muted = true;
+  }
+
+  /**
+   * Connect to WebSocket. Called automatically on `connectedCallback`.
+   * @return {boolean} true if the connection has started.
+   */
+  onconnect() {
+    if (!this.isConnected || !this.wsURL || this.ws || this.pc) return false;
+
+    // CLOSED or CONNECTING => CONNECTING
+    this.wsState = WebSocket.CONNECTING;
+
+    this.connectTS = Date.now();
+
+    this.ws = new WebSocket(this.wsURL);
+    this.ws.binaryType = 'arraybuffer';
+    this.ws.addEventListener('open', (ev) => this.onopen(ev));
+    this.ws.addEventListener('close', (ev) => this.onclose(ev));
+
+    return true;
+  }
+
+  ondisconnect() {
+    this.wsState = WebSocket.CLOSED;
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+
+    this.pcState = WebSocket.CLOSED;
+    if (this.pc) {
+      this.pc.getSenders().forEach((sender) => {
+        if (sender.track) sender.track.stop();
+      });
+      this.pc.close();
+      this.pc = null;
+    }
+
+    this.video.src = '';
+    this.video.srcObject = null;
+  }
+
+  /**
+   * @returns {Array.<string>} of modes (mse, webrtc, etc.)
+   */
+  onopen() {
+    // CONNECTING => OPEN
+    this.wsState = WebSocket.OPEN;
+
+    this.ws.addEventListener('message', (ev) => {
+      if (typeof ev.data === 'string') {
+        const msg = JSON.parse(ev.data);
+        for (const mode in this.onmessage) {
+          this.onmessage[mode](msg);
+        }
+      } else {
+        this.ondata(ev.data);
+      }
+    });
+
+    this.ondata = null;
+    this.onmessage = {};
+
+    const modes = [];
+
+    if (
+      this.mode.indexOf('mse') >= 0 &&
+      ('MediaSource' in window || 'ManagedMediaSource' in window)
+    ) {
+      modes.push('mse');
+      this.onmse();
+    } else if (
+      this.mode.indexOf('hls') >= 0 &&
+      this.video.canPlayType('application/vnd.apple.mpegurl')
+    ) {
+      modes.push('hls');
+      this.onhls();
+    } else if (this.mode.indexOf('mp4') >= 0) {
+      modes.push('mp4');
+      this.onmp4();
+    }
+
+    if (this.mode.indexOf('webrtc') >= 0 && 'RTCPeerConnection' in window) {
+      modes.push('webrtc');
+      this.onwebrtc();
+    }
+
+    if (this.mode.indexOf('mjpeg') >= 0) {
+      if (modes.length) {
+        this.onmessage['mjpeg'] = (msg) => {
+          if (msg.type !== 'error' || msg.value.indexOf(modes[0]) !== 0) return;
+          this.onmjpeg();
+        };
+      } else {
+        modes.push('mjpeg');
+        this.onmjpeg();
+      }
+    }
+
+    return modes;
+  }
+
+  /**
+   * @return {boolean} true if reconnection has started.
+   */
+  onclose() {
+    if (this.wsState === WebSocket.CLOSED) return false;
+
+    // CONNECTING, OPEN => CONNECTING
+    this.wsState = WebSocket.CONNECTING;
+    this.ws = null;
+
+    // reconnect no more than once every X seconds
+    const delay = Math.max(this.RECONNECT_TIMEOUT - (Date.now() - this.connectTS), 0);
+
+    this.reconnectTID = setTimeout(() => {
+      this.reconnectTID = 0;
+      this.onconnect();
+    }, delay);
+
+    return true;
+  }
+
+  onmse() {
+    /** @type {MediaSource} */
+    let ms;
+
+    if ('ManagedMediaSource' in window) {
+      const MediaSource = window.ManagedMediaSource;
+
+      ms = new MediaSource();
+      ms.addEventListener(
+        'sourceopen',
+        () => {
+          this.send({ type: 'mse', value: this.codecs(MediaSource.isTypeSupported) });
+        },
+        { once: true },
+      );
+
+      this.video.disableRemotePlayback = true;
+      this.video.srcObject = ms;
+    } else {
+      ms = new MediaSource();
+      ms.addEventListener(
+        'sourceopen',
+        () => {
+          URL.revokeObjectURL(this.video.src);
+          this.send({ type: 'mse', value: this.codecs(MediaSource.isTypeSupported) });
+        },
+        { once: true },
+      );
+
+      this.video.src = URL.createObjectURL(ms);
+      this.video.srcObject = null;
+    }
+
+    this.play();
+
+    this.mseCodecs = '';
+
+    this.onmessage['mse'] = (msg) => {
+      if (msg.type !== 'mse') return;
+
+      this.mseCodecs = msg.value;
+
+      const sb = ms.addSourceBuffer(msg.value);
+      sb.mode = 'segments'; // segments or sequence
+      sb.addEventListener('updateend', () => {
+        if (sb.updating) return;
+
+        try {
+          if (bufLen > 0) {
+            const data = buf.slice(0, bufLen);
+            bufLen = 0;
+            sb.appendBuffer(data);
+          } else if (sb.buffered && sb.buffered.length) {
+            const end = sb.buffered.end(sb.buffered.length - 1) - 15;
+            const start = sb.buffered.start(0);
+            if (end > start) {
+              sb.remove(start, end);
+              ms.setLiveSeekableRange(end, end + 15);
+            }
+            // console.debug("VideoRTC.buffered", start, end);
+          }
+        } catch (e) {
+          // console.debug(e);
+        }
+      });
+
+      const buf = new Uint8Array(2 * 1024 * 1024);
+      let bufLen = 0;
+
+      this.ondata = (data) => {
+        if (sb.updating || bufLen > 0) {
+          const b = new Uint8Array(data);
+          buf.set(b, bufLen);
+          bufLen += b.byteLength;
+          // console.debug("VideoRTC.buffer", b.byteLength, bufLen);
+        } else {
+          try {
+            sb.appendBuffer(data);
+          } catch (e) {
+            // console.debug(e);
+          }
+        }
+      };
+    };
+  }
+
+  onwebrtc() {
+    const pc = new RTCPeerConnection(this.pcConfig);
+
+    pc.addEventListener('icecandidate', (ev) => {
+      if (
+        ev.candidate &&
+        this.mode.indexOf('webrtc/tcp') >= 0 &&
+        ev.candidate.protocol === 'udp'
+      )
+        return;
+
+      const candidate = ev.candidate ? ev.candidate.toJSON().candidate : '';
+      this.send({ type: 'webrtc/candidate', value: candidate });
+    });
+
+    pc.addEventListener('connectionstatechange', () => {
+      if (pc.connectionState === 'connected') {
+        const tracks = pc
+          .getTransceivers()
+          .filter((tr) => tr.currentDirection === 'recvonly') // skip inactive
+          .map((tr) => tr.receiver.track);
+        /** @type {HTMLVideoElement} */
+        const video2 = document.createElement('video');
+        video2.addEventListener('loadeddata', () => this.onpcvideo(video2), {
+          once: true,
+        });
+        video2.srcObject = new MediaStream(tracks);
+      } else if (
+        pc.connectionState === 'failed' ||
+        pc.connectionState === 'disconnected'
+      ) {
+        pc.close(); // stop next events
+
+        this.pcState = WebSocket.CLOSED;
+        this.pc = null;
+
+        this.onconnect();
+      }
+    });
+
+    this.onmessage['webrtc'] = (msg) => {
+      switch (msg.type) {
+        case 'webrtc/candidate':
+          if (this.mode.indexOf('webrtc/tcp') >= 0 && msg.value.indexOf(' udp ') > 0)
+            return;
+
+          pc.addIceCandidate({ candidate: msg.value, sdpMid: '0' }).catch((er) => {
+            console.warn(er);
+          });
+          break;
+        case 'webrtc/answer':
+          pc.setRemoteDescription({ type: 'answer', sdp: msg.value }).catch((er) => {
+            console.warn(er);
+          });
+          break;
+        case 'error':
+          if (msg.value.indexOf('webrtc/offer') < 0) return;
+          pc.close();
+      }
+    };
+
+    this.createOffer(pc).then((offer) => {
+      this.send({ type: 'webrtc/offer', value: offer.sdp });
+    });
+
+    this.pcState = WebSocket.CONNECTING;
+    this.pc = pc;
+  }
+
+  /**
+   * @param pc {RTCPeerConnection}
+   * @return {Promise<RTCSessionDescriptionInit>}
+   */
+  async createOffer(pc) {
+    // Must add microphone tracks prior to making the offer.
+    this.microphoneStream?.getTracks().forEach((track) => {
+      pc.addTransceiver(track, { direction: 'sendonly' });
+    });
+
+    try {
+      if (this.media.indexOf('microphone') >= 0) {
+        const media = await navigator.mediaDevices.getUserMedia({ audio: true });
+        media.getTracks().forEach((track) => {
+          pc.addTransceiver(track, { direction: 'sendonly' });
+        });
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+
+    for (const kind of ['video', 'audio']) {
+      if (this.media.indexOf(kind) >= 0) {
+        pc.addTransceiver(kind, { direction: 'recvonly' });
+      }
+    }
+
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    return offer;
+  }
+
+  /**
+   * @param video2 {HTMLVideoElement}
+   */
+  onpcvideo(video2) {
+    if (this.pc) {
+      // Video+Audio > Video, H265 > H264, Video > Audio, WebRTC > MSE
+      let rtcPriority = 0,
+        msePriority = 0;
+
+      /** @type {MediaStream} */
+      const stream = video2.srcObject;
+      if (stream.getVideoTracks().length > 0) rtcPriority += 0x220;
+      if (stream.getAudioTracks().length > 0) rtcPriority += 0x102;
+
+      if (this.mseCodecs.indexOf('hvc1.') >= 0) msePriority += 0x230;
+      if (this.mseCodecs.indexOf('avc1.') >= 0) msePriority += 0x210;
+      if (this.mseCodecs.indexOf('mp4a.') >= 0) msePriority += 0x101;
+
+      if (rtcPriority >= msePriority) {
+        this.video.srcObject = stream;
+        this.play();
+
+        this.pcState = WebSocket.OPEN;
+
+        this.wsState = WebSocket.CLOSED;
+        if (this.ws) {
+          this.ws.close();
+          this.ws = null;
+        }
+      } else {
+        this.pcState = WebSocket.CLOSED;
+        if (this.pc) {
+          this.pc.close();
+          this.pc = null;
+        }
+      }
+    }
+
+    video2.srcObject = null;
+  }
+
+  onmjpeg() {
+    let receivedFirstFrame = false;
+
+    this.ondata = (data) => {
+      setControlsOnVideo(this.video, false);
+      this.video.poster = 'data:image/jpeg;base64,' + VideoRTC.btoa(data);
+
+      if (!receivedFirstFrame) {
+        receivedFirstFrame = true;
+        dispatchMediaLoadedEvent(this, this.video, {
+          player: this.containingPlayer,
+          technology: ['mjpeg'],
+        });
+      }
+    };
+
+    this.send({ type: 'mjpeg' });
+  }
+
+  onhls() {
+    this.onmessage['hls'] = (msg) => {
+      if (msg.type !== 'hls') return;
+
+      const url = 'http' + this.wsURL.substring(2, this.wsURL.indexOf('/ws')) + '/hls/';
+      const playlist = msg.value.replace('hls/', url);
+      this.video.src = 'data:application/vnd.apple.mpegurl;base64,' + btoa(playlist);
+      this.play();
+    };
+
+    this.send({
+      type: 'hls',
+      value: this.codecs((type) => this.video.canPlayType(type)),
+    });
+  }
+
+  onmp4() {
+    /** @type {HTMLCanvasElement} **/
+    const canvas = document.createElement('canvas');
+    /** @type {CanvasRenderingContext2D} */
+    let context;
+
+    /** @type {HTMLVideoElement} */
+    const video2 = document.createElement('video');
+    video2.autoplay = true;
+    video2.playsInline = true;
+    video2.muted = true;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    video2.addEventListener('loadeddata', (_ev) => {
+      if (!context) {
+        canvas.width = video2.videoWidth;
+        canvas.height = video2.videoHeight;
+        context = canvas.getContext('2d');
+
+        dispatchMediaLoadedEvent(this, video2, {
+          player: this.containingPlayer,
+          technology: ['mp4'],
+        });
+      }
+
+      context.drawImage(video2, 0, 0, canvas.width, canvas.height);
+
+      setControlsOnVideo(this.video, false);
+      this.video.poster = canvas.toDataURL('image/jpeg');
+    });
+
+    this.ondata = (data) => {
+      video2.src = 'data:video/mp4;base64,' + VideoRTC.btoa(data);
+    };
+
+    this.send({ type: 'mp4', value: this.codecs(this.video.canPlayType) });
+  }
+
+  static btoa(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    let binary = '';
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+  }
+}

src/components/live/providers/ha.ts

@@ -0,0 +1,100 @@
+import { HomeAssistant } from '@dermotduffy/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 { CameraConfig } from '../../../config/types';
+import { localize } from '../../../localize/localize';
+import '../../../patches/ha-camera-stream';
+import '../../../patches/ha-hls-player.js';
+import '../../../patches/ha-web-rtc-player.js';
+import liveHAStyle from '../../../scss/live-ha.scss';
+import { FrigateCardMediaPlayer } from '../../../types.js';
+import { renderMessage } from '../../message';
+import { getStateObjOrDispatchError } from '../../../utils/get-state-obj';
+
+@customElement('frigate-card-live-ha')
+export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPlayer {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = true;
+
+  protected _playerRef: Ref<Element & FrigateCardMediaPlayer> = createRef();
+
+  public async play(): Promise<void> {
+    return this._playerRef.value?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._playerRef.value?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    this._playerRef.value?.mute();
+  }
+
+  public async unmute(): Promise<void> {
+    this._playerRef.value?.unmute();
+  }
+
+  public isMuted(): boolean {
+    return this._playerRef.value?.isMuted() ?? true;
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    this._playerRef.value?.seek(seconds);
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    this._playerRef.value?.setControls(controls ?? this.controls);
+  }
+
+  public isPaused(): boolean {
+    return this._playerRef.value?.isPaused() ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    return (await this._playerRef.value?.getScreenshotURL()) ?? null;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return;
+    }
+
+    const stateObj = getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
+    if (!stateObj) {
+      return;
+    }
+    if (stateObj.state === 'unavailable') {
+      return renderMessage({
+        message: localize('error.live_camera_unavailable'),
+        type: 'error',
+        icon: 'mdi:connection',
+        context: this.cameraConfig,
+      });
+    }
+    return html` <frigate-card-ha-camera-stream
+      ${ref(this._playerRef)}
+      .hass=${this.hass}
+      .stateObj=${stateObj}
+      .controls=${this.controls}
+      .muted=${true}
+    >
+    </frigate-card-ha-camera-stream>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveHAStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-ha': FrigateCardLiveHA;
+  }
+}

src/components/live/providers/image.ts

@@ -0,0 +1,84 @@
+import { HomeAssistant } from '@dermotduffy/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 { CameraConfig } from '../../../config/types';
+import basicBlockStyle from '../../../scss/basic-block.scss';
+import { FrigateCardMediaPlayer } from '../../../types.js';
+import { getStateObjOrDispatchError } from '../../../utils/get-state-obj';
+import '../../image.js';
+
+@customElement('frigate-card-live-image')
+export class FrigateCardLiveImage extends LitElement implements FrigateCardMediaPlayer {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
+
+  public async play(): Promise<void> {
+    await this._refImage.value?.play();
+  }
+
+  public async pause(): Promise<void> {
+    await this._refImage.value?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    await this._refImage.value?.mute();
+  }
+
+  public async unmute(): Promise<void> {
+    await this._refImage.value?.unmute();
+  }
+
+  public isMuted(): boolean {
+    return !!this._refImage.value?.isMuted();
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    await this._refImage.value?.seek(seconds);
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    await this._refImage.value?.setControls(controls);
+  }
+
+  public isPaused(): boolean {
+    return this._refImage.value?.isPaused() ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    return (await this._refImage.value?.getScreenshotURL()) ?? null;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.cameraConfig) {
+      return;
+    }
+
+    getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
+
+    return html`
+      <frigate-card-image
+        ${ref(this._refImage)}
+        .hass=${this.hass}
+        .imageConfig=${this.cameraConfig.image}
+        .cameraConfig=${this.cameraConfig}
+      >
+      </frigate-card-image>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(basicBlockStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-image': FrigateCardLiveImage;
+  }
+}

src/components/live/providers/jsmpeg.ts

@@ -0,0 +1,256 @@
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { CameraEndpoints } from '../../../camera-manager/types.js';
+import { renderProgressIndicator } from '../../message.js';
+import { CameraConfig, CardWideConfig } from '../../../config/types.js';
+import { localize } from '../../../localize/localize.js';
+import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss';
+import { ExtendedHomeAssistant, FrigateCardMediaPlayer } from '../../../types.js';
+import { getEndpointAddressOrDispatchError } from '../../../utils/endpoint.js';
+import {
+  dispatchMediaLoadedEvent,
+  dispatchMediaPauseEvent,
+  dispatchMediaPlayEvent,
+} from '../../../utils/media-info.js';
+import { Timer } from '../../../utils/timer.js';
+import { dispatchErrorMessageEvent } from '../../message.js';
+
+// Number of seconds a signed URL is valid for.
+const JSMPEG_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
+
+// Number of seconds before the expiry to trigger a refresh.
+const JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
+
+@customElement('frigate-card-live-jsmpeg')
+export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMediaPlayer {
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: false })
+  public cameraEndpoints?: CameraEndpoints;
+
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
+  protected hass?: ExtendedHomeAssistant;
+
+  protected _jsmpegCanvasElement?: HTMLCanvasElement;
+  protected _jsmpegVideoPlayer?: JSMpeg.VideoElement;
+  protected _refreshPlayerTimer = new Timer();
+
+  public async play(): Promise<void> {
+    return this._jsmpegVideoPlayer?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._jsmpegVideoPlayer?.stop();
+  }
+
+  public async mute(): Promise<void> {
+    const player = this._jsmpegVideoPlayer?.player;
+    if (player) {
+      player.volume = 0;
+    }
+  }
+
+  public async unmute(): Promise<void> {
+    const player = this._jsmpegVideoPlayer?.player;
+    if (player) {
+      player.volume = 1;
+    }
+  }
+
+  public isMuted(): boolean {
+    return this._jsmpegVideoPlayer ? this._jsmpegVideoPlayer.player.volume === 0 : true;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async seek(_seconds: number): Promise<void> {
+    // JSMPEG does not support seeking.
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async setControls(_controls: boolean): Promise<void> {
+    // Not implemented.
+  }
+
+  public isPaused(): boolean {
+    return this._jsmpegVideoPlayer?.player?.paused ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    return this._jsmpegCanvasElement?.toDataURL('image/jpeg') ?? null;
+  }
+
+  /**
+   * Create a JSMPEG player.
+   * @param url The URL for the player to connect to.
+   * @returns A JSMPEG player.
+   */
+  protected async _createJSMPEGPlayer(url: string): Promise<JSMpeg.VideoElement> {
+    this._jsmpegVideoPlayer = await new Promise<JSMpeg.VideoElement>((resolve) => {
+      let videoDecoded = false;
+      const player = new JSMpeg.VideoElement(
+        this,
+        url,
+        {
+          canvas: this._jsmpegCanvasElement,
+        },
+        {
+          // The media carousel may automatically pause when the browser tab is
+          // inactive, JSMPEG does not need to also do so independently.
+          pauseWhenHidden: false,
+          autoplay: false,
+          protocols: [],
+          audio: false,
+          videoBufferSize: 1024 * 1024 * 4,
+
+          // Necessary for screenshots.
+          preserveDrawingBuffer: true,
+
+          // Override with user-specified options.
+          ...this.cameraConfig?.jsmpeg?.options,
+
+          // Don't allow the player to internally reconnect, as it may re-use a
+          // URL with a (newly) invalid signature, e.g. during a Home Assistant
+          // restart.
+          reconnectInterval: 0,
+          onVideoDecode: () => {
+            // This is the only callback that is called after the dimensions
+            // are available. It's called on every frame decode, so just
+            // ignore any subsequent calls.
+            if (!videoDecoded && this._jsmpegCanvasElement) {
+              videoDecoded = true;
+              resolve(player);
+            }
+          },
+          onPlay: () => dispatchMediaPlayEvent(this),
+          onPause: () => dispatchMediaPauseEvent(this),
+        },
+      );
+    });
+
+    // The media loaded event must be dispatched after the player is assigned to
+    // `this._jsmpegVideoPlayer`, since the load call may (will!) result in
+    // calls back to the player to check for pause status for menu buttons.
+    if (this._jsmpegCanvasElement) {
+      dispatchMediaLoadedEvent(this, this._jsmpegCanvasElement, {
+        player: this,
+        capabilities: {
+          supportsPause: true,
+        },
+        technology: ['jsmpeg'],
+      });
+    }
+  }
+
+  /**
+   * Reset / destroy the player.
+   */
+  protected _resetPlayer(): void {
+    this._refreshPlayerTimer.stop();
+    if (this._jsmpegVideoPlayer) {
+      try {
+        this._jsmpegVideoPlayer.destroy();
+      } catch (err) {
+        // Pass.
+      }
+      this._jsmpegVideoPlayer = undefined;
+    }
+    if (this._jsmpegCanvasElement) {
+      this._jsmpegCanvasElement.remove();
+      this._jsmpegCanvasElement = undefined;
+    }
+  }
+
+  /**
+   * Component connected callback.
+   */
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.isConnected) {
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Component disconnected callback.
+   */
+  disconnectedCallback(): void {
+    if (!this.isConnected) {
+      this._resetPlayer();
+    }
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Refresh the JSMPEG player.
+   */
+  protected async _refreshPlayer(): Promise<void> {
+    if (!this.hass) {
+      return;
+    }
+    this._resetPlayer();
+
+    this._jsmpegCanvasElement = document.createElement('canvas');
+    this._jsmpegCanvasElement.className = 'media';
+
+    const endpoint = this.cameraEndpoints?.jsmpeg;
+    if (!endpoint) {
+      return dispatchErrorMessageEvent(this, localize('error.live_camera_no_endpoint'), {
+        context: this.cameraConfig,
+      });
+    }
+
+    const address = await getEndpointAddressOrDispatchError(
+      this,
+      this.hass,
+      endpoint,
+      JSMPEG_URL_SIGN_EXPIRY_SECONDS,
+    );
+    if (!address) {
+      return;
+    }
+
+    await this._createJSMPEGPlayer(address);
+    this._refreshPlayerTimer.start(
+      JSMPEG_URL_SIGN_EXPIRY_SECONDS - JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS,
+      () => this.requestUpdate(),
+    );
+  }
+
+  /**
+   * Master render method.
+   */
+  protected render(): TemplateResult | void {
+    const _render = async (): Promise<TemplateResult | void> => {
+      await this._refreshPlayer();
+
+      if (!this._jsmpegVideoPlayer || !this._jsmpegCanvasElement) {
+        return dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_player'));
+      }
+      return html`${this._jsmpegCanvasElement}`;
+    };
+    return html`${until(
+      _render(),
+      renderProgressIndicator({
+        cardWideConfig: this.cardWideConfig,
+      }),
+    )}`;
+  }
+
+  /**
+   * Get styles.
+   */
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveJSMPEGStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-jsmpeg': FrigateCardLiveJSMPEG;
+  }
+}

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

@@ -0,0 +1,243 @@
+import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import { Task } from '@lit-labs/task';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { CameraEndpoints } from '../../../camera-manager/types.js';
+import { getTechnologyForVideoRTC } from '../../../components-lib/live/utils/get-technology-for-video-rtc.js';
+import { CameraConfig, CardWideConfig } from '../../../config/types.js';
+import { localize } from '../../../localize/localize.js';
+import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss';
+import { FrigateCardError, FrigateCardMediaPlayer } from '../../../types.js';
+import { mayHaveAudio } from '../../../utils/audio.js';
+import {
+  dispatchMediaLoadedEvent,
+  dispatchMediaPauseEvent,
+  dispatchMediaPlayEvent,
+  dispatchMediaVolumeChangeEvent,
+} from '../../../utils/media-info.js';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+  setControlsOnVideo,
+} from '../../../utils/media.js';
+import { screenshotMedia } from '../../../utils/screenshot.js';
+import { renderTask } from '../../../utils/task.js';
+import { dispatchErrorMessageEvent, renderProgressIndicator } from '../../message.js';
+import { VideoRTC } from './go2rtc/video-rtc.js';
+
+// Create a wrapper for AlexxIT's WebRTC card
+//  - https://github.com/AlexxIT/WebRTC
+@customElement('frigate-card-live-webrtc-card')
+export class FrigateCardLiveWebRTCCard
+  extends LitElement
+  implements FrigateCardMediaPlayer
+{
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: false })
+  public cameraEndpoints?: CameraEndpoints;
+
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = false;
+
+  protected hass?: HomeAssistant;
+
+  // A task to await the load of the WebRTC component.
+  protected _webrtcTask = new Task(this, this._getWebRTCCardElement, () => [1]);
+
+  public async play(): Promise<void> {
+    return this._getPlayer()?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._getPlayer()?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.muted = true;
+    }
+  }
+
+  public async unmute(): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.muted = false;
+    }
+  }
+
+  public isMuted(): boolean {
+    return this._getPlayer()?.muted ?? true;
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.currentTime = seconds;
+    }
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      setControlsOnVideo(player, controls ?? this.controls);
+    }
+  }
+
+  public isPaused(): boolean {
+    return this._getPlayer()?.paused ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    const video = this._getPlayer();
+    return video ? screenshotMedia(video) : null;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Reset the player when reconnected to the DOM.
+    // https://github.com/dermotduffy/frigate-hass-card/issues/996
+    this.requestUpdate();
+  }
+
+  protected _getVideoRTC(): VideoRTC | null {
+    return (this.renderRoot?.querySelector('#webrtc') ?? null) as VideoRTC | null;
+  }
+
+  /**
+   * Get the underlying video player.
+   * @returns The player or `null` if not found.
+   */
+  protected _getPlayer(): HTMLVideoElement | null {
+    return this._getVideoRTC()?.video ?? null;
+  }
+
+  protected async _getWebRTCCardElement(): Promise<
+    CustomElementConstructor | undefined
+  > {
+    await customElements.whenDefined('webrtc-camera');
+    return customElements.get('webrtc-camera');
+  }
+
+  /**
+   * Create the WebRTC element. May throw.
+   */
+  protected _createWebRTC(): HTMLElement | null {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const webrtcElement = this._webrtcTask.value;
+    if (webrtcElement && this.hass && this.cameraConfig) {
+      const webrtc = new webrtcElement() as HTMLElement & {
+        hass: HomeAssistant;
+        setConfig: (config: Record<string, unknown>) => void;
+      };
+      const config = {
+        // By default, webrtc-card will stop the video when 50% of the video is
+        // hidden. This is incompatible with the card zoom support, since the
+        // video will easily stop if the user zooms in too much. Disable this
+        // feature by default.
+        // See: https://github.com/dermotduffy/frigate-hass-card/issues/1614
+        intersection: 0,
+
+        ...this.cameraConfig.webrtc_card,
+      };
+      if (!config.url && !config.entity && this.cameraEndpoints?.webrtcCard) {
+        // This will never need to be signed, it is just used internally by the
+        // card as a stream name lookup.
+        config.url = this.cameraEndpoints.webrtcCard.endpoint;
+      }
+      webrtc.setConfig(config);
+      webrtc.hass = this.hass;
+      return webrtc;
+    }
+    return null;
+  }
+
+  /**
+   * Master render method.
+   * @returns A rendered template.
+   */
+  protected render(): TemplateResult | void {
+    const render = (): TemplateResult | void => {
+      let webrtcElement: HTMLElement | null;
+      try {
+        webrtcElement = this._createWebRTC();
+      } catch (e) {
+        return dispatchErrorMessageEvent(
+          this,
+          e instanceof FrigateCardError
+            ? e.message
+            : localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
+          { context: (e as FrigateCardError).context },
+        );
+      }
+      if (webrtcElement) {
+        // Set the id to ensure that the relevant CSS styles will have
+        // sufficient specifity to overcome some styles that are otherwise
+        // applied to <ha-card> in Safari.
+        webrtcElement.id = 'webrtc';
+      }
+      return html`${webrtcElement}`;
+    };
+
+    // Use a task to allow us to asynchronously wait for the WebRTC card to
+    // load, but yet still have the card load be followed by the updated()
+    // lifecycle callback (unlike just using `until`).
+    return renderTask(this, this._webrtcTask, render, {
+      inProgressFunc: () =>
+        renderProgressIndicator({
+          message: localize('error.webrtc_card_waiting'),
+          cardWideConfig: this.cardWideConfig,
+        }),
+    });
+  }
+
+  /**
+   * Updated lifecycle callback.
+   */
+  public updated(): void {
+    // Extract the video component after it has been rendered and generate the
+    // media load event.
+    this.updateComplete.then(() => {
+      const videoRTC = this._getVideoRTC();
+      const video = this._getPlayer();
+      if (video) {
+        setControlsOnVideo(video, this.controls);
+        video.onloadeddata = () => {
+          if (this.controls) {
+            hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
+          }
+          dispatchMediaLoadedEvent(this, video, {
+            player: this,
+            capabilities: {
+              supportsPause: true,
+              hasAudio: mayHaveAudio(video),
+            },
+            ...(videoRTC && { technology: getTechnologyForVideoRTC(videoRTC) }),
+          });
+        };
+        video.onplay = () => dispatchMediaPlayEvent(this);
+        video.onpause = () => dispatchMediaPauseEvent(this);
+        video.onvolumechange = () => dispatchMediaVolumeChangeEvent(this);
+      }
+    });
+  }
+
+  /**
+   * Get styles.
+   */
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveWebRTCCardStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-webrtc-card': FrigateCardLiveWebRTCCard;
+  }
+}