JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>EasyRTC Demo: Simple Audio and Video Chat</title>
    <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
 
    <!-- Assumes global locations for socket.io.js and easyrtc.js -->
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
    <script type="text/javascript" src="js/demo_audio_video_simple.js"></script>
 
  </head>
  <body onload="connect();">
        <div id="demoContainer">
          <div id="connectControls">
            <div id="iam">Not yet connected...</div>
            <br />
            <strong>Connected users:</strong>
            <div id="otherClients"></div>
          </div>
          <div id="videos">
            <video autoplay="autoplay" class="easyrtcMirror" id="selfVideo" muted="muted" volume="0" ></video>
            <div style="position:relative;float:left;">
            <video autoplay="autoplay" id="callerVideo"></video>
            </div>
            <!-- each caller video needs to be in it"s own div so it"s close button can be positioned correctly -->
          </div>
        </div>
  </body>
</html>

CSS

#demoContainer {
  position:relative;
}
#connectControls {
  float:left;
  width:250px;
  text-align:center;
  border: 2px solid black;
}
#otherClients {
  height:200px;
  overflow-y:scroll;
}
#selfVideo {
  height:225px;
  width:300px;
  float:left;
  border:1px solid gray;
  margin-left:10px;
}
 
#callerVideo {
  height:225px;
  width:300px;
  border:1px solid gray;
  margin-left:10px;
}

JavaScript

var selfEasyrtcid = "";
 
 
function connect() {
  easyrtc.setRoomOccupantListener(convertListToButtons);
  easyrtc.easyApp("easyrtc.audioVideo", "selfVideo", ["callerVideo"], loginSuccess, loginFailure);
 }
 
 
function clearConnectList() {
  var otherClientDiv = document.getElementById("otherClients");
  while (otherClientDiv.hasChildNodes()) {
    otherClientDiv.removeChild(otherClientDiv.lastChild);
  }
}
 
 
function convertListToButtons (roomName, data, isPrimary) {
  clearConnectList();
  var otherClientDiv = document.getElementById("otherClients");
  for(var easyrtcid in data) {
    var button = document.createElement("button");
    button.onclick = function(easyrtcid) {
      return function() {
        performCall(easyrtcid);
      };
    }(easyrtcid);
 
    var label = document.createTextNode(easyrtc.idToName(easyrtcid));
    button.appendChild(label);
    otherClientDiv.appendChild(button);
  }
}
 
 
function performCall(otherEasyrtcid) {
  easyrtc.hangupAll();
 
  var successCB = function() {};
  var failureCB = function() {};
  easyrtc.call(otherEasyrtcid, successCB, failureCB);
}
 
 
function loginSuccess(easyrtcid) {
  selfEasyrtcid = easyrtcid;
  document.getElementById("iam").innerHTML = "I am " + easyrtc.cleanId(easyrtcid);
}
 
 
function loginFailure(errorCode, message) {
  easyrtc.showError(errorCode, message);
}