example.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.0.3/adapter.min.js" ></script>
<style>
.videoscreen {
margin:5px;border:1px solid grey;height:300px;width:300px;display:inline-block;vertical-align:top;
}
</style>
<div>Username : <span id="username"></span></div>
<button type="button" id="register">Join</button>
<button type="button" id="stop">Quit</button>
<button type="button" id="sharescreen">Share screen</button>
<button type="button" id="stopsharescreen">Stop share screen</button>
<button type="button" id="startrecording">Start recording</button>
<button type="button" id="stoprecording">Stop recording</button>
<hr>
<div>
<div style="width:500px;">
  <div id="volume-meter-0" style="height:5px;width:50%;background-color:green;"></div>
</div>
<div class="videoscreen" id="videolocal">videolocal</div>
<div class="videoscreen" id="videoremote1">videoremote1</div>
<div class="videoscreen" id="videoremote2">videoremote2</div>
<div class="videoscreen" id="videoremote3">videoremote3</div>
<div class="videoscreen" id="videoremote4">videoremote4</div>
</div>
<hr>
<h1>Recorded list</h1>
<div class="videoscreen" id="videoplayback">videolocal</div>
<br><button type="button" id="getrecordedlist">Get recorded list</button>
<div id="recordedlist"></div>
<hr>
<h1>Chat</h1>
<div id="chatbox"></div>
<input id="chatinput"/><button id="chatsend">Send</button>

<script type="text/javascript" src="bundle.js" ></script>