Add screenshot support.

src/components/image.ts

@@ -95,6 +95,10 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
     return !this._cachedValueController?.hasTimer() ?? true;
   }
 
+  public async getScreenshotURL(): Promise<string | null> {
+    return this._cachedValueController?.value ?? null;
+  }
+
   /**
    * Get the camera entity for the current camera configuration.
    * @returns The entity or undefined if no camera entity is available.

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').

src/components/viewer.ts

@@ -49,6 +49,7 @@ import {
   playMediaMutingIfNecessary,
   setControlsOnVideo,
 } from '../utils/media.js';
+import { screenshotMedia } from '../utils/screenshot.js';
 import { ViewMediaClassifier } from '../view/media-classifier';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
 import { MediaQueriesResults } from '../view/media-queries-results.js';
@@ -563,6 +564,7 @@ export class FrigateCardViewerProvider
   protected _refFrigateCardMediaPlayer: Ref<Element & FrigateCardMediaPlayer> =
     createRef();
   protected _refVideoProvider: Ref<HTMLVideoElement> = createRef();
+  protected _refImageProvider: Ref<HTMLImageElement> = createRef();
 
   public async play(): Promise<void> {
     await playMediaMutingIfNecessary(
@@ -629,6 +631,17 @@ export class FrigateCardViewerProvider
     return true;
   }
 
+  public async getScreenshotURL(): Promise<string | null> {
+    if (this._refFrigateCardMediaPlayer.value) {
+      return await this._refFrigateCardMediaPlayer.value.getScreenshotURL();
+    } else if (this._refVideoProvider.value) {
+      return screenshotMedia(this._refVideoProvider.value);
+    } else if (this._refImageProvider.value) {
+      return this._refImageProvider.value.src;
+    }
+    return null;
+  }
+
   /**
    * Dispatch a clip view that matches the current (snapshot) query.
    */
@@ -735,6 +748,8 @@ export class FrigateCardViewerProvider
       });
     }
 
+    // Note: crossorigin="anonymous" is required on <video> below in order to
+    // allow screenshot of motionEye videos which currently go cross-origin.
     return this._useZoomIfRequired(html`
       ${ViewMediaClassifier.isVideo(this.media)
         ? this.media.getVideoContentType() === VideoContentType.HLS
@@ -759,6 +774,7 @@ export class FrigateCardViewerProvider
                 title="${this.media.getTitle() ?? ''}"
                 muted
                 playsinline
+                crossorigin="anonymous"
                 ?autoplay=${false}
                 ?controls=${this.viewerConfig.controls.builtin}
                 @loadedmetadata=${(ev: Event) => {
@@ -789,6 +805,7 @@ export class FrigateCardViewerProvider
               </video>
             `
         : html`<img
+            ${ref(this._refImageProvider)}
             aria-label="${this.media.getTitle() ?? ''}"
             src="${canonicalizeHAURL(this.hass, resolvedMedia?.url) ?? ''}"
             title="${this.media.getTitle() ?? ''}"