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 - Custom source with cropped canvas example</title>
</head>
<body>
<canvas id="newCan"></canvas>
</body>

JavaScript

// Define here your crop region !
  Crop = {
    x:0,
    y:0,
    w:100,
    h:100
  };
  // Define here your crop region !

  const cropCanv = document.createElement('canvas');
  const cropCanvCtx = newCan.getContext('2d');
  const tmpCanvas = document.createElement('canvas');
  const tmpCtx = tmpCanvas.getContext('2d');

  function crop(ctx, x, y, w, h) {
    const imageData = ctx.getImageData(x, y, w, h);
    cropCanv.width = w - x;
    cropCanv.height = h - y;
    cropCanvCtx.putImageData(imageData, 0, 0);
    return cropCanvCtx.getImageData(0,0,cropCanv.width,cropCanv.height);
  }

  function toCanvasCtx(imageData) {
    tmpCanvas.width = imageData.width;
    tmpCanvas.height = imageData.height;
    tmpCtx.putImageData(imageData, 0, 0);
    return tmpCtx;
  }

  const camera = CY.getUserMediaCameraFactory()
  .createCamera();
  const customSource = {
    getFrame(...args) {
      const frameP = camera.getFrame(...args);
      return frameP.then((imageData) => crop(toCanvasCtx(imageData), Crop.x, Crop.y, Crop.w, Crop.h));
    },
    start() {
      return camera.start();
    },
    stop() {
      return camera.stop();
    },
    get stopped() {
      return camera.stopped;
    }
  };

  CY.loader()
    .source(customSource)
    .addModule(CY.modules().FACE_AGE.name)
    .load().then(({ start }) => {
    start();
  });
  
  window.addEventListener(CY.modules().CAMERA.eventName, (evt) => {
    const imageData = evt.detail;
    if (!dimLogged) {
      console.log(`Camera frame dimensions: w: ${imageData.width}, h: ${imageData.height}`);
      dimLogged = true;
    }
    ctx.canvas.width = imageData.width;
    ctx.canvas.height = imageData.height;
    ctx.putImageData(imageData, 0, 0);
  });