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

Access video in detect page

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-02-28 17:24:49 -07:00
parent 239558194e
commit dbb1316cdf
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/detect.vue
View File

@@ -7,7 +7,11 @@
<f7-block class="detect-grid"> <f7-block class="detect-grid">
<div class="image-container"> <div class="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" :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%">
<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>
</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;">
<f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })" <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
@@ -86,7 +90,7 @@
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')"> <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
<SvgIcon icon="photo_library" /> <SvgIcon icon="photo_library" />
</f7-button> </f7-button>
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream"> <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="videoStream">
<SvgIcon icon="videocam"/> <SvgIcon icon="videocam"/>
</f7-button> </f7-button>
</f7-segmented> </f7-segmented>
@@ -321,7 +325,9 @@
uploadUid: null, uploadUid: null,
uploadDirty: false, uploadDirty: false,
modelLocation: '', modelLocation: '',
modelLoading: false modelLoading: false,
videoAvailable: false,
cameraStream: null
} }
}, },
setup() { setup() {
@@ -573,8 +579,24 @@
f7.dialog.alert(`Error loading image: ${e.message}`) f7.dialog.alert(`Error loading image: ${e.message}`)
}) })
}, },
videoStream() { async videoStream() {
//TODO //TODO
navigator.mediaDevices.getUserMedia({video: true})
var vidConstraint = {
video: {
width: {
ideal: 1920
},
height: {
ideal: 1080
},
facingMode: 'environment'
},
audio: false
}
const stream = await navigator.mediaDevices.getUserMedia(vidConstraint);
this.videoAvailable = true
this.cameraStream = stream
return null return null
}, },
async submitData () { async submitData () {