JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<html>
<head>
  <title>MorphCast AI HTML5 SDK - Base example</title>
  <meta name="mphtools-feature" content="">
</head>
<body>
  <div><b>Results</b></div>
  <video id="camera" muted></video>
  <canvas id="canvas"></canvas>
  <div id="age">Age: -</div>
  <div id="gender">Gender: -</div>
  <div id="emotion">Emotion: -</div>
  <div id="errors">Errors: </div>
  <div id="warn">Warns: </div>
  <div id="logs">Logs: </div>
  <script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"></script>
<script>
/*
const _video = document.createElement('video');
_video.setAttribute('muted', '');
    _video.style.position = 'absolute';
    _video.style.width = '0';
    _video.style.height = '0';*/
    
const video = document.getElementById('camera');
video.setAttribute('playsinline', '');
//video.style.position = 'absolute';
//video.style.width = '0';
//video.style.height = '0';


const age_div = document.querySelector("#age");
const gen_div = document.querySelector("#gender");
const emo_div = document.querySelector("#emotion");

const err_div = document.querySelector("#errors");
const warn_div = document.querySelector("#warn");
const log_div = document.querySelector("#logs");

console.defaultLog = console.log.bind(console);
console.log = function(){
    // default &  console.log()
    console.defaultLog.apply(console, arguments);
    // new & array data
    pushLog(JSON.stringify(Array.from(arguments)));
}

console.defaultError = console.error.bind(console);
console.error = function(){
    // default &  console.error()
    console.defaultError.apply(console, arguments);
    pushError(JSON.stringify(Array.from(arguments)));
}


console.defaultWarn = console.warn.bind(console);
console.warns = [];
console.warn = function(){
    // default &  console.warn()
    console.defaultWarn.apply(console, arguments);
    // new & array data
   ...