"revised twinvideo 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 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>

Related: See More


Questions / Comments: