Add screenshot support.

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() ?? ''}"