JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<head>
   <meta name="mphtools-feature" content="compatibilityUI, cameraPrivacyPopup, compatibilityAutoCheck">
</head>
<body>
<div id='result'></div>
<script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/v1.15/ai-sdk.js"></script>
<script>
CY.loader()
  .licenseKey("9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b") // alessandro
  .addModule(CY.modules().FACE_DETECTOR.name, {throttleChangeMs: 1000})
  .load()
  .then(({ start, stop }) => start());


window.addEventListener(CY.modules().FACE_DETECTOR.eventName, (evt) => {
  if(evt.detail.totalFacesChangedFrom !== undefined) {
  	document.getElementById('result').innerHTML = 'Face ' + (!!evt.detail.totalFaces ? 'detected' : 'NOT detected');
    console.log('Number of faces changed. Was: ' + evt.detail.totalFacesChangedFrom + ' . Now is: ' + evt.detail.totalFaces);
  } else {
  	document.getElementById('result').innerHTML = 'Face ' + (!!evt.detail.totalFaces ? 'detected' : 'NOT detected');
  }
});
</script>
</body>