jitsi-stream-client/index.html

87 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="libs/jquery-2.1.1.min.js"></script>
<script src="libs/strophe/strophe.js"></script>
<script src="libs/strophe/strophe.disco.min.js?v=1"></script>
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script src="libs/lib-jitsi-meet.min.js"></script>
<script src="script.js" ></script>
<style type="text/css">
body {
padding: 6px;
background-color: black;
color: #eeeeee;
}
input, button, select {
background-color: #111111;
color: #eeeeee;
border: 1px solid grey;
}
video {
display: block;
margin: 3px;
border: 1px dotted grey;
}
.video-row {
width: 100%;
}
.volume-slider {
text-align: center;
}
.container-fluid {
padding: 0;
}
.col-md-4 {
padding: 0 !important;
margin: 0 !important;
}
.row {
padding: 0 !important;
margin: 0 !important;
}
.video {
text-align: center;
overflow: hidden;
}
.volume {
display: inline-block;
margin-right: 10px;
width: 50px;
}
.name {
display: inline-block;
height: 24px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="room-selector">
<form onsubmit="connect(event)">
<input type="text" id="room-name" placeholder="Room name"/><br />
<input type="text" id="room-password" placeholder="Room Password" /><br />
<input type="checkbox" id="use-local-video" /> Use local Video<br />
<input type="text" id="cols" value="3" /> Column count<br />
<input type="text" id="rows" value="3" /> Row count<br />
<button disabled id="room-name-button">Connect</button>
</form>
</div>
<div style="display: none" id="room">
<div class="container-fluid" id="video-container">
</div>
<button onclick="toggleMute()">Toggle all mute</button>
Currently: <span id="muted-status">Unmuted</span>
</div>
<div id="audioOutputSelectWrapper" style="display: none;">
Change audio output device
<select id="audioOutputSelect" onchange="changeAudioOutput(this)"></select>
</div>
<video autoplay='autoplay' id="localVideo"></video>
</body>
</html>