60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<!-- File test function -->
|
|
<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 deviceCamera = ref<any>()
|
|
|
|
const cameraOff = async () => {
|
|
// change camera device
|
|
if (cameraIsOn.value) {
|
|
camera.value?.stop()
|
|
} else {
|
|
await camera.value?.start()
|
|
changeCamera()
|
|
}
|
|
cameraIsOn.value = !cameraIsOn.value
|
|
}
|
|
|
|
// change camera device
|
|
const changeCamera = async () => {
|
|
const devices: any = await camera.value?.devices(['videoinput'])
|
|
const device = await devices[0]
|
|
camera.value?.changeCamera(device.deviceId)
|
|
deviceCamera.value = devices
|
|
}
|
|
|
|
// Use camera reference to call functions
|
|
const takePicture = async () => {
|
|
const imageBlob = await camera.value?.snapshot(
|
|
{ width: 640, height: 640 },
|
|
'image/png',
|
|
0.5
|
|
)
|
|
|
|
console.log('imageBlob', imageBlob)
|
|
camera.value?.stop()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row col-md-12 col-sm-12">
|
|
<div class="col-md-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>
|
|
<q-btn color="primary" @click="changeCamera">changeCamera</q-btn>
|
|
</Camera>
|
|
|
|
{{ deviceCamera }}
|
|
</div>
|
|
</div>
|
|
</template>
|