JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.4.0/ai-sdk.js"></script>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<body>
  <strong>Morphcast Videochat</strong>
  <div id="emotion_results" style="word-wrap:break-word;">    </div>
  <div>
    <button id="start" onclick="onStart()" disabled>Start</button>
    <button id="stop" onclick="onStop()">Stop</button>
  </div>
  <div id="placeholder-div"></div>
</body>

JavaScript

window.___gcfg = {
      lang: 'en-US'
    };
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=renderButtons';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

    function renderButtons(){
      gapi.hangout.render('placeholder-div', {
          'render': 'createhangout',
        });
    }

// replace these values with those generated in your TokBox Account
var apiKey = "46202302";
var sessionId = "2_MX40NjIwMjMwMn5-MTUzOTI4NTUwMTM3NX40SUIyK3R1N3d0cEdUMXN5TUtpZzNFd3J-fg";
var token = "T1==cGFydG5lcl9pZD00NjIwMjMwMiZzaWc9NDQyOTZmNTU0NzAzYzMzYzhhYWFiNWIyMjdmYjdlMzE4ODlkMWYzNDpzZXNzaW9uX2lkPTJfTVg0ME5qSXdNak13TW41LU1UVXpPVEk0TlRVd01UTTNOWDQwU1VJeUszUjFOM2QwY0VkVU1YTjVUVXRwWnpORmQzSi1mZyZjcmVhdGVfdGltZT0xNTM5Mjg1NTUyJm5vbmNlPTAuOTQ4MTQwNDA4MjkxMzUxOCZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTQxODgxMTQ5JmluaXRpYWxfbGF5b3V0X2NsYXNzX2xpc3Q9";


var session = OT.initSession(apiKey, sessionId);
var connection = session.connect(token, function(error) {
   if (error) {
     console.log(error.message);
   } else {
		 
   }
 });

var detector = {};
// Handling all of our errors here by alerting them
function handleError(error) {
  if (error) {
    alert(error.message);
  }
}

function print(node, msg) {
  document.getElementById(node).innerHTML = msg;
}

function getArgMaxKey(dict) {
	return Object.keys(dict).reduce((a, b) => dict[a] > dict[b] ? a : b)
} 

//function executes when Start button is pushed.
function onStart() {
  if (detector && !detector.isRunning) {
    detector.isRunning = true;
    document.getElementById("start").disabled = true;
    detector.start();
   }
}

//function executes when the Stop button is pushed.
function onStop() {
  if (detector && detector.isRunning) {
    detector.stop();
    document.getElementById("start").disabled = false;
    detector.isRunning = false;
 ...