JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<html>
<head></head>
<body>
<script src="https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"></script>
<script>
 
  var rF = e => e;
  var stopped = true;

  const customSource = {
    // The getFrame methods must return a promise resolved with the ImageData of the currentFrame.
    // It currently retrieves the frame from the Native App throught the resolveFrame function encoded in Base64
    // maxSize = Max size in px of the larger side of the frame. You should scale the image yourself before resolving it (optional).
 
    getFrame(maxSize) {
      return new Promise((resolve) => {
        rF = resolve;
        
        //window.webkit.messageHandlers.camera.postMessage({value: maxSize});
      });
    },
    // resume the camera stream
    start() {
      stopped = false;
      /* (..can be empty..) */
    },
    // stop the camera stream
    stop() {
      stopped = true;
      /* (..can be empty..) */
    },
    // return the status of the camera Stream.
    get stopped() {
      return stopped;
    }
  }
 
  const age_config = {
    windowSizeMs: 4000,
    maxVarianceCutoff: Math.pow(7, 2),
    numericalStability: 1,
    rawOutput: false,
    backendOrder: "webassembly"
  };
 
  const gender_config = {
    smoothness : 0.95,
    backendOrder: "webassembly",
    threshold: 0.50
  };


let ccc = 0;
  window.addEventListener(CY.modules().EVENT_BARRIER.eventName, (evt) => {
    console.log(CY.modules().EVENT_BARRIER.eventName, evt.detail);
    console.log(JSON.stringify(evt.detail));
    ccc += 1;
    if (ccc > 50) {
    	return;
    }
   ...