mediasoup/public/index.html

102 lines
3.4 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">
<table>
<thead>
<th>Local Video</th>
<th>Remote Video</th>
</thead>
<tbody>
<tr>
<td>
<div id="sharedBtns">
<video id="localVideo" autoplay class="video" ></video>
</div>
</td>
<td>
<div id="sharedBtns">
<video id="remoteVideo" autoplay class="video" ></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>
</div>
</td>
</tr>
<!-- <tr>
<td colspan="2">
<div id="sharedBtns">
<button id="btnRtpCapabilities">2. Get Rtp Capabilities</button>
<br />
<button id="btnDevice">3. Create Device</button>
</div>
</td>
</tr>
<tr>
<td>
<div id="sharedBtns">
<button id="btnCreateSendTransport">4. Create Send Transport</button>
<br />
<button id="btnConnectSendTransport">5. Connect Send Transport & Produce</button></td>
</div>
<td>
<div id="sharedBtns">
<button id="btnRecvSendTransport">6. Create Recv Transport</button>
<br />
<button id="btnConnectRecvTransport">7. Connect Recv Transport & Consume</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>