"single peer share webrtc demo"
Bootstrap 3.3.0 Snippet by rayrc

<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>

Related: See More


Questions / Comments: