Flipfly webcam recorder example

DEPLOYED

by morphcast

HTML

<head>
  <title>MorphCast AI HTML5 SDK - Flipfly - Webcam recorder - demo example</title>
</head>

<body>
  <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>
  <div><b>DEMO per testare il modulo WEBCAM_RECORDER (in modalità autenticata).</b></div><br />
  <video id="video1" muted playsinline></video>
  <div>
    <button id="toggle">Pause</button>
  <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><br />
  uploadProgress event: <div id="results">-</div><br />
  <div>
    Nota: l'attributo <i>bandwidth</i> apparirà dopo alcuni secondi (circa 20) di registrazione
  </div>
</body>

JavaScript 1.7

// IL TOKEN DOVRA' ESSERE VALIDATO DAL BACKEND DI FLIPFLY, RISPETTO ALLO USER ID E GROUP ID FORNITI
const authData = { userId: "ID000001", groupId: "C00001", token: "token" };
auth(authData).then(({ identityId, token })=>{
	initSDK({authData, identityId, identityToken: token})
});


async function auth(authData) {
  const resp = await fetch("https://e1xp9nqq48.execute-api.eu-central-1.amazonaws.com/latest/auth", {
    method:"POST",
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      authData,
      identityPool: 'eu-central-1:bddbbe28-06e2-4e41-a834-ce5ed1003ab4' // identityPool assegnato a flipfly
    }) 
  });
  return resp.json();
}
/*
	Init and start of the SDK in the authenticated mode
*/
function initSDK({authData, identityId, identityToken}) {
  /*
    Creates a pre-built camera source
  */
  const cameraSource = CY.createSource.fromCamera({
    constraints: {
      audio: false,
      video: true,/*{
        width: {
          min: 200,
          max: 320
        }
      }*/
    },
    video: document.getElementById("video1")
  });

  CY.loader()
    .licenseKey('f2fddf1df7c30cac7908d10246256efd264ce7aa32ec') // key for flipfly
    .source(cameraSource)
    //.addModule(CY.modules().FACE_DETECTOR.name)
    .addModule(CY.modules().WEBCAM_RECORDER.name, {
      bucketName: 'ext-adecco',
      bucketRegion: 'eu-central-1',
      identityId, // configurazione necessaria nella modalità con autenticazione
      identityToken, // configurazione necessaria nella modalità con autenticazione
      savePath: `${authData.groupId}/${authData.userId}/`, // configurazione necessaria nella modalità con autenticazione
      chunkLength: 10000
    })
    .maxInputFrameSize(640)
    .load().then(({
      start,
      stop,
      terminate,
      getModule
    }) => {

      const toggle = document.querySelector('#toggle');
      var playing = false;
      toggle.textContent = 'START RECORDING';
      toggle.onclick = function()...