hrms-checkin/src/views/SampleCamera.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 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>