JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.15/ai-sdk.js"></script>
<video id="video1" muted playsinline></video>
<canvas id="canvas1"></canvas>

JavaScript

/*
 	Creates a pre-built camera source
*/
const cameraSource = CY.createSource.fromCamera({
  constraints: {
    audio: false,
    video: {
      width: 1280,
      height: 720
    }
  },
  video: document.getElementById("video1")
});


/*
 	Wraps the camera source above
*/
const customSource = {
  
  async getFrame(...args) {
    const imageData = await cameraSource.getFrame(...args);
    const canvas1 = document.getElementById("canvas1");
    const ctx = canvas1.getContext('2d');
    ctx.putImageData(imageData, 0, 0);

    return imageData;
  },
  start() {
    return cameraSource.start();
  },
  stop() {
    return cameraSource.stop();
  },
  get stopped() {
    return cameraSource.stopped;
  }
};

CY.loader()
  .licenseKey("f2fddf1df7c30cac7908d10246256efd264ce7aa32ec") //  key for flipfly adecco proj
	.addModule(CY.modules().FACE_DETECTOR.name, {})
  .source(customSource)
  .load().then(({
    start,
    stop
  }) => {
    start();
  }).catch((err) => {
    console.error(err);
  });
  
  window.addEventListener(CY.modules().FACE_DETECTOR.eventName, (evt) => {
  console.log('Face detector result', evt.detail);
});