[Vuejs]-How to do this with Vue SCRIPT SETUP

1πŸ‘

βœ…

I think it’s normal to use, try to use camera.value, see this example

<script setup>
import Camera from "simple-vue-camera";
import { ref, defineExpose } from "vue";
import { useDialogPluginComponent } from 'quasar'
import ModalBar from "components/ModalBar.vue";

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()

const camera = ref(null)
const imageUrl = ref(null)
const photoTaken = ref(false)

const onOKClick = (imageUrl) => {
  onDialogOK(imageUrl)
}

const onCancelClick = () => {
  onDialogCancel()
}

const takeSnapshot = async () => {
  const cameraComponent = camera.value;
  const blob = await cameraComponent.snapshot({ width: 400, height: 400 });
  imageUrl.value = URL.createObjectURL(blob);
  const formData = new FormData();
  formData.append("file", blob);
  photoTaken.value = true;
}

defineExpose({
  dialogRef,
  onDialogHide,
  onOKClick,
  onCancelClick,
  camera,
  imageUrl,
  photoTaken,
  takeSnapshot
})
</script>

Leave a comment