JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>

<head>
  <meta charset="UTF-8">
  <title>MorphCast SDK - Photo as an input example</title>
</head>
<body>
See source code of this HTML page.
<img id='pic' width=640 />
</body>

JavaScript

let imgUrl = "https://upload.wikimedia.org/wikipedia/commons/3/36/Tim_Roth_by_Gage_Skidmore_2.jpg";

  const customSource = {
    getFrame(...args) {
      return Promise.resolve(getImageData(imgUrl));
    },
    start() {
    },
    stop() {
    },
    get stopped() {
    }
  };

  CY.loader()
    .addModule(CY.modules().FACE_DETECTOR.name)
    .addModule(CY.modules().FACE_EMOTION.name)
    .source(customSource)
    .load().then(({ start, stop }) => {
    setTimeout(stop, 2000);
    start();
  }).catch((err) => {
    console.error(err);
  });

  window.addEventListener(CY.modules().FACE_EMOTION.eventName, (evt) => {
    console.log(CY.modules().FACE_EMOTION.eventName, evt.detail);
  });

  function getImageData(imgUrl) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        const res = () => context.getImageData(0, 0, img.width, img.height);
        resolve(res);
      };
      img.onerror = (err) => reject(err);
      img.src = imgUrl;
    });
  }