src/pages/detect.vue

@@ -7,7 +7,11 @@
     <f7-block class="detect-grid">
       <div class="image-container">
         <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
-        <SvgIcon v-if="!imageView" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <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>
+        </div>
       </div>
       <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
@@ -86,7 +90,7 @@
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
           <SvgIcon icon="photo_library" />
         </f7-button>
-        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
+        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="videoStream">
           <SvgIcon icon="videocam"/>
         </f7-button>
       </f7-segmented>
@@ -321,7 +325,9 @@
         uploadUid: null,
         uploadDirty: false,
         modelLocation: '',
-        modelLoading: false
+        modelLoading: false,
+        videoAvailable: false,
+        cameraStream: null
       }
     },
     setup() {
@@ -573,8 +579,24 @@
           f7.dialog.alert(`Error loading image: ${e.message}`)
         })
       },
-      videoStream() {
+      async videoStream() {
         //TODO
+        navigator.mediaDevices.getUserMedia({video: true})
+        var vidConstraint = {
+          video: {
+            width: {
+              ideal: 1920
+            },
+            height: {
+              ideal: 1080
+            },
+            facingMode: 'environment'
+          },
+          audio: false
+        }
+        const stream = await navigator.mediaDevices.getUserMedia(vidConstraint);
+        this.videoAvailable = true
+        this.cameraStream = stream
         return null
       },
       async submitData () {