<html>
<head>
<style>
tr {
vertical-align: top;
}
.video {
width: 360px;
background-color: black;
margin: 2px 0;
}
button {
margin: 2;
}
#sharedBtns {
padding: 5;
background-color: papayawhip;
display: flex;
justify-content: center;
}
#closeCallBtn {
padding: 5;
background-color: papayawhip;
display: flex;
justify-content: center;
width: 736px;
}
</style>
</head>
<body>
<body>
<div id="video">
<legend>Client options:</legend>
<input type="checkbox" id="produceAudio" name="produceAudio">
<label for="produceAudio">Produce audio</label><br>
<table>
<thead>
<th>Local Video</th>
<th>Remote Video</th>
</thead>
<tbody>
<tr>
<td>
<div id="sharedBtns">
<video
id="localVideo"
class="video"
autoplay
muted
playsinline
></video>
</div>
</td>
<td>
<div id="sharedBtns">
<video
id="remoteVideo"
class="video"
autoplay
muted
playsinline
></video>
</div>
</td>
</tr>
<tr>
<td>
<div id="sharedBtns">
<button id="btnLocalVideo">Publish</button>
</div>
</td>
<td>
<div id="sharedBtns">
<button id="btnRecvSendTransport">Consume</button>
<button id="remoteSoundControl">Unmute</button>
</div>
</td>
</tr>
</tbody>
</table>
<div id="closeCallBtn">
<button id="btnCloseCall" disabled>Close Call</button>
</div>
</div>
</body>
</body>
<footer>
<script src="bundle.js"></script>
</footer>
</html>