Capture video frame for detection

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/pages/detect.vue

@@ -10,7 +10,7 @@
         <SvgIcon v-if="!imageView && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
         <div class="vid-container" v-if="videoAvailable" style="width: 100%; height: 100%">
           <video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
-          <f7-button style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);" fill>Capture</f7-button>
+          <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);" fill>Capture</f7-button>
         </div>
       </div>
       <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -545,7 +545,10 @@
       },
       getImage (searchImage) {
         let loadImage = new Promise(resolve => {
-          if (this.isCordova && this.imageLoadMode == "camera") {
+          if (this.videoAvailable) {
+            this.videoAvailable = false
+            resolve(searchImage)
+          } else if (this.isCordova && this.imageLoadMode == "camera") {
             resolve('data:image/jpg;base64,' + searchImage)
           } else {
             const searchImage = this.$refs.image_chooser.files[0]
@@ -599,6 +602,16 @@
         this.cameraStream = stream
         return null
       },
+      captureVidFrame() {
+        const vidViewer = this.$refs.vid_viewer
+        vidViewer.pause()
+        let tempCVS = document.createElement('canvas')
+        tempCVS.height = vidViewer.videoHeight || parseInt(vidViewer.style.height)
+        tempCVS.width = vidViewer.videoWidth || parseInt(vidViewer.style.width)
+        const tempCtx = tempCVS.getContext('2d')
+        tempCtx.drawImage(vidViewer, 0, 0)
+        this.getImage(tempCVS.toDataURL())
+      },
       async submitData () {
         var uploadData = this.showResults
           .filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })