<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>