JSFiddle - React, Tailwind, and code Playground

Analytics example with data storage lib.

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.15/ai-sdk.js"></script>
<script src="https://sdk.morphcast.com/mph-data-storage/dev/mphdatastorage.js"></script>
<head>
  <title>MorphCast AI HTML5 SDK - Analytics example with data storage lib. (dev env)</title>
</head>

<body>
  <div><b>Data collection</b> (it stops automatically)</div>
  <div id="samples">Samples: -</div>
  <br />
  <div><b>Dimensions</b></div>
  <div id="age">Age group: -</div>
  <div id="gender">Gender: -</div>
  <div id="seconds">Video second: -</div>
  <br />
  <div><b>Attributes</b></div>
  <div id="attention">Attention: -</div>
  <div id="start_over">
    <span>CLICK TO START</span>
  </div>
  <!--div>
    <button id="eventsButton">Get uploaded events</button>
  </div>
  <p>Current savedData: <span id="dataCurrent"></span></p-->
</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

/// CONSTs

const MAX_TIME_SEC = 20000;
const VIDEO_NAME = 'video1';
const DEMO_NAME = "demo1";
const USER_NAME = "noUser";

const LICENSE_KEY = "9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b"; // alessandro.beltramin
const API_KEY = "kkkk";

const AGE_GROUPS = [30, 50]; // indexes: 0, 1, 2

window.globals = window.globals || {};
window.globals.__API_ENDPOINT__ =
  "https://54ad0beqcf.execute-api.eu-central-1.amazonaws.com/stage";

////////////////////////

const initSDK = new Promise((res) => {
  res(CY.loader()
  	.licenseKey('9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b')
    .addModule(CY.modules().FACE_AGE.name)
    .addModule(CY.modules().FACE_GENDER.name)
    .addModule(CY.modules().FACE_ATTENTION.name)
    .addModule(CY.modules().FACE_AROUSAL_VALENCE.name)
    .addModule(CY.modules().DATA_AGGREGATOR.name, {initialWaitMs: 2000, periodMs: 1000})
    .load());
});

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

startButton.onclick = () => {
  startButton.style.display = "none";
  initSDK.then(({
    start, stop
  }) => {
  	start();
    console.log(`Automatic stop after ${MAX_TIME_SEC} seconds`);
    setTimeout(stop, MAX_TIME_SEC);
  });
};

let ageGroup, gender;

window.addEventListener(CY.modules().FACE_AGE.eventName, (evt) => {
	if (ageGroup === undefined) {
  	ageGroup = mapAgeGroups(evt.detail.output.numericAge, AGE_GROUPS);
  	document.querySelector("#age").innerHTML = 'Age group (stored): ' + ageGroup;
  } 
});

window.addEventListener(CY.modules().FACE_GENDER.eventName, (evt) => {
	if (gender === undefined) {
  	gender = evt.detail.output.mostConfident;
    document.querySelector("#gender").innerHTML = 'Gender (stored): ' + gender;
  }
});

const session = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 8);
  
const getToken = () =>
  fetch(`${window.globals.__API_ENDPOINT__}/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      licenseKey: LICENSE_KEY,
...