2014-02-11 16:15:22 +08:00
< html >
2014-02-07 00:44:24 +08:00
< head >
2014-02-11 16:15:22 +08:00
< title > webcam_chat< / title >
< style type = "text/css" >
div.container {
position: relative;
}
2014-02-07 00:44:24 +08:00
2014-02-11 16:15:22 +08:00
div.windowa {
height: 480px;
width: 640px;
border-radius: 15px;
2014-06-07 05:18:39 +08:00
-moz-border-radius: 15px;
2014-02-11 16:15:22 +08:00
background-color: black;
position: absolute;
left: 50;
padding : 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
color: white;
}
2014-02-07 00:44:24 +08:00
2014-02-11 16:15:22 +08:00
div.windowb {
height: 180px;
width: 200px;
border-radius: 15px;
2014-06-07 05:18:39 +08:00
-moz-border-radius: 15px;
2014-02-11 16:15:22 +08:00
background-color: #9B9B9B;
position: absolute;
top: 480;
left: 470;
padding: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
}
div.windowc {
position: absolute;
top: 510;
left: 80;
height: 150px;
width: 380px;
color: red;
}
div.footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
}
video.peer {
position: absolute;
top: 15;
left: 10;
}
video.self {
position: absolute;
top: 5;
left: 10;
}
< / style >
< script >
2014-06-07 05:18:39 +08:00
=WEBRTCAPIJS=
2014-02-18 14:01:44 +08:00
window.onerror = function(e) {
2014-02-18 14:02:16 +08:00
document.getElementById("message").innerHTML = "Error: " + e.toString();
2014-02-18 14:01:44 +08:00
}
2014-02-11 16:15:22 +08:00
window.onload = function() {
document.getElementById("message").innerHTML = "Waiting for the session. When the session arrives, you must manually allow the webcam to run in order to join the session."
}
var channel = '=CHANNEL=';
2014-02-12 13:07:43 +08:00
var websocket = new WebSocket('ws://=SERVER=');
2014-02-11 16:15:22 +08:00
var inSession = false;
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
}));
};
var peer = new PeerConnection(websocket);
peer.onUserFound = function(userid) {
if (inSession) {
console.debug("Already in session, will not send another participation request");
return;
2014-02-07 00:44:24 +08:00
};
2014-02-11 16:15:22 +08:00
userid = "=OFFERERID=";
getUserMedia(function(stream) {
peer.addStream(stream);
peer.sendParticipationRequest(userid);
inSession = true;
document.getElementById("message").innerHTML = "Session is now active.";
});
};
peer.onStreamAdded = function(e) {
var video = e.mediaElement;
if (e.userid == 'self') {
video.controls = true;
video.setAttribute('width', 200);
video.setAttribute('height', 190);
video.setAttribute('controls', false);
video.setAttribute('class', 'self');
document.getElementById("windowb").appendChild(video);
}
else {
video.controls = true;
2014-02-09 09:56:43 +08:00
video.setAttribute('width', 640);
2014-02-11 16:15:22 +08:00
video.setAttribute('height', 460);
video.setAttribute('controls', false);
video.setAttribute('class', 'peer');
document.getElementById("windowa").appendChild(video);
}
video.muted = false;
video.volume = 0.5;
video.play();
};
2014-02-07 00:44:24 +08:00
2014-02-11 16:15:22 +08:00
peer.onStreamEnded = function(e) {
var video = e.mediaElement;
if (video) {
video.style.opacity = 0;
setTimeout(function() {
video.parentNode.removeChild(video);
}, 1000);
}
document.getElementById("message").innerHTML = "The video session has ended.";
};
2014-02-07 00:44:24 +08:00
2014-02-11 16:15:22 +08: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
2014-02-07 00:44:24 +08:00
});
2014-02-11 16:15:22 +08:00
callback(stream);
});
}
< / script >
< / head >
< body >
< div class = "container" >
< div class = "windowa" id = "windowa" >
< / div >
< div class = "windowb" id = "windowb" >
< / div >
< div class = "windowc" >
< b > Session status (=RHOST=):< / b > < p > < / p >
< span id = "message" > < / span >
< / div >
< / div >
< div class = "footer" >
< center > < a href = "http://metasploit.com/" target = "_blank" > metasploit.com< / a > < / center >
< / div >
2014-02-07 00:44:24 +08:00
< / body >
2014-02-11 16:15:22 +08:00
< / html >
