youverse-webcam-component
Version:
This web component is designed to manage selfie photos while incorporating facial detection capabilities.
64 lines (53 loc) • 1.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Youverse Webcam</title>
<script src="../js/dist/youverse-webcam.min.js"></script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div>
<youverse-webcam
license="Your.Jwt.License"
cancel-verification="true"
change-camera="true"
locale="en"
/>
</div>
</body>
<script>
const EVENT_TYPES = {
YV_SELFIE_NEXT_STEP: "YV_SELFIE_NEXT_STEP",
YV_SELFIE_RESPONSE_NEXT_STEP: "YV_SELFIE_RESPONSE_NEXT_STEP",
YV_SELFIE_CANCEL: "YV_SELFIE_CANCEL",
YV_SELFIE_RESPONSE_CANCEL: "YV_SELFIE_RESPONSE_CANCEL",
};
function createResponseEvent(responseMessage, eventType) {
return new CustomEvent(eventType, {
detail: responseMessage,
});
}
document.addEventListener(EVENT_TYPES.YV_SELFIE_NEXT_STEP, async function (event) {
console.log(event.detail);
//Interact with a web component
setTimeout(() => {
document.dispatchEvent(
new CustomEvent(EVENT_TYPES.YV_SELFIE_RESPONSE_NEXT_STEP)
);
}, 5000);
});
document.addEventListener(EVENT_TYPES.YV_SELFIE_CANCEL, function (event) {
console.log("Canceled");
//Interact with a web component
document.dispatchEvent(
new CustomEvent(EVENT_TYPES.YV_SELFIE_RESPONSE_CANCEL)
);
});
</script>
</html>