JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script></script>

JavaScript

<script>
class ScriptLoader{static loadScript(e,t=null){return new Promise((o=>{const a=document.createElement("script");a.type="text/javascript",a.readyState?a.onreadystatechange=function(){"loaded"!==a.readyState&&"complete"!==a.readyState||(a.onreadystatechange=null,o())}:a.onload=function(){o()},t&&a.setAttribute("data-config",t),a.src=e,document.getElementsByTagName("head")[0].appendChild(a)}))}}function downloadAiSDK(){return null==ScriptLoader.p&&(ScriptLoader.p=ScriptLoader.loadScript("https://sdk.morphcast.com/mphtools/v1.1/mphtools.js","cameraPrivacyPopup, compatibilityUI, compatibilityAutoCheck").then((()=>ScriptLoader.loadScript("https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"))).then((()=>CY))),ScriptLoader.p}downloadAiSDK().then((e=>{e.loader().licenseKey("").addModule(e.modules().FACE_AROUSAL_VALENCE.name,{smoothness:.7}).addModule(e.modules().FACE_ATTENTION.name,{smoothness:.83}).addModule(e.modules().DATA_AGGREGATOR.name,{initialWaitMs:2e3,periodMs:1e3}).load().then((({start:e,stop:t})=>e())),window.addEventListener(e.modules().EVENT_BARRIER.eventName,(e=>{console.log("EVENT_BARRIER result",e.detail)})),window.addEventListener(e.modules().DATA_AGGREGATOR.eventName,(e=>{console.log("DATA_AGGREGATOR result",e.detail)})),MphTools.CameraPrivacyPopup.setText({title:"Allow us to use your camera",description:"This experience is designed to be viewed with your camera on. The next screen will ask your consent to access data from your camera.",url:"https://YOUR_DOMAIN/<YOUR_PRIVACY_POLICY>"})}));
</script>