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 playsinline></video-->
<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('id', 'camera');
//video.id= "camera";
//video.muted = true;
//video.playsinline = true;
//video.setAttribute('muted', '');
//video.setAttribute('playsinline', '');
//const video = document.getElementById('camera');
/*video.style.position = 'absolute';
video.style.width = '0';
video.style.height = '0';*/
//document.body.appendChild(video);
//document.body.insertBefore(video, document.getElementById("age"));
//const video = document.getElementById('camera');
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()
...