43 lines
984 B
Vue
43 lines
984 B
Vue
|
<script setup lang="ts">
|
||
|
|
import Camera from 'simple-vue-camera'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const camera = ref<InstanceType<typeof Camera>>();
|
||
|
|
|
||
|
|
const cameraIsOn = ref<boolean>(false)
|
||
|
|
|
||
|
|
const cameraOff = () => {
|
||
|
|
cameraIsOn.value ? camera.value?.stop() : camera.value?.start()
|
||
|
|
cameraIsOn.value = !cameraIsOn.value
|
||
|
|
}
|
||
|
|
|
||
|
|
// Use camera reference to call functions
|
||
|
|
const takePicture = async () => {
|
||
|
|
const imageBlob = await camera.value?.snapshot(
|
||
|
|
{ width: 640, height: 480 },
|
||
|
|
'image/png',
|
||
|
|
0.5
|
||
|
|
)
|
||
|
|
|
||
|
|
console.log('imageBlob', imageBlob)
|
||
|
|
camera.value?.stop()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="row col-12">
|
||
|
|
<div class="col-3">
|
||
|
|
<Camera
|
||
|
|
:resolution="{ width: 500, height: 500 }"
|
||
|
|
ref="camera"
|
||
|
|
:autoplay="false"
|
||
|
|
>
|
||
|
|
<q-btn color="primary" @click="cameraOff"
|
||
|
|
>I'm on top of the video</q-btn
|
||
|
|
>
|
||
|
|
<q-btn color="primary" @click="takePicture">Take Picture</q-btn>
|
||
|
|
</Camera>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|