offerer's interface gets a makeover

This commit is contained in:
sinn3r 2014-02-11 19:43:52 -06:00
parent 2bb15d3a87
commit 7eb20a37d4
1 changed files with 122 additions and 14 deletions

View File

@ -1,10 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>Video session</title>
<style type="text/css">
div.dot1 {
position: absolute;
width: 20px;
height: 20px;
margin: 30px auto 0;
border-radius: 50px;
background-color: red;
top: 150;
left: 470;
}
div.dot2 {
position: absolute;
width: 20px;
height: 20px;
margin: 30px auto 0;
border-radius: 50px;
background-color: red;
top: 150;
left: 505;
}
div.dot3 {
position: absolute;
width: 20px;
height: 20px;
margin: 30px auto 0;
border-radius: 50px;
background-color: red;
top: 150;
left: 540;
}
div.windowa {
height: 340px;
width: 420px;
border-radius: 15px;
-moz-border-raidus: 15px;
background-color: black;
position: absolute;
left: 20;
padding : 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
color: white;
}
div.windowb {
height: 340px;
width: 420px;
border-radius: 15px;
-moz-border-raidus: 15px;
background-color: black;
position: absolute;
left: 570;
padding : 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
color: white;
}
div.windowc {
position: absolute;
top: 400;
left: 60;
height: 50px;
width: 900px;
color: red;
}
div.footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
}
</style>
<script src="api.js"> </script>
</head>
<body>
<div id="message">Starting a session...</div>
<div id="chat_area"></div>
<script>
var channel = '=CHANNEL=';
var websocket = new WebSocket('ws://wsnodejs.jit.su:80');
@ -28,12 +108,19 @@
peer.onStreamAdded = function(e) {
var video = e.mediaElement;
video.setAttribute('width', 640);
video.setAttribute('height', 480);
video.setAttribute('controls', true);
video.setAttribute('width', 420);
video.setAttribute('height', 340);
video.setAttribute('controls', false);
video.volume = 0.5;
document.getElementById("message").style.display = "none";
document.getElementById("chat_area").appendChild(video);
if (e.userid == 'self') {
document.getElementById("windowb").appendChild(video);
}
else {
document.getElementById("windowa").appendChild(video);
document.getElementById("message").innerHTML = "Session is now active.";
}
video.play();
};
@ -70,9 +157,6 @@
navigator.getUserMedia(hints,function(stream) {
var video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.controls = true;
video.muted = false;
peer.onStreamAdded({
mediaElement: video,
userid: 'self',
@ -83,5 +167,29 @@
});
}
</script>
</head>
<body>
<div class="windowa" id="windowa">
<b>You peer</b>
</div>
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="windowb" id="windowb">
<b>You</b>
</div>
<div class="windowc">
<b>Status:</b><p></p>
<span id="message">Waiting for your peer to join the video session...</span>
</div>
<div class="footer">
<center><a href="http://metasploit.com/" target="_blank">metasploit.com</a></center>
</div>
</body>
</html>
</html>