From 82f45bfeddc159f920e6e0f5bf3891fbe2721607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 12 Mar 2022 00:01:54 +0100
Subject: [PATCH] add videoSnap.

---
 src/component/utils/video-snap.ts | 33 +++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/component/utils/video-snap.ts

diff --git a/src/component/utils/video-snap.ts b/src/component/utils/video-snap.ts
new file mode 100644
index 00000000..3a18d423
--- /dev/null
+++ b/src/component/utils/video-snap.ts
@@ -0,0 +1,33 @@
+// Takes a snapshot of the video and returns as object url
+export function videoSnap(video: HTMLVideoElement): Promise<string> {
+  return new Promise((res, rej) => {
+    const width = video.videoWidth
+    const height = video.videoHeight
+
+    const canvas = document.createElement('canvas') as HTMLCanvasElement
+    canvas.width = width
+    canvas.height = height
+
+    const ctx = canvas.getContext('2d')
+    if (ctx === null) {
+      rej('canvas context is null')
+      return
+    }
+
+    // Define the size of the rectangle that will be filled (basically the entire element)
+    ctx.fillRect(0, 0, width, height)
+
+    // Grab the image from the video
+    ctx.drawImage(video, 0, 0, width, height)
+
+    canvas.toBlob(function (blob) {
+      if (blob === null) {
+        rej('canvas blob is null')
+        return
+      }
+
+      const url = URL.createObjectURL(blob)
+      res(url)
+    })
+  })
+}