94 lines
2.9 KiB
HTML
94 lines
2.9 KiB
HTML
<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> |