Add dynamic camera size request

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

src/pages/camera-mixin.js

@@ -1,6 +1,6 @@
 export default {
   methods: {
-    async openCamera() {
+    async openCamera(imContain) {
       var cameraLoaded = false
       const devicesList = await navigator.mediaDevices.enumerateDevices()
       this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
@@ -9,10 +9,10 @@ export default {
         var vidConstraint = {
           video: {
             width: {
-              ideal: 1920
+              ideal: imContain.offsetWidth
             },
             height: {
-              ideal: 1080
+              ideal: imContain.offsetHeight
             },
             facingMode: 'environment'
           },

src/pages/detect.vue

@@ -5,7 +5,7 @@
       <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
     </f7-navbar>
     <f7-block class="detect-grid">
-      <div class="image-container">
+      <div class="image-container" ref="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 && !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%">
@@ -280,7 +280,7 @@
           return
         }
         if (mode == "camera") {
-          this.videoAvailable = await this.openCamera()
+          this.videoAvailable = await this.openCamera(this.$refs.image_container)
           if (this.videoAvailable) { return }
         }
         this.$refs.image_chooser.click()