Add stop camera button

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
2024-03-07 14:41:58 -07:00
parent 4af06f0fe5
commit 4d356df02a

View File

@@ -10,7 +10,7 @@
<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%">
<video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video> <video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
<f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);" fill>Capture</f7-button> <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);" fill large>Capture</f7-button>
</div> </div>
</div> </div>
<div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;"> <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -41,9 +41,12 @@
<f7-button popover-open="#region-popover"> <f7-button popover-open="#region-popover">
<RegionIcon :region="activeRegion" /> <RegionIcon :region="activeRegion" />
</f7-button> </f7-button>
<f7-button :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover"> <f7-button v-if="!videoAvailable" :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover">
<SvgIcon icon="camera_add"/> <SvgIcon icon="camera_add"/>
</f7-button> </f7-button>
<f7-button v-if="videoAvailable" @click="closeCamera()">
<SvgIcon icon="no_photography"/>
</f7-button>
<f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'"> <f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
<SvgIcon icon="visibility"/> <SvgIcon icon="visibility"/>
</f7-button> </f7-button>
@@ -271,12 +274,12 @@
async selectImage (mode) { async selectImage (mode) {
this.imageLoadMode = mode this.imageLoadMode = mode
if (this.isCordova && mode == "camera") { if (this.isCordova && mode == "camera") {
navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true }); navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
return return
} }
if (mode == "camera") { if (mode == "camera") {
this.videoAvailable = await this.openCamera() this.videoAvailable = await this.openCamera()
if (this.videoAvailable) { return } if (this.videoAvailable) { return }
} }
this.$refs.image_chooser.click() this.$refs.image_chooser.click()
}, },