Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Nov 14th, 2018 78 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <title>SimpleWebRTC Demo</title>
  6.     </head>
  7.     <body>
  8.         <h1 id="title">Start a room</h1>
  9.         <style>
  10.             .videoContainer {
  11.                 position: relative;
  12.                 width: 200px;
  13.                 height: 150px;
  14.             }
  15.             .videoContainer video {
  16.                 position: absolute;
  17.                 width: 100%;
  18.                 height: 100%;
  19.             }
  20.             .volume_bar {
  21.                 position: absolute;
  22.                 width: 5px;
  23.                 height: 0px;
  24.                 right: 0px;
  25.                 bottom: 0px;
  26.                 background-color: #12acef;
  27.             }
  28.         </style>
  29.         <button id="screenShareButton"></button>
  30.         <p id="subTitle"></p>
  31.         <form id="createRoom">
  32.             <input id="sessionInput"/>
  33.             <button type="submit">Create it!</button>
  34.         </form>
  35.         <div class="videoContainer">
  36.             <video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
  37.             <div id="localVolume" class="volume_bar"></div>
  38.         </div>
  39.         <div id="remotes"></div>
  40.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  41.         <script src="../out/simplewebrtc-with-adapter.bundle.js"></script>
  42.         <script>
  43.             // grab the room from the URL
  44.             var room = location.search && location.search.split('?')[1];
  45.  
  46.             // create our webrtc connection
  47.             var webrtc = new SimpleWebRTC({
  48.                 // the id/element dom element that will hold "our" video
  49.                 localVideoEl: 'localVideo',
  50.                 // the id/element dom element that will hold remote videos
  51.                 remoteVideosEl: '',
  52.                 // immediately ask for camera access
  53.                 autoRequestMedia: true,
  54.                 debug: false,
  55.                 detectSpeakingEvents: true
  56.             });
  57.  
  58.             // when it's ready, join if we got a room from the URL
  59.             webrtc.on('readyToCall', function () {
  60.                 // you can name it anything
  61.                 if (room) webrtc.joinRoom(room);
  62.             });
  63.  
  64.             function showVolume(el, volume) {
  65.                 if (!el) return;
  66.                 if (volume < -45) { // vary between -45 and -20
  67.                    el.style.height = '0px';
  68.                } else if (volume > -20) {
  69.                     el.style.height = '100%';
  70.                 } else {
  71.                     el.style.height = '' + Math.floor((volume + 100) * 100 / 25 - 220) + '%';
  72.                 }
  73.             }
  74.             webrtc.on('channelMessage', function (peer, label, data) {
  75.                 if (data.type == 'volume') {
  76.                     showVolume(document.getElementById('volume_' + peer.id), data.volume);
  77.                 }
  78.             });
  79.             webrtc.on('videoAdded', function (video, peer) {
  80.                 console.log('video added', peer);
  81.                 var remotes = document.getElementById('remotes');
  82.                 if (remotes) {
  83.                     var d = document.createElement('div');
  84.                     d.className = 'videoContainer';
  85.                     d.id = 'container_' + webrtc.getDomId(peer);
  86.                     d.appendChild(video);
  87.                     var vol = document.createElement('div');
  88.                     vol.id = 'volume_' + peer.id;
  89.                     vol.className = 'volume_bar';
  90.                     video.onclick = function () {
  91.                         video.style.width = video.videoWidth + 'px';
  92.                         video.style.height = video.videoHeight + 'px';
  93.                     };
  94.                     d.appendChild(vol);
  95.                     remotes.appendChild(d);
  96.                 }
  97.             });
  98.             webrtc.on('videoRemoved', function (video, peer) {
  99.                 console.log('video removed ', peer);
  100.                 var remotes = document.getElementById('remotes');
  101.                 var el = document.getElementById('container_' + webrtc.getDomId(peer));
  102.                 if (remotes && el) {
  103.                    remotes.removeChild(el);
  104.                 }
  105.             });
  106.             webrtc.on('volumeChange', function (volume, treshold) {
  107.                 //console.log('own volume', volume);
  108.                 showVolume(document.getElementById('localVolume'), volume);
  109.             });
  110.  
  111.             // Since we use this twice we put it here
  112.             function setRoom(name) {
  113.                 $('form').remove();
  114.                 $('h1').text(name);
  115.                 $('#subTitle').text('Link to join: ' + location.href);
  116.                 $('body').addClass('active');
  117.             }
  118.  
  119.             if (room) {
  120.                 setRoom(room);
  121.             } else {
  122.                 $('form').submit(function () {
  123.                     var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
  124.                     webrtc.createRoom(val, function (err, name) {
  125.                         console.log(' create room cb', arguments);
  126.  
  127.                         var newUrl = location.pathname + '?' + name;
  128.                         if (!err) {
  129.                             history.replaceState({foo: 'bar'}, null, newUrl);
  130.                             setRoom(name);
  131.                         } else {
  132.                             console.log(err);
  133.                         }
  134.                     });
  135.                     return false;
  136.                 });
  137.             }
  138.  
  139.             var button = $('#screenShareButton'),
  140.                 setButton = function (bool) {
  141.                     button.text(bool ? 'share screen' : 'stop sharing');
  142.                 };
  143.             webrtc.on('localScreenStopped', function () {
  144.                 setButton(true);
  145.             });
  146.  
  147.             setButton(true);
  148.  
  149.             button.click(function () {
  150.                 if (webrtc.getLocalScreen()) {
  151.                     webrtc.stopScreenShare();
  152.                     setButton(true);
  153.                 } else {
  154.                     webrtc.shareScreen(function (err) {
  155.                         if (err) {
  156.                             setButton(true);
  157.                         } else {
  158.                             setButton(false);
  159.                         }
  160.                     });
  161.  
  162.                 }
  163.             });
  164.         </script>
  165.     </body>
  166. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top