Improve front-end
Mathieu Dombrock
parent
9cb092d74e
commit
bf45e41b49
|
|
@ -6,15 +6,78 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<video id="localVideo" autoplay muted style="width:40%;"></video>
|
||||
<video id="remoteVideo" autoplay style="width:40%;"></video>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="button" id="start" onclick="start(true)" value="Start Video"></input>
|
||||
|
||||
<div class="video-wrapper">
|
||||
<video id="localVideo" class="video rnd" autoplay muted></video>
|
||||
<video id="remoteVideo" class="video rnd" autoplay></video>
|
||||
<div class="label">You</div>
|
||||
<div class="label">Remote</div>
|
||||
</div>
|
||||
<div class="btn-wrap">
|
||||
<input type="button" id="start" onclick="start(true)" value="Connect"></input>
|
||||
</div>
|
||||
<div id="statusWrap" class="status-wrap" style="visibility: hidden">
|
||||
Status: <span id="status">Page Loaded</span>
|
||||
</div>
|
||||
<br>
|
||||
<div id="uuid">...</div>
|
||||
<script type="text/javascript">
|
||||
pageReady();
|
||||
</script>
|
||||
<style>
|
||||
:root{
|
||||
--accent: rgb(25,55,155);
|
||||
--accent2: rgb(35,75,200);
|
||||
}
|
||||
html{
|
||||
background: rgb(45,45,45);
|
||||
color: white;
|
||||
font-family: Tahoma, Verdana, Segoe, sans-serif;
|
||||
}
|
||||
body{
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
input[type="button"] {
|
||||
padding: 1rem;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
input[type="button"]:hover{
|
||||
background: var(--accent2);
|
||||
}
|
||||
.rnd{
|
||||
border-radius:0.5rem;
|
||||
}
|
||||
.video-wrapper{
|
||||
background: rgb(22,22,22);
|
||||
padding: 1rem;
|
||||
padding-top:2rem;
|
||||
text-align:center;
|
||||
margin-top:2rem;
|
||||
}
|
||||
.video{
|
||||
width:480px;
|
||||
height:360px;
|
||||
background: var(--accent2);
|
||||
}
|
||||
.label{
|
||||
display: inline-block;
|
||||
width:480px;
|
||||
height:2rem;
|
||||
}
|
||||
.btn-wrap{
|
||||
text-align:right;
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.status-wrap{
|
||||
background: rgb(22,22,22);
|
||||
padding: 0.5rem;
|
||||
height:4.5rem;
|
||||
resize: vertical;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
|
||||
let _s = {
|
||||
localVideo: undefined,
|
||||
localStream: undefined,
|
||||
remoteVideo: undefined,
|
||||
peerConnection: undefined,
|
||||
uuid: undefined,
|
||||
serverConnection: undefined
|
||||
serverConnection: undefined,
|
||||
statusLog: ''
|
||||
};
|
||||
|
||||
const peerConnectionConfig = {
|
||||
|
|
@ -16,7 +16,10 @@ const peerConnectionConfig = {
|
|||
};
|
||||
|
||||
function pageReady() {
|
||||
showStatus(true);
|
||||
setStatus('Page Ready');
|
||||
_s.uuid = createUUID();
|
||||
document.getElementById('uuid').innerHTML = 'UUID: '+_s.uuid;
|
||||
|
||||
_s.localVideo = document.getElementById('localVideo');
|
||||
_s.remoteVideo = document.getElementById('remoteVideo');
|
||||
|
|
@ -36,12 +39,22 @@ function pageReady() {
|
|||
}
|
||||
}
|
||||
|
||||
function showStatus(show=true){
|
||||
document.getElementById('statusWrap').style.visibility = show ? "visible" : "hidden";
|
||||
}
|
||||
|
||||
function setStatus(msg){
|
||||
_s.statusLog = msg + '<br><br>' + _s.statusLog;
|
||||
document.getElementById('status').innerHTML = _s.statusLog;
|
||||
}
|
||||
|
||||
function getUserMediaSuccess(stream) {
|
||||
_s.localStream = stream;
|
||||
_s.localVideo.srcObject = stream;
|
||||
}
|
||||
|
||||
function start(isCaller) {
|
||||
setStatus('Starting');
|
||||
_s.peerConnection = new RTCPeerConnection(peerConnectionConfig);
|
||||
_s.peerConnection.onicecandidate = gotIceCandidate;
|
||||
_s.peerConnection.ontrack = gotRemoteStream;
|
||||
|
|
@ -53,9 +66,10 @@ function start(isCaller) {
|
|||
}
|
||||
|
||||
function gotMessageFromServer(message) {
|
||||
setStatus('Got Message From Server');
|
||||
if(!_s.peerConnection) start(false);
|
||||
const signal = JSON.parse(message.data);
|
||||
|
||||
setStatus('Signal: '+ JSON.stringify(signal, null, 2));
|
||||
// Ignore messages from ourself
|
||||
if(signal.uuid == _s.uuid) return;
|
||||
|
||||
|
|
@ -72,12 +86,16 @@ function gotMessageFromServer(message) {
|
|||
}
|
||||
|
||||
function gotIceCandidate(event) {
|
||||
setStatus('Got Ice Candidate'+JSON.stringify(event, null, 2));
|
||||
if(event.candidate != null) {
|
||||
setStatus('ICE Event: '+JSON.stringify(event.candidate, null, 2));
|
||||
_s.serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': _s.uuid}));
|
||||
}
|
||||
}
|
||||
|
||||
function createdDescription(description) {
|
||||
setStatus('Got Description');
|
||||
setStatus('Description: '+JSON.stringify(description, null, 2));
|
||||
console.log('got description');
|
||||
|
||||
_s.peerConnection.setLocalDescription(description).then(function() {
|
||||
|
|
@ -86,6 +104,7 @@ function createdDescription(description) {
|
|||
}
|
||||
|
||||
function gotRemoteStream(event) {
|
||||
setStatus('Got Remote Server');
|
||||
console.log('got remote stream');
|
||||
_s.remoteVideo.srcObject = event.streams[0];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue