2014-02-12 01:43:52 +00:00
|
|
|
<html>
|
2014-02-06 16:44:24 +00:00
|
|
|
<head>
|
2014-02-12 01:43:52 +00:00
|
|
|
<title>Video session</title>
|
|
|
|
|
<style type="text/css">
|
2014-06-06 21:52:00 +00:00
|
|
|
body {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-12 01:43:52 +00:00
|
|
|
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>
|
|
|
|
|
|
2014-02-06 16:44:24 +00:00
|
|
|
<script>
|
2014-06-06 21:18:39 +00:00
|
|
|
=WEBRTCAPIJS=
|
|
|
|
|
|
2014-02-09 01:36:33 +00:00
|
|
|
var channel = '=CHANNEL=';
|
2014-02-12 05:07:43 +00:00
|
|
|
var websocket = new WebSocket('ws://=SERVER=');
|
2014-02-06 16:44:24 +00:00
|
|
|
|
|
|
|
|
websocket.onopen = function() {
|
|
|
|
|
websocket.push(JSON.stringify({
|
|
|
|
|
open: true,
|
|
|
|
|
channel: channel
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
websocket.push = websocket.send;
|
|
|
|
|
websocket.send = function(data) {
|
|
|
|
|
websocket.push(JSON.stringify({
|
|
|
|
|
data: data,
|
|
|
|
|
channel: channel
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
2014-02-09 04:23:19 +00:00
|
|
|
var peer = new PeerConnection(websocket, '=OFFERERID=');
|
2014-02-06 16:44:24 +00:00
|
|
|
|
|
|
|
|
peer.onStreamAdded = function(e) {
|
|
|
|
|
var video = e.mediaElement;
|
2014-02-12 01:43:52 +00:00
|
|
|
video.setAttribute('width', 420);
|
|
|
|
|
video.setAttribute('height', 340);
|
|
|
|
|
video.setAttribute('controls', false);
|
2014-02-09 01:56:43 +00:00
|
|
|
video.volume = 0.5;
|
2014-02-12 01:43:52 +00:00
|
|
|
|
|
|
|
|
if (e.userid == 'self') {
|
|
|
|
|
document.getElementById("windowb").appendChild(video);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
document.getElementById("windowa").appendChild(video);
|
|
|
|
|
document.getElementById("message").innerHTML = "Session is now active.";
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-06 16:44:24 +00:00
|
|
|
video.play();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
peer.onStreamEnded = function(e) {
|
|
|
|
|
var video = e.mediaElement;
|
|
|
|
|
if (video) {
|
|
|
|
|
video.style.opacity = 0;
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
video.parentNode.removeChild(video);
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
2014-02-08 21:41:44 +00:00
|
|
|
document.getElementById("message").innerHTML = "The video session has ended.";
|
2014-02-06 16:44:24 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
2014-06-06 21:18:39 +00:00
|
|
|
setTimeout(function(){
|
|
|
|
|
getUserMedia(function(stream) {
|
|
|
|
|
peer.addStream(stream);
|
|
|
|
|
peer.startBroadcasting();
|
|
|
|
|
});
|
|
|
|
|
}, 500);
|
2014-02-06 16:44:24 +00:00
|
|
|
};
|
2014-02-09 01:36:33 +00:00
|
|
|
|
2014-02-06 16:44:24 +00:00
|
|
|
function getUserMedia(callback) {
|
|
|
|
|
var hints = {audio:true,video:{
|
|
|
|
|
optional: [],
|
|
|
|
|
mandatory: {
|
|
|
|
|
minWidth: 1280,
|
|
|
|
|
minHeight: 720,
|
|
|
|
|
maxWidth: 1920,
|
|
|
|
|
maxHeight: 1080,
|
|
|
|
|
minAspectRatio: 1.77
|
|
|
|
|
}
|
|
|
|
|
}};
|
|
|
|
|
|
|
|
|
|
navigator.getUserMedia(hints,function(stream) {
|
|
|
|
|
var video = document.createElement('video');
|
|
|
|
|
video.src = URL.createObjectURL(stream);
|
|
|
|
|
peer.onStreamAdded({
|
|
|
|
|
mediaElement: video,
|
|
|
|
|
userid: 'self',
|
|
|
|
|
stream: stream
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
callback(stream);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2014-02-12 01:43:52 +00:00
|
|
|
</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>
|
|
|
|
|
|
2014-02-06 16:44:24 +00:00
|
|
|
</body>
|
2014-02-12 01:43:52 +00:00
|
|
|
</html>
|
