ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add dynamic camera size request

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-03-11 20:22:28 -07:00
parent a665fb591d
commit 76a0cba2af
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/camera-mixin.js
View File

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

4
src/pages/detect.vue
View File

@@ -5,7 +5,7 @@
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title> <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
</f7-navbar> </f7-navbar>
<f7-block class="detect-grid"> <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`" /> <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" /> <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%"> <div class="vid-container" v-if="videoAvailable" style="width: 100%; height: 100%">
@@ -280,7 +280,7 @@
return return
} }
if (mode == "camera") { if (mode == "camera") {
this.videoAvailable = await this.openCamera() this.videoAvailable = await this.openCamera(this.$refs.image_container)
if (this.videoAvailable) { return } if (this.videoAvailable) { return }
} }
this.$refs.image_chooser.click() this.$refs.image_chooser.click()