<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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
html { background: #eee; }
body {
font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 1.2em;
line-height: 1.2em;
margin: 0;
}
article, footer {
display: block;
max-width: 900px;
min-width: 360px;
width: 80%;
}
article {
background: #fff;
border: 1px solid;
border-color: #ddd #aaa #aaa #ddd;
margin: 2.5em auto 0 auto;
padding: 2em;
}
h1 { margin-top: 0; }
article p:first-of-type { margin-top: 1.6em; }
article p:last-child { margin-bottom: 0; }
footer {
margin: 0 auto 2em auto;
text-align: center;
}
footer a {
color: #666;
font-size: inherit;
padding: 1em;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
}
footer a:hover, footer a:focus { color: #111; }
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: #ccc; }
::-moz-selection { background: #ccc; }
button, input[type=button] {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background: #0370ea;
background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
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: white;
border: 2px solid black;
border-radius: 0.2em;
display: inline-block;
margin: 2em .2em;
padding: .1em;
vertical-align: top;
}
.videos-container h2 {
border: 0;
border-top: 1px solid black;
display: block;
margin: 0;
text-align: center;
}
video {
background: black;
height: 15em;
width: 20em;
}
pre {
border-left: 2px solid red;
margin-left: 2em;
padding-left: 1em;
}
</style>
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
</head>
<body>
<article>
<div style="text-align: center;">
<div class="videos-container">
<video id="video-stream" autoplay controls></video>
<h2>video-stream</h2>
</div>
<div class="videos-container">
<video id="screen-stream" autoplay controls></video>
<h2>screen-stream</h2>
</div>
</div>
<script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer, answerer;
var videoStream = document.getElementById('video-stream');
var screenStream = document.getElementById('screen-stream');
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, screen_stream) {
offerer = new RTCPeerConnection(window.iceServers);
// attaching audio/video stream
offerer.addStream(video_stream);
// attaching screen capturing stream
offerer.addStream(screen_stream);
offerer.onicecandidate = function(event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate);
};
offerer.createOffer(function(offer) {
offerer.setLocalDescription(offer);
console.log('offer->sdp->', offer.sdp);
answererPeer(offer);
}, null, mediaConstraints);
}
</script>
<script>
/* answerer */
function answererPeer(offer) {
answerer = new RTCPeerConnection(window.iceServers);
var gotFirstMediaStream = false;
answerer.onaddstream = function(event) {
console.log(event.stream);
// "video-stream" is attached in 1st order
if (!gotFirstMediaStream) {
gotFirstMediaStream = true;
videoStream.src = URL.createObjectURL(event.stream);
videoStream.play();
}
// "screen-stream" is attached in 2nd order
else {
screenStream.src = URL.createObjectURL(event.stream);
screenStream.play();
}
};
answerer.onicecandidate = function(event) {
if (!event || !event.candidate) return;
offerer.addIceCandidate(event.candidate);
};
answerer.setRemoteDescription(offer);
answerer.createAnswer(function(answer) {
answerer.setLocalDescription(answer);
console.log('answer->sdp->', answer.sdp);
offerer.setRemoteDescription(answer);
}, null, mediaConstraints);
}
</script>
<script>
var video_constraints = {
mandatory: { },
optional: []
};
function getUserMedia(callback, constraints) {
var n = navigator;
n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;
n.getMedia(constraints || {
audio: true,
video: video_constraints
}, callback, onerror);
function onerror(e) {
if (location.protocol === 'http:')
throw '<https> is mandatory to capture screen.';
else
throw 'Screen capturing process is denied. Are you enabled flag: "Enable screen capture support in getUserMedia"?';
console.error(e);
}
}
</script>
<script>
getUserMedia(function(video_stream) {
var video_constraints = {
mandatory: {
chromeMediaSource: 'screen'
},
optional: []
};
var constraints = {
audio: false,
video: video_constraints
};
getUserMedia(function(screen_stream) {
offererPeer(video_stream, screen_stream);
}, constraints);
});
</script>
<pre>
// attaching audio/video stream
offerer.addStream(video_stream);
// attaching screen capturing stream
offerer.addStream(screen_stream);
</pre>
<section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
<h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
</section>
</article>
<footer>
</footer>
<script src="https://www.webrtc-experiment.com/common.js"> </script>
</body>
</html>
