<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>
