decentralized-video-chat/public/chat.html

64 lines
1.6 KiB
HTML
Raw Normal View History

2020-03-22 05:23:46 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Decentralized Video Chat</title>
<link rel="shortcut icon" href="https://img.icons8.com/pastel-glyph/2x/worldwide-location.png">
2020-03-22 05:23:46 +08:00
<style>
body {
background: #ececec;
display: flex;
height: 100vh;
margin: 0;
align-items: center;
padding: 0 50px;
}
video {
background: white;
margin: 0 5%;
box-sizing: border-box;
border-radius: 10px;
padding: 0;
box-shadow:rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;
}
#local-video{
width:20%;
height: auto
}
#remote-video{
width:70%;
height: auto
}
div#logs p {
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 9px;
}
div#logs p.error {
color: red;
}
</style>
</head>
<body>
2020-03-22 05:50:35 +08:00
<!--<div>-->
<!-- <button id="get-video">Share Webcam</button>-->
<!-- <button id="get-screen">Share Screen</button>-->
<!-- <button id="call" disabled="disabled">Call</button>-->
<!-- <button id="will-call">Will Call</button>-->
<!--</div>-->
2020-03-22 05:23:46 +08:00
2020-03-23 01:55:36 +08:00
<video id="remote-video" height="500" autoplay ondblclick={this.requestFullscreen()}></video>
2020-03-22 05:23:46 +08:00
<video id="local-video" height="150" autoplay muted></video>
<!--<p>Log messages:</p>-->
<!--<div id="logs">-->
<!--</div>-->
2020-03-22 05:23:46 +08:00
<script src="/socket.io/socket.io.js"></script>
2020-03-24 11:20:28 +08:00
<script src="/chat.js"></script>
2020-03-22 05:23:46 +08:00
</body>
</html>