From 76a0cba2af0296c8e56e3a7e75fa40e4138958a3 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Mon, 11 Mar 2024 20:22:28 -0700
Subject: [PATCH] Add dynamic camera size request

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/camera-mixin.js | 6 +++---
 src/pages/detect.vue      | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/camera-mixin.js b/src/pages/camera-mixin.js
index a40539a..97e9a07 100644
--- a/src/pages/camera-mixin.js
+++ b/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'
           },
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index a7991a6..3e8e2d7 100644
--- a/src/pages/detect.vue
+++ b/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()