JSFiddle - React, Tailwind, and code Playground

Test example for WEBCAM_RECORDER v1.15

by morphcast

HTML

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

<body>
<script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/v1.15/plugin-webcam-recorder.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 style="color:red">NOTA SULLA PRIVACY: premendo START RECORDING, il video e l'audio provenienti dalla tua webcam verranno registrati e caricati in un bucket aws s3 creato per questa demo.</div>

<div><b>Results</b></div><br />
Event barrier: <div id="results">-</div>
</body>

JavaScript

CY.loader()
          .licenseKey('9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b')
          //.addModule(CY.modules().FACE_DETECTOR.name)
          .addModule(CY.modules().ALARM_NO_FACE.name, {
            timeWindowMs: 10000,
            initialToleranceMs: 7000,
            threshold: 0.75
          })
          .addModule(CY.modules().ALARM_LOW_ATTENTION.name, {
            timeWindowMs: 5000,
            initialToleranceMs: 7000,
            threshold: 0.33
          })
          .addModule(CY.modules().ALARM_MORE_FACES.name, {
            timeWindowMs: 3000,
            initialToleranceMs: 7000,
            threshold: 0.33
          })
          .addModule(CY.modules().WEBCAM_RECORDER.name, {
            bucketName: 'ext-adecco',
            bucketRegion: 'eu-central-1',
            identityPoolId: 'eu-central-1:43014775-ab54-47f5-ba4e-653a8666595d',
            chunkLength: 10000
          })
          .maxInputFrameSize(640)
          .load().then(({
                          start,
                          stop,
                          terminate,
                          getModule
                        }) => {

    const toggle = document.querySelector('#toggle');
    var playing = false;
    toggle.textContent = 'Play';
    toggle.onclick = function() {
      if (playing) {
        stop();
        playing = false;
        toggle.textContent = 'Play';
      } else {
        start().then(()=>{
          // command to face_compare module to start the auth flow
          //getModule(CY.modules().FACE_COMPARE.name).startAuthFlow();
        });
        playing = true;
        toggle.textContent = 'Pause';
      }
    };
    setTimeout(() => {
      stop();
      terminate();
      console.log('terminated');
      alert('TERMINATED');
    }, 200000);
  }).catch((err) => {
    console.error(err);
  });

  const ctx = document.getElementById('canvas').getContext('2d');
  let dimLogged = false;
  window.addEventListener(CY.modules().CAMERA.eventName, (evt)...