API tools faq
paste
Advertisement
SymfonyRules

webRTChtml

SymfonyRules
May 4th, 2016
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>SimpleWebRTC Demo</title>
  5.     <style>
  6.         .videoContainer {
  7.             position: relative;
  8.             width: 200px;
  9.             height: 150px;
  10.         }
  11.         .videoContainer video {
  12.             position: absolute;
  13.             width: 100%;
  14.             height: 100%;
  15.         }
  16.         .volumeBar {
  17.             position: absolute;
  18.             width: 5px;
  19.             height: 0px;
  20.             right: 0px;
  21.             bottom: 0px;
  22.             background-color: #12acef;
  23.         }
  24.         .connectionstate {
  25.             position: absolute;
  26.             top: 0px;
  27.             width: 100%;
  28.             text-align: center;
  29.             color: #fff
  30.         }
  31.         #localScreenContainer {
  32.             display: none;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37. <h1 id="title">Start a room</h1>
  38. <form id="createRoom">
  39.     <input id="sessionInput"/>
  40.     <button disabled type="submit">Create it!</button>
  41. </form>
  42. <p id="subTitle"></p>
  43. <div>
  44.     <button id="screenShareButton"></button>
  45.     (https required for screensharing to work)
  46. </div>
  47. <hr>
  48. <div class="videoContainer">
  49.     <video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
  50.  
  51. </div>
  52. <div id="localScreenContainer" class="videoContainer">
  53. </div>
  54. <div id="remotes"></div>
  55. <hr>
  56. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  57. <script src="https://simplewebrtc.com/latest-v2.js"></script>
  58. <script>
  59.     // grab the room from the URL
  60.     var room = location.search && location.search.split('?')[1];
  61.     // create our webrtc connection
  62.     var webrtc = new SimpleWebRTC({
  63.         // the id/element dom element that will hold "our" video
  64.         localVideoEl: 'localVideo',
  65.         // the id/element dom element that will hold remote videos
  66.         remoteVideosEl: 'remotes',
  67.         // immediately ask for camera access
  68.         autoRequestMedia: true,
  69.         debug: false,
  70.         detectSpeakingEvents: true,
  71.         autoAdjustMic: false
  72.     });
  73.     // when it's ready, join if we got a room from the URL
  74.     webrtc.on('readyToCall', function () {
  75.         // you can name it anything
  76.         if (room) webrtc.joinRoom(room);
  77.     });
  78.     // we got access to the camera
  79.     webrtc.on('localStream', function (stream) {
  80.         $('form>button').attr('disabled', null);
  81.     });
  82.     // we did not get access to the camera
  83.     webrtc.on('localMediaError', function (err) {
  84.     });
  85.     // local screen obtained
  86.     webrtc.on('localScreenAdded', function (video) {
  87.         video.onclick = function () {
  88.             video.style.width = video.videoWidth + 'px';
  89.             video.style.height = video.videoHeight + 'px';
  90.         };
  91.         document.getElementById('localScreenContainer').appendChild(video);
  92.         $('#localScreenContainer').show();
  93.     });
  94.     // local screen removed
  95.     webrtc.on('localScreenRemoved', function (video) {
  96.         document.getElementById('localScreenContainer').removeChild(video);
  97.         $('#localScreenContainer').hide();
  98.     });
  99.     // a peer video has been added
  100.     webrtc.on('videoAdded', function (video, peer) {
  101.         console.log('video added', peer);
  102.         var remotes = document.getElementById('remotes');
  103.         if (remotes) {
  104.             var container = document.createElement('div');
  105.             container.className = 'videoContainer';
  106.             container.id = 'container_' + webrtc.getDomId(peer);
  107.             container.appendChild(video);
  108.             // suppress contextmenu
  109.             video.oncontextmenu = function () { return false; };
  110.             // show the remote volume
  111.             var vol = document.createElement('div');
  112.             vol.id = 'volume_' + peer.id;
  113.             vol.className = 'volumeBar';
  114.             video.onclick = function () {
  115.                 video.style.width = video.videoWidth + 'px';
  116.                 video.style.height = video.videoHeight + 'px';
  117.             };
  118.             container.appendChild(vol);
  119.             // show the ice connection state
  120.             if (peer && peer.pc) {
  121.                 var connstate = document.createElement('div');
  122.                 connstate.className = 'connectionstate';
  123.                 container.appendChild(connstate);
  124.                 peer.pc.on('iceConnectionStateChange', function (event) {
  125.                     switch (peer.pc.iceConnectionState) {
  126.                         case 'checking':
  127.                             $(connstate).text('Connecting to peer...');
  128.                             break;
  129.                         case 'connected':
  130.                         case 'completed': // on caller side
  131.                             $(connstate).text('Connection established.');
  132.                             break;
  133.                         case 'disconnected':
  134.                             $(connstate).text('Disconnected.');
  135.                             break;
  136.                         case 'failed':
  137.                             $(connstate).text('Connection failed.');
  138.                             break;
  139.                         case 'closed':
  140.                             $(connstate).text('Connection closed.');
  141.                             break;
  142.                     }
  143.                 });
  144.             }
  145.             remotes.appendChild(container);
  146.         }
  147.     });
  148.     // a peer was removed
  149.     webrtc.on('videoRemoved', function (video, peer) {
  150.         console.log('video removed ', peer);
  151.         var remotes = document.getElementById('remotes');
  152.         var el = document.getElementById('container_' + webrtc.getDomId(peer));
  153.         if (remotes && el) {
  154.             remotes.removeChild(el);
  155.         }
  156.     });
  157.  
  158.     // Since we use this twice we put it here
  159.     function setRoom(name) {
  160.         $('form').remove();
  161.         $('h1').text(name);
  162.         $('#subTitle').text('Link to join: ' + location.href);
  163.         $('body').addClass('active');
  164.     }
  165.     if (room) {
  166.         setRoom(room);
  167.     } else {
  168.         $('form').submit(function () {
  169.             var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
  170.             webrtc.createRoom(val, function (err, name) {
  171.                 console.log(' create room cb', arguments);
  172.                 var newUrl = location.pathname + '?' + name;
  173.                 if (!err) {
  174.                     history.replaceState({foo: 'bar'}, null, newUrl);
  175.                     setRoom(name);
  176.                 } else {
  177.                     console.log(err);
  178.                 }
  179.             });
  180.             return false;
  181.         });
  182.     };
  183. </script>
  184. </body>
  185. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!