JSFiddle - React, Tailwind, and code Playground

by steveseguin

HTML

<html>

  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
  </head>

  <body onload="init();">
    <h1>Take a snapshot of the current video stream</h1>
    Click on the Start WebCam button first; may take a moment to load.
    <p>
      <button onclick="startWebcam();">Start WebCam</button>
      <button onclick="stopWebcam();">Stop WebCam</button>
      <button onclick="snapshot();">Take Snapshot and align face</button>
    </p>
    <video onclick="snapshot(this);" width=640 height=360 id="video" controls autoplay></video>

    <canvas id="myCanvas" width="640" height="360"></canvas>

  </body>
  <!-- Place your code in the script tag below. You can also use an external .js file -->
  <script>
    navigator.getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);

    var video;
    var webcamStream;

    function startWebcam() {
      if (navigator.getUserMedia) {
        navigator.getUserMedia(

          // constraints
          {
            video: {
              width: 640,
              height: 360
            },
            audio: false
          },

          // successCallback
          function(localMediaStream) {
            video = document.querySelector('video');
            video.srcObject = localMediaStream;
            webcamStream = localMediaStream;
          },

          // errorCallback
          function(err) {
            console.log("The following error occured: " + err);
          }
        );
      } else {
        console.log("getUserMedia not supported");
      }
    }

    function stopWebcam() {
      webcamStream.stop();
    }
    //---------------------
    // TAKE A SNAPSHOT CODE
    //---------------------
    var canvas, ctx;

    function init() {
      // Get the...