Filpfly FACE_COMPARE video mode part 2

DEPLOYED

by morphcast

HTML

<head>
  <title>MorphCast AI HTML5 SDK - Flipfly - SNIPPET COMPLETO PARTE 2 CONCORSO</title>
</head>

<body>
  <script src="https://ai-sdk.morphcast.com/v1.15/ai-sdk.js"></script>
  <video id="video1" muted playsinline></video>
  <div>
    <button id="toggle">Pause</button>
  </div><br />
  <div><b>SNIPPET COMPLETO - PARTE 2 - CONFRONTO IN SEDE CONCORSO.<br /><br />
  Results: <div id="results">-</div>
  </b><br /><br />
  Nota: il face compare viene lanciato ogni 10 secondi per la demo, poi si può portare a 4 minuti.<br />
  </div>
</body>

JavaScript 1.7

/*
 	Creates a pre-built camera source
*/
const cameraSource = CY.createSource.fromCamera({
  constraints: {
    audio: false,
    video: {
      width: {
        min: 600,
        max: 800
      }
    }
  },
  video: document.getElementById("video1")
});

// FOTO SALVATA DALLA PARTE 1
const faceToMatch = image_to_imagedata("https://demo.morphcast.com/identity/dr-house.jpg");

// mostra un esempio del frame di riferimento della PARTE 1
faceToMatch.then( (imageData) => {
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');
  ctx.canvas.width = imageData.width;
  ctx.canvas.height = imageData.height;
  ctx.putImageData(imageData, 0, 0);
});

CY.loader()
  .licenseKey('f2fddf1df7c30cac7908d10246256efd264ce7aa32ec') // key for flipfly
  .source(cameraSource)
  .addModule(CY.modules().FACE_DETECTOR.name)
  .addModule(CY.modules().FACE_COMPARE.name, {
    region: 'eu-central-1',
    identityPoolId: 'eu-central-1:43014775-ab54-47f5-ba4e-653a8666595d', // Unauth Identity for Adecco proj
    manualMode: true
	})
  .maxInputFrameSize(640)
  .load().then(({
    start,
    stop,
    terminate,
    getModule
  }) => {
    
    const COMPARE_PERIOD = 10000; // ogni 10 secondi per la demo, può essere portato a 4 minuti
    setInterval(async ()=>{
    	if(!cameraSource.stopped) {
  
        getModule(CY.modules().FACE_COMPARE.name).compare(lastFrameWithFace, faceToMatch).then((result)=>{
            document.getElementById("results").innerHTML = `${result} - timestamp : ${(Date.now())}`;
            lastFrameWithFace = undefined;
          });
      }
    }, COMPARE_PERIOD);
    
    const toggle = document.querySelector('#toggle');
    var playing = false;
    toggle.textContent = 'START SDK';
    toggle.onclick = function() {
      if (playing) {
        stop();
        playing = false;
        toggle.textContent = 'Resume';
      } else {
        start();
        playing = true;
       ...