JSFiddle - React, Tailwind, and code Playground

Test example for WEBCAM_RECORDER v1.15 without SDK start

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>
<video id="video1" muted playsinline></video>
<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 />
WEBCAM RECORDER Event: <div id="results">-</div>
</body>

JavaScript

const showVideoPreview = (video, mediaStream) => {
  return new Promise((resolve, reject) => {
    video.onloadedmetadata = () => {
      video.play();
    };
    video.onloadeddata = () => {
      if (mediaStream === null) {
        const err = new Error('The camera.start() request was interrupted by a call to stop()');
        err.name = PLAY_INTERRUPTED_BY_STOP;
        reject(err);
      } else {
        resolve(mediaStream);
      }
    };
    video.onerror = reject;
    video.srcObject = mediaStream;
  });
};


const constraints = {
  audio: false,
  video: {
    width: {
      max: 320,
      min: 200
    }
  }
};

CY.loader()
  .licenseKey('9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b')
  .addModule(CY.modules().WEBCAM_RECORDER.name, {
    bucketName: 'ext-adecco',
    bucketRegion: 'eu-central-1',
    identityPoolId: 'eu-central-1:43014775-ab54-47f5-ba4e-653a8666595d',
    chunkLength: 10000,
    constraints
  })
  .maxInputFrameSize(640)
  .load().then(({
    getModule
  }) => {
    const toggle = document.querySelector('#toggle');
    var playing = false;
    toggle.textContent = 'Play';
    toggle.onclick = function() {
      if (playing) {
        getModule(CY.modules().WEBCAM_RECORDER.name).stop();
        playing = false;
        toggle.textContent = 'Play';
      } else {
        getModule(CY.modules().WEBCAM_RECORDER.name).init().then(() => {
          const videoElement = document.getElementById('video1');
          const stream = getModule(CY.modules().WEBCAM_RECORDER.name)._stream;
          showVideoPreview(videoElement, stream);
        });
        playing = true;
        toggle.textContent = 'Pause';
      }
    };
  }).catch((err) => {
    console.error(err);
  });





window.addEventListener(CY.modules().WEBCAM_RECORDER.eventName, (evt) => {
  console.log(CY.modules().WEBCAM_RECORDER.eventName, "uploadProgress", evt.detail.uploadProgress);
  document.getElementById('results').innerHTML = JSON.stringify(evt.detail.uploadProgress);
});