Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
284 lines (241 sloc) 12.4 KB
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<title>Share screen and audio/video from single peer connection! | Muaz Khan</title>
<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">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
.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>
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
</head>
<body>
<article> <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←HOME</a>
<header style="text-align: center;">
<h1>Share screen and audio/video from single peer connection!</h1>
<p>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
.
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
.
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
.
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
.
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
<div class="search-container">
<gcse:search></gcse:search>
</div>
</header>
<blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
This demo is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated (published on 2013)</span>. Please check this instead: <a href="https://github.com/webrtc/samples">https://github.com/webrtc/samples</a>
</blockquote>
<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');
var RTCPeerConnection;
if (typeof mozRTCPeerConnection !== 'undefined') {
RTCPeerConnection = mozRTCPeerConnection;
} else if (typeof webkitRTCPeerConnection !== 'undefined') {
RTCPeerConnection = webkitRTCPeerConnection;
} else if (typeof window.RTCPeerConnection !== 'undefined') {
RTCPeerConnection = window.RTCPeerConnection;
}
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.getUserMedia;
window.URL = window.URL || window.webkitURL;
window.iceServers = {
iceServers: [{
url: 'stun:stun.l.google.com:19302'
}]
};
</script>
<script>
/* offerer */
function offererPeer(video_stream, screen_stream) {
offerer = new RTCPeerConnection(window.iceServers);
// attaching audio/video stream
if(video_stream) {
offerer.addStream(video_stream);
}
// attaching screen capturing stream
if(screen_stream) {
offerer.addStream(screen_stream);
}
offerer.onicecandidate = function(event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate, function() {}, function() {});
};
offerer.createOffer(function(offer) {
offerer.setLocalDescription(offer, function() {}, function() {});
console.log('offer->sdp->', offer.sdp);
answererPeer(offer);
}, function() {}, 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, function() {}, function() {});
};
answerer.setRemoteDescription(offer, function() {}, function() {});
answerer.createAnswer(function(answer) {
answerer.setLocalDescription(answer, function() {}, function() {});
console.log('answer->sdp->', answer.sdp);
offerer.setRemoteDescription(answer);
}, function() {}, mediaConstraints);
}
</script>
<script>
var video_constraints = {
mandatory: { },
optional: []
};
function getUserMedia(callback, constraints) {
navigator.getUserMedia(constraints || {
audio: true,
video: video_constraints
}, callback, function(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);
callback();
});
}
</script>
<script>
function updateFakeVideo(stream) {
var video = document.createElement('video');
video.muted = true;
video.style.display = 'none';
video.src = URL.createObjectURL(stream);
(document.body || document.documentElement).appendChild(video);
}
getUserMedia(function(video_stream) {
updateFakeVideo(video_stream);
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia(screen_constraints, function (screen_stream) {
updateFakeVideo(screen_stream);
offererPeer(video_stream, screen_stream);
}, function (error) {
console.error(error);
offererPeer(video_stream);
});
});
});
</script>
<br /><br />
<ol>
<li>It is one-way streaming; flowing from peer1 to peer2.</li>
<li>peer1 attached both screen capturing stream; and audio/video stream.</li>
<li>On "peer2" side; "onaddstream" event is fired two times.</li>
<li>First time; "onaddstream" returned audio/video stream; and last time it returned screen capturing stream.</li>
<li>Basically it is multi-streams attachment demo.</li>
<li>You can get same functionality via "renegotiation" process; supported by RTCMultionnection v1.3 and v1.4</li>
</ol>
<pre>
// attaching audio/video stream
offerer.addStream(video_stream);
// attaching screen capturing stream
offerer.addStream(screen_stream);
</pre>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
<div id="github-commits"></div>
</section>
<section class="experiment">
<h2 class="header" id="feedback">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><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
</section>
</article>
<a href="https://github.com/muaz-khan/WebRTC-Experiment" class="fork-left"></a>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/licence/">MIT License</a>
© <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
<a href="https://github.com/muaz-khan" target="_blank">Github</a>
</p>
</footer>
<script src="https://cdn.webrtc-experiment.com/commits.js"> </script>
</body>
</html>