Swdweb demo example

DEPLOYED

by morphcast

HTML

<head>
  <title>MorphCast AI HTML5 SDK - Swdweb demo example</title>
  <meta name="mphtools-feature" content="compatibilityUI, compatibilityAutoCheck">
</head>

<body>
  <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>
  <canvas id="canvas"></canvas>
  <div>
    <button id="toggle">Pause</button>
  </div>
  <div><b>Results</b></div><br />
  Face compare: <div id="toast">-</div><br />
</body>

JavaScript

let tentativi = 0;


const faceToMatch = image_to_imagedata("https://ordineprofessionisanitariebellunotrevisovicenza.it/servizionline2/convertpdf.php?pdf=https://ordineprofessionisanitariebellunotrevisovicenza.it/servizionline2/uploads/foto-ele-7.jpg");

CY.loader()
  .licenseKey('534d27b8485cf4cfe2677a2780cd500f2ee4be244f34')
  .maxInputFrameSize(640)
  .addModule(CY.modules().FACE_COMPARE.name, {
    region: 'eu-central-1',
    identityPoolId: 'eu-central-1:8c27ebbc-a5ac-4e48-bd65-d18e1bc7c55c'
  })
  .load().then(({
    start,
    stop,
    terminate,
    getModule
  }) => {

    const toggle = document.querySelector('#toggle');
    var playing = false;
    toggle.textContent = 'START FACE COMPARE';
    toggle.onclick = function() {
      if (playing) {
        stop();
        playing = false;
        toggle.textContent = 'Resume';
      } else {
        start().then(() => {
          // command to face_compare module to start the auth flow
          getModule(CY.modules().FACE_COMPARE.name).startAuthFlow({
            faceToMatch
          });
        });
        playing = true;
        toggle.textContent = 'Pause';
      }
    };

    window.addEventListener(CY.modules().FACE_COMPARE.eventName, (evt) => {
      const face_compare_result = evt.detail.output.result;
      if (face_compare_result == "OK") {
        stop();
      }

      const x = document.getElementById('toast');
      tentativi = tentativi + 1;
      x.innerHTML = 'FaceID tentativo #' + tentativi + ': ' + face_compare_result;

      console.log('Face compare result', face_compare_result);
    });

  }).catch((err) => {
    console.error(err);
  });

const ctx = document.getElementById('canvas').getContext('2d');
let dimLogged = false;
window.addEventListener(CY.modules().CAMERA.eventName, (evt) => {
  const imageData = evt.detail;
  if (!dimLogged) {
    console.log(`Camera dimensions: w: ${imageData.width}, h: ${imageData.height}`);
    dimLogged = true;
  }
  ctx.canvas.width =...