My code get error when use this code:
<script setup>
import { requiredValidatorEng } from "@validators"
import api from "@/api/VisitorAPI"
import apiVR from "@/api/VisitReservationAPI"
import comboUtil from "@/utils/comboUtil"
import img from "@/img/picture.png"
import { DatetimeFormat } from "vue-i18n"
import Webcam from "webcamjs"
// import Webcam from "@/plugins/";
const swal = inject("$swal")
const formRef = ref()
const router = useRouter()
const loading = ref(false)
const urlImage1 = ref("")
const urlImage2 = ref("")
const urlImage3 = ref("")
const image1 = ref(null)
const image2 = ref(null)
const image3 = ref(null)
const combo = reactive({
visitorType: [],
departement: []
})
onMounted(async () => {
combo.visitorType = await comboUtil.doGetComboVisitorType()
Webcam.set({
width: 320,
height: 240,
image_format: "jpeg",
jpeg_quality: 90
})
Webcam.attach("#my_camera")
})
function take_snapshot() {
console.log("Webcam", Webcam)
Webcam.snap(function (data_uri) {
document.getElementById("results").innerHTML = "<h2>Here is your image:</h2>" + '<img src="' + data_uri + '"/>'
})
}
</script>
<template>
<section>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebcamJS Test Page</title>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<form>
<input type="button" value="Take Snapshot" @click="take_snapshot()" />
</form>
</body>
</html>
</section>
</template>
the error message in like belows:
runtime-core.esm-bundler.js:236 Uncaught TypeError: Cannot read properties of undefined (reading 'src') at func (webcam.js:840:13) at Object.snap (webcam.js:887:4) at Proxy.take_snapshot (add.vue:44:1) at _createElementVNode.onClick._cache.._cache. (add.vue:48:1) at callWithErrorHandling (runtime-core.esm-bundler.js:173:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21) at HTMLInputElement.invoker (runtime-dom.esm-bundler.js:345:9)