Replace camera load with in-page camera access

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

src/pages/detect.vue

@@ -51,7 +51,7 @@
           <SvgIcon :icon="(uploadUid) ? 'cloud_done' : 'cloud_upload'"/>
         </f7-button>
       </f7-segmented>
-      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
+      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
     </f7-block>
 
     <f7-panel :id="detectorName + '-settings'" right cover :backdrop="false" :container-el="`#${detectorName}-detect-page`">
@@ -326,6 +326,7 @@
         uploadDirty: false,
         modelLocation: '',
         modelLoading: false,
+        videoDeviceAvailable: false,
         videoAvailable: false,
         cameraStream: null
       }
@@ -486,18 +487,36 @@
           this.detectorLabels.forEach( s => s.detect = false )
         }
       },
-      selectImage (mode) {
+      async selectImage (mode) {
         this.imageLoadMode = mode
-        if (mode == "camera") {
-          this.$refs.image_chooser.setAttribute("capture","environment")
-        } else {
-          this.$refs.image_chooser.removeAttribute("capture")
-        }
         if (this.isCordova && mode == "camera") {
             navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
-        } else {
-          var loadResult = this.$refs.image_chooser.click()
+            return
         }
+        if (mode == "camera") {
+          const devicesList = await navigator.mediaDevices.enumerateDevices()
+          this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
+          if (this.videoDeviceAvailable) {
+            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
+          }
+        }
+        var loadResult = this.$refs.image_chooser.click()
       },
       onFail (message) {
         alert(`Camera fail: ${message}`)
@@ -585,23 +604,6 @@
       },
       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
       },
       captureVidFrame() {
         const vidViewer = this.$refs.vid_viewer