JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.min.js"></script>
<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>
<body>
  <div class="container-fluid">
    <div class="row">
       <input type="url" id="videoUrl" value="https://s3.eu-central-1.amazonaws.com/demo.morphcast.com/attention/claudia2.mp4" />
       <button onclick="setVideoSrc();">Start video</button><br />
       <video controls muted playsinline preload="auto" loop crossorigin="Anonymous" onclick="toggleVideo();" id="yt_player" width=320></video>
        <br /><strong>MorphCast JS SDK - Attention module (dev environment) -
        <i hidden>Selfie camera mode only</i></strong>
      <br />
      SDK attention (red)
      <br />
      <canvas id="chart_att" width="400" height="250"></canvas>
      <div class="col-md-4">
        <div id="results" style="word-wrap:break-word;font-size:40px"></div>
        <div id="results1" style="word-wrap:break-word;font-size:40px"></div>
        <div id="detector"></div>
      </div>
    </div>
    <div>
      <button id="start" onclick="onStart()" disabled>Start SDK</button>
      <button id="stop" onclick="onStop()">Stop</button>
      <p>
        <strong>Instructions</strong>
        Press the start button to start the detector.
        <br/> Press the stop button to end the detector.
      </p>
      <div>
        <strong>LOG:</strong>
      </div>
      <div id="logs"></div>
    </div>
  </div>
</body>

JavaScript

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var AlphaCalculator = /*#__PURE__*/function () {
  function AlphaCalculator(alphaAt10Fps) {
    if (!alphaAt10Fps || alphaAt10Fps < 0 || alphaAt10Fps > 1) {
      throw new TypeError('Bad or more arguments needed');
    }

    this._alphaAt10Fps = alphaAt10Fps;
    this._lastTimestampMs = null;
  }

  var _proto = AlphaCalculator.prototype;

  _proto.update = function update(timestampMs) {
    var intervalMs = timestampMs - this._lastTimestampMs;
    var res;

    if (this._lastTimestampMs === null || intervalMs >= AlphaCalculator.MAX_PERIOD_ALLOWED_MS) {
      res = 1.;
    } else if (intervalMs < 0 || isNaN(timestampMs)) {
      throw new TypeError('Missing or bad timestamp during push (not an integer or antecedent to the one stored). Stored timestamp: ' + this._lastTimestampMs + ', pushed: ' + timestampMs);
    } else {
      res = AlphaCalculator._computeAlpha(this._alphaAt10Fps, intervalMs);
    }

    this._lastTimestampMs = timestampMs;
    return res;
  }
  ;

  AlphaCalculator._computeAlpha = function _computeAlpha(alphaAt10Fps, periodMs) {
    var dt = periodMs / 1000.;
    var smoothnessAt10FPS = Math.pow(1 - alphaAt10Fps, 10);
    var smoothnessAtCurrentFrameRate = Math.pow(smoothnessAt10FPS, dt);
    return 1 - smoothnessAtCurrentFrameRate;
  };

  _createClass(AlphaCalculator, [{
    key: "alphaAt10Fps",
    get: function get() {
      return this._alphaAt10Fps;
    }
  }, {
    key: "lastTimestampMs",
    get: function...