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

Capture video frame for detection

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-03-03 08:57:46 -07:00
parent dbb1316cdf
commit 9f47f56062
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/detect.vue
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 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>Capture</f7-button>
</div> </div>
</div> </div>
<div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;"> <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -545,7 +545,10 @@
}, },
getImage (searchImage) { getImage (searchImage) {
let loadImage = new Promise(resolve => { let loadImage = new Promise(resolve => {
if (this.isCordova && this.imageLoadMode == "camera") { if (this.videoAvailable) {
this.videoAvailable = false
resolve(searchImage)
} else if (this.isCordova && this.imageLoadMode == "camera") {
resolve('data:image/jpg;base64,' + searchImage) resolve('data:image/jpg;base64,' + searchImage)
} else { } else {
const searchImage = this.$refs.image_chooser.files[0] const searchImage = this.$refs.image_chooser.files[0]
@@ -599,6 +602,16 @@
this.cameraStream = stream this.cameraStream = stream
return null return null
}, },
captureVidFrame() {
const vidViewer = this.$refs.vid_viewer
vidViewer.pause()
let tempCVS = document.createElement('canvas')
tempCVS.height = vidViewer.videoHeight || parseInt(vidViewer.style.height)
tempCVS.width = vidViewer.videoWidth || parseInt(vidViewer.style.width)
const tempCtx = tempCVS.getContext('2d')
tempCtx.drawImage(vidViewer, 0, 0)
this.getImage(tempCVS.toDataURL())
},
async submitData () { async submitData () {
var uploadData = this.showResults var uploadData = this.showResults
.filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted }) .filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })