<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="author" content="DockRTC">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?family=FontAwesome:300,400,500,800">
<style>
html {
background-image: rgba(0,0,0,0.12);background-blend-mode:multiply;
background:radial-gradient(circle,white,transparent);
max-height:250px;
}
body {
background:transparent;
font-family: "Fira Sans", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1em;
line-height: 1em;
margin: 0;
max-height:250px;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0px, rgba(0,0,0,0.4) 100%);
border-radius: 20px;
border-size:6px;
box-shadow: 0px 0px 15px 10px #EAEAEA;
border: 1px solid #FFF;
font-stretch: normal;
background-image:linear-gradient(to right,#eee,rgba(255,255,255,0.6),#ccc,#fff);
}
article{
display: block;
max-width: 1120px;
min-width: 200px;
width: 100%;
}
article {
background:radial-gradient(circle,transparent,#eee,#ccc,#fff);
margin: 2em auto 0 auto;
padding: .7em;
border-radius: 20px;
border-size:6px;
box-shadow: 0px 0px 20px 10px #fa0;
border: 2px solid #fff;
font-stretch: normal;
}
h1 { margin-top: 0; }
article p:first-of-type { margin-top: 1.6em; }
article p:last-child { margin-bottom: 0; }
h1, h2 {
border-bottom: 1px solid black;
display: inline;
font-weight: normal;
line-height: 36px;
padding: 0 0 3px 0;
}
a {
color: #2844FA;
text-decoration: none;
}
a:hover, a:focus { color: #1B29A4; }
a:active { color: #000; }
:-moz-any-link:focus {
border: 0;
color: #000;
}
::selection { background-color: rgba(0,0,0,0.1);
}
::-moz-selection { background: #ccc; }
button, input[type=button] {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background:rgba(0,0,0,0.1);
/* background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%); */
border: 1px solid #076bd2;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: inherit;
font-size: .8em;
font-size: 1.5em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}
button:hover, input[type=button]:hover { background: rgb(9, 147, 240); }
button:active, input[type=button]:active { background: rgb(10, 118, 190); }
button[disabled], input[type=button][disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
strong {
color: rgb(204, 14, 14);
font-family: inherit;
font-weight: normal;
}
tr, td, th {
border-right: 1px dotted #BBA9A9;
border-top: 1px dotted #BBA9A9;
padding: .7em 1.4em;
vertical-align: top;
}
table { width: 100%; }
.videos-container {
background: whitesmoke;
background:linear-gradient(to left, #000,#fff,rgba(0,0,0,0.1));
border: 2px solid black;
border-radius: 0.2em;
display: inline-block;
margin: 2em .2em;
padding: .1em;
vertical-align: top;
background-color: rgba(0,0,0,0.2);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0px, rgba(0,0,0,0.4) 100%);
border-radius: 20px;
border-size:6px;
box-shadow: 0px 0px 15px 10px #EAEAEA;
border: 1px solid #FFF;
font-stretch: normal;
background-image:linear-gradient(to right,#eee,rgba(255,255,255,0.6),#ccc,#fff);
background-image: rgba(0,0,0,0.12);
mix-blend-mode:exclude;
/* mix-blend-mode:lighten; */
background:radial-gradient(circle,black,transparent);
color:#fa0;
}
.container-container{
background:whitesmoke;background-image:radial-gradient( circle from center, #fa0,#fff,#fa0,rgba(0,0,0,0.1));radial-gradient(circle from center,black,white,80% rgba(0,0,0,0.23));
//mix-blend-mode:lighten;
color:#fa0;
background-color: rgba(0,0,0,0.1);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0px, rgba(0,0,0,0.4) 100%);
border-radius: 20px;
border-size:6px;
box-shadow: 0px 0px 15px 10px #EAEAEA;
border: 1px solid #FFF;
font-stretch: normal;
}
.videos-container h2 {
border: 0;
border-top: 1px solid #fff;
display: block;
margin: 0;
text-align: center;
background: whitesmoke;
background:linear-gradient(to left, #000,#fff,rgba(0,0,0,0.1));
background-color: rgba(0,0,0,0.2);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0px, rgba(0,0,0,0.4) 100%);
padding:5px;
float:none !important;
margin: 0 auto;
margin-left:40px;
margin-right:40px;
border-radius: 2px;
box-shadow: 0px 0px 15px 10px #EAEAEA;
border: 1px solid #FFF;
font-stretch: normal;
border-radius: 20px;
border-size:6px;
color:#fa0;
}
video {
background:#fff;
background:url(//webmx.me/assets/img/void.gif);
min-height: 8em;max-height:13em;max-width:28em;width:21em;
color:#fa0;
border-radius: 20px;
border-size:6px;
}
pre {
border-left: 2px solid pink;
margin-left: 2em;
padding-left: 1em;
}
</style>
</head>
<body>
<div class="container">
<article >
<div style="text-align: center;">
<div class="container-container">
<div class="videos-container">
<video id="peer2-to-peer1" autoplay controls></video>
<h4><small>video</small></h4>
</div>
<div class="videos-container">
<video id="peer1-to-peer2" autoplay controls></video>
<h4><small>screen</small></h4>
</div></div>
</div>
</article>
</div>
<script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer, answerer;
var offererToAnswerer = document.getElementById('peer1-to-peer2');
var answererToOfferer = document.getElementById('peer2-to-peer1');
window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
window.URL = window.webkitURL || window.URL;
window.iceServers = {
iceServers: [{
url: 'stun:23.21.150.121'
}
]
};
</script>
<script>
/* offerer */
function offererPeer(video_stream) {
offerer = new RTCPeerConnection(window.iceServers);
offerer.addStream(video_stream);
offerer.onaddstream = function (event) {
offererToAnswerer.src = URL.createObjectURL(event.stream);
offererToAnswerer.play();
};
offerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate);
};
offerer.createOffer(function (offer) {
offerer.setLocalDescription(offer);
answererPeer(offer, video_stream);
}, function() {}, mediaConstraints);
}
</script>
<script>
/* answerer */
function answererPeer(offer, video_stream) {
answerer = new RTCPeerConnection(window.iceServers);
answerer.addStream(video_stream);
answerer.onaddstream = function (event) {
answererToOfferer.src = URL.createObjectURL(event.stream);
answererToOfferer.play();
};
answerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
offerer.addIceCandidate(event.candidate);
};
answerer.setRemoteDescription(offer);
answerer.createAnswer(function (answer) {
answerer.setLocalDescription(answer);
offerer.setRemoteDescription(answer);
}, function() {}, mediaConstraints);
}
</script>
<script>
var video_constraints = {
mandatory: {},
optional: []
};
function getUserMedia(callback) {
var n = navigator;
n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;
n.getMedia({
audio: true,
video: video_constraints
}, callback, onerror);
function onerror(e) {
alert(JSON.stringify(e, null, '\t'));
}
}
</script>
<script>
getUserMedia(function (video_stream) {
offererPeer(video_stream);
});
</script>
</body></html>
