Add camera capability (#45)

Closes: #29

Fixes access to the camera in the android cordova build and maintains access when using the vite build.

Reviewed-on: Georgi_Lab/ALVINN_f7#45

src/pages/detect.vue

@@ -39,7 +39,7 @@
           <SvgIcon icon="videocam" fill-color="var(--avn-theme-color)"/>
         </f7-button>
       </f7-segmented>
-      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
+      <input v-if="!isCordova" type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
     </f7-block>
 
     <f7-panel :id="detectorName + '-settings'" right cover>
@@ -55,6 +55,7 @@
               </f7-list>
             </f7-accordion-content>
           </f7-list-item>
+          <f7-list-item title="Cordova">{{ isCordova }}</f7-list-item>
           <f7-list-item title="Turn on debugging">
             <f7-toggle v-model:checked="debugOn" style="margin-right: 16px;" />
           </f7-list-item>
@@ -225,13 +226,13 @@
         imageRegion: '',
         imageLoaded: false,
         imageView: '',
-        reader: new FileReader(),
         detectorName: '',
         detectorLevel: 50,
         detectorLabels: [],
         serverSettings: {},
         debugOn: false,
-        debugText: ['Variables loaded']
+        debugText: ['Variables loaded'],
+        isCordova: !!window.cordova
       }
     },
     created () {
@@ -334,7 +335,7 @@
           var doodsData = {
             "detector_name": this.detectorName,
             "detect": detectStructures,
-            "data": this.reader.result.split(',')[1]
+            "data": this.imageView.split(',')[1]
           }
           */
           var doodsData = {
@@ -359,7 +360,14 @@
         }
       },
       selectImage () {
-        var loadResult = this.$refs.image_chooser.click()
+        if (this.isCordova) {
+            navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
+        } else {
+          var loadResult = this.$refs.image_chooser.click()
+        }
+      },
+      onFail (message) {
+        alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
         if (this.selectedChip == iChip) {
@@ -394,21 +402,26 @@
           this.resetView()
         });
       },
-      getImage () {
+      getImage (searchImage) {
         var self = this
-        const searchImage = this.$refs.image_chooser.files[0]
-        let loadImage =new Promise((resolve, reject) => {
-          this.imageView = URL.createObjectURL(searchImage)
-          this.reader.readAsDataURL(searchImage)
+        let loadImage =new Promise(resolve => {
+          if (this.isCordova) {
+            this.imageView = 'data:image/jpg;base64,' + searchImage
+          } else {
+            const searchImage = this.$refs.image_chooser.files[0]
+            var reader = new FileReader()
+            reader.addEventListener("loadend", () => {this.imageView = reader.result})
+            reader.readAsDataURL(searchImage)
+          }
           resolve()
         })
-        loadImage.then(() => {
+        loadImage.then((imageData) => {
           this.imageLoaded = true
           this.resultData = {}
           this.resetView()
         }).catch((e) => {
           console.log(e.message)
-          f7.dialog.alert('Error loading image')
+          f7.dialog.alert(`Error loading image: ${e.message}`)
         })
       },
       resetView() {