JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>
<head>
  <title>MorphCast AI HTML5 SDK - Dev environment</title>
</head>

<body>
  <div><b>Alarm modules - Results</b></div>
  <div id="alarm1">-</div>
  <div id="alarm2">-</div>
  <div id="alarm3">-</div>
  <div id="start_over">
    <span>CLICK TO START</span>
  </div>
</body>

CSS

#start_over {
  position: absolute;
  background-color: #7F8C8D;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  cursor: pointer;
}

#start_over span {
  position: absolute;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  display: block;
  height: 20px;
  margin: auto;
  text-align: center;
}

JavaScript

// Complete code documentation of MorphCast AI SDK, here:
// https://ai-sdk.morphcast.com/latest/index.html

const initSDK = new Promise((res) => {
  res(CY.loader()
    .addModule(CY.modules().ALARM_NO_FACE.name, {timeWindow: 15000})
    .addModule(CY.modules().ALARM_LOW_ATTENTION.name, {})
    .addModule(CY.modules().ALARM_MORE_FACES.name, {})
    .load());
});

const startButton = document.querySelector("#start_over");

startButton.onclick = () => {
  startButton.style.display = "none";
  initSDK.then(({
    start
  }) => start());
};

const a1_div = document.querySelector("#alarm1");
const a2_div = document.querySelector("#alarm2");
const a3_div = document.querySelector("#alarm3");

window.addEventListener(CY.modules().ALARM_LOW_ATTENTION.eventName, (evt) => {
  a1_div.innerHTML = 'Alarm low attention: ' + evt.detail.output.lowAttention;
});

window.addEventListener(CY.modules().ALARM_MORE_FACES.eventName, (evt) => {
  a2_div.innerHTML = 'Alarm more faces: ' + evt.detail.output.moreFaces;
});

window.addEventListener(CY.modules().ALARM_NO_FACE.eventName, (evt) => {
  a3_div.innerHTML = 'Alarm no face: ' + evt.detail.output.noFace;
});