Add screenshot support.

src/components/live/live-go2rtc.ts

@@ -18,6 +18,7 @@ import {
 } from '../../types.js';
 import { getEndpointAddressOrDispatchError } from '../../utils/endpoint';
 import { setControlsOnVideo } from '../../utils/media.js';
+import { screenshotMedia } from '../../utils/screenshot.js';
 import '../image.js';
 import { dispatchErrorMessageEvent } from '../message';
 import { VideoRTC } from './go2rtc/video-rtc';
@@ -93,6 +94,10 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
     return this._player?.video.paused ?? true;
   }
 
+  public async getScreenshotURL(): Promise<string | null> {
+    return this._player ? screenshotMedia(this._player.video) : null;
+  }
+
   disconnectedCallback(): void {
     this._player = undefined;
   }

src/components/live/live-ha.ts

@@ -54,6 +54,10 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
     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;

src/components/live/live-image.ts

@@ -49,6 +49,10 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
     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;

src/components/live/live-jsmpeg.ts

@@ -84,6 +84,10 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
     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.
@@ -107,6 +111,9 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
           audio: false,
           videoBufferSize: 1024 * 1024 * 4,
 
+          // Necessary for screenshots.
+          preserveDrawingBuffer: true,
+
           // Override with user-specified options.
           ...this.cameraConfig?.jsmpeg?.options,
 

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

@@ -2,6 +2,7 @@ import { Task } from '@lit-labs/task';
 import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { CameraEndpoints } from '../../camera-manager/types.js';
 import { localize } from '../../localize/localize.js';
 import liveWebRTCCardStyle from '../../scss/live-webrtc-card.scss';
 import {
@@ -10,21 +11,21 @@ import {
   FrigateCardError,
   FrigateCardMediaPlayer,
 } from '../../types.js';
+import { mayHaveAudio } from '../../utils/audio.js';
 import {
   dispatchMediaLoadedEvent,
   dispatchMediaPauseEvent,
   dispatchMediaPlayEvent,
   dispatchMediaVolumeChangeEvent,
 } from '../../utils/media-info.js';
-import { dispatchErrorMessageEvent, renderProgressIndicator } from '../message.js';
-import { renderTask } from '../../utils/task.js';
 import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
   setControlsOnVideo,
 } from '../../utils/media.js';
-import { CameraEndpoints } from '../../camera-manager/types.js';
-import { mayHaveAudio } from '../../utils/audio.js';
+import { screenshotMedia } from '../../utils/screenshot.js';
+import { renderTask } from '../../utils/task.js';
+import { dispatchErrorMessageEvent, renderProgressIndicator } from '../message.js';
 
 // Create a wrapper for AlexxIT's WebRTC card
 //  - https://github.com/AlexxIT/WebRTC
@@ -94,6 +95,11 @@ export class FrigateCardLiveWebRTCCard
     return this._getPlayer()?.paused ?? true;
   }
 
+  public async getScreenshotURL(): Promise<string | null> {
+    const video = this._getPlayer();
+    return video ? screenshotMedia(video) : null;
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
 

src/components/live/live.ts

@@ -756,19 +756,19 @@ export class FrigateCardLiveProvider
   public async pause(): Promise<void> {
     await this.updateComplete;
     await this._refProvider.value?.updateComplete;
-    this._refProvider.value?.pause();
+    await this._refProvider.value?.pause();
   }
 
   public async mute(): Promise<void> {
     await this.updateComplete;
     await this._refProvider.value?.updateComplete;
-    this._refProvider.value?.mute();
+    await this._refProvider.value?.mute();
   }
 
   public async unmute(): Promise<void> {
     await this.updateComplete;
     await this._refProvider.value?.updateComplete;
-    this._refProvider.value?.unmute();
+    await this._refProvider.value?.unmute();
   }
 
   public isMuted(): boolean {
@@ -778,19 +778,25 @@ export class FrigateCardLiveProvider
   public async seek(seconds: number): Promise<void> {
     await this.updateComplete;
     await this._refProvider.value?.updateComplete;
-    this._refProvider.value?.seek(seconds);
+    await this._refProvider.value?.seek(seconds);
   }
 
   public async setControls(controls?: boolean): Promise<void> {
     await this.updateComplete;
     await this._refProvider.value?.updateComplete;
-    this._refProvider.value?.setControls(controls);
+    await this._refProvider.value?.setControls(controls);
   }
 
   public isPaused(): boolean {
     return this._refProvider.value?.isPaused() ?? true;
   }
 
+  public async getScreenshotURL(): Promise<string | null> {
+    await this.updateComplete;
+    await this._refProvider.value?.updateComplete;
+    return await this._refProvider.value?.getScreenshotURL() ?? null;
+  }
+
   /**
    * Get the fully resolved live provider.
    * @returns A live provider (that is not 'auto').