PageRenderTime 46ms CodeModel.GetById 22ms RepoModel.GetById 1ms app.codeStats 0ms

/demos/client-side-socket-io.html

https://github.com/evenisse/WebRTC-Experiment
HTML | 221 lines | 180 code | 38 blank | 3 comment | 0 complexity | 222552fd502be2b530ce57a36ed311ec MD5 | raw file
  1. <title>Simple client-side WebRTC Experiment using Socket.io over PubNub ® Muaz Khan</title>
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  3. <h1>Simple client-side WebRTC Experiment using Socket.io over PubNub</h1>
  4. <meta name="description" content="A client side WebRTC experiment/demo using socket.io over pubnub! It is simple. It is included here for newcomers who are interested to learn WebRTC from demos!">
  5. <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
  6. <meta name="author" content="Muaz Khan">
  7. <style>@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(/images/font.woff) format('woff'); } html { background: #ECECEC; font-family: 'Open Sans'; } body { color: #333; font: 1.4em 'Open Sans' , arial, sans-serif; font-weight: 300; line-height: 1.5; margin: 0 3em; background: white; border: 1px dotted #BBA9A9; border-top: 0; } h1, h2 { color: #2778ec; font-size: 1.6em; font-weight: 300; line-height: 1.15; } a { display: inline-block; padding: 0.2em; color: #1B75C9; text-decoration: none; border-bottom: 1px dotted #0085FF; margin: 0 .2em; } a:hover { color: red; }</style>
  8. <div style="position: absolute;background: white;display: block; padding: 5px 10px;z-index: 100;">
  9. <a href="/">Home</a>
  10. » <a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side-socket-io.html">Source Code</a>
  11. </div>
  12. <script>
  13. function uniqueToken() {
  14. var s4 = function () {
  15. return Math.floor(Math.random() * 0x10000).toString(16);
  16. };
  17. return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
  18. }
  19. var uniqueChannel = uniqueToken();
  20. </script>
  21. <script src="/lib/RTCPeerConnection-v1.4.js"></script>
  22. <script src="/dependencies/socket.io.js"></script>
  23. <style>body{text-align: center;}</style>
  24. <h2>Client video</h2>
  25. <video id="client-video" autoplay></video>
  26. <h2>Remote video / Getting stream from peer2</h2>
  27. <video id="remote-video-1" autoplay></video>
  28. <h2>Remote video / Getting stream from peer1</h2>
  29. <video id="remote-video-2" autoplay></video>
  30. <!-- First of all; get camera -->
  31. <script>
  32. var socket;
  33. function openSocket() {
  34. socket = io.connect('https://pubsub.pubnub.com/' + uniqueChannel, {
  35. channel: uniqueChannel,
  36. publish_key: 'pub-c-1ebf6bf7-3679-4964-b230-522d8684d071',
  37. subscribe_key: 'sub-c-da9eab08-7263-11e2-8b02-12313f022c90',
  38. ssl: true
  39. });
  40. socket.on('message', function (message) {
  41. if (message.firstPart || message.secondPart || message.thirdPart) {
  42. if (message.firstPart) {
  43. global.firstPart = message.firstPart;
  44. if (global.secondPart && global.thirdPart) processReceievdSDP(message.by);
  45. }
  46. if (message.secondPart) {
  47. global.secondPart = message.secondPart;
  48. if (global.firstPart && global.thirdPart) processReceievdSDP(message.by);
  49. }
  50. if (message.thirdPart) {
  51. global.thirdPart = message.thirdPart;
  52. if (global.firstPart && global.secondPart) processReceievdSDP(message.by);
  53. }
  54. }
  55. if (message.candidate) {
  56. /* 2nd peer should process/add ice candidates sent by 1st peer! */
  57. if (message.by == 'peer1') {
  58. peer2 && peer2.addICE({
  59. sdpMLineIndex: message.sdpMLineIndex,
  60. candidate: JSON.parse(message.candidate)
  61. });
  62. }
  63. else {
  64. peer1 && peer1.addICE({
  65. sdpMLineIndex: message.sdpMLineIndex,
  66. candidate: JSON.parse(message.candidate)
  67. });
  68. }
  69. }
  70. });
  71. socket.on('connect', function () {
  72. /* Socket opened; Now start creating offer sdp */
  73. create1stPeer();
  74. });
  75. }
  76. function processReceievdSDP(by)
  77. {
  78. if (by == 'peer1') {
  79. offerSDP = JSON.parse(global.firstPart + global.secondPart + global.thirdPart);
  80. setTimeout(create2ndPeer, 400);
  81. }
  82. /* 1st peer should complete the handshake using answer SDP provided by 2nd peer! */
  83. else peer1.addAnswerSDP(JSON.parse(global.firstPart + global.secondPart + global.thirdPart));
  84. }
  85. getUserMedia({
  86. video: document.getElementById('client-video'),
  87. onsuccess: function (stream) {
  88. clientStream = stream;
  89. openSocket();
  90. },
  91. onerror: function () {
  92. alert('Either you not allowed access to your microphone/webcam or another application already using it.');
  93. }
  94. });
  95. var clientStream;
  96. var global = {};
  97. </script>
  98. <!-- First peer: the offerer -->
  99. <script>
  100. /* "offerSDP" will be used by your participant! */
  101. var offerSDP, peer1;
  102. function create1stPeer() {
  103. var offerConfig = {
  104. onOfferSDP: function (sdp) {
  105. console.log('1st peer: offer sdp: ' + sdp);
  106. /* Transmit offer SDP toward 2nd peer */
  107. sendsdp(sdp, 'peer1');
  108. },
  109. onICE: function (candidate) {
  110. console.log('1st peer: candidate' + candidate);
  111. socket.send({
  112. by: 'peer1',
  113. sdpMLineIndex: candidate.sdpMLineIndex,
  114. candidate: JSON.stringify(candidate.candidate)
  115. });
  116. },
  117. onRemoteStream: function (stream) {
  118. console.log('1st peer: Wow! Got remote stream!');
  119. var video = document.getElementById('remote-video-1');
  120. if (!navigator.mozGetUserMedia) video.src = URL.createObjectURL(stream);
  121. else video.mozSrcObject = stream;
  122. video.play();
  123. },
  124. attachStream: clientStream
  125. };
  126. peer1 = RTCPeerConnection(offerConfig);
  127. }
  128. </script>
  129. <!-- Second peer: the participant -->
  130. <script>
  131. var peer2;
  132. function create2ndPeer() {
  133. var answerConfig = {
  134. onAnswerSDP: function (sdp) {
  135. console.log('2nd peer: sdp' + sdp);
  136. /* Transmit answer SDP toward 1st peer */
  137. sendsdp(sdp, 'peer2');
  138. },
  139. onICE: function (candidate) {
  140. console.log('2nd peer: candidate' + candidate);
  141. socket.send({
  142. by: 'peer2',
  143. sdpMLineIndex: candidate.sdpMLineIndex,
  144. candidate: JSON.stringify(candidate.candidate)
  145. });
  146. },
  147. onRemoteStream: function (stream) {
  148. console.log('2nd peer: Wow! Got remote stream!');
  149. var video = document.getElementById('remote-video-2');
  150. if (!navigator.mozGetUserMedia) video.src = URL.createObjectURL(stream);
  151. else video.mozSrcObject = stream;
  152. video.play();
  153. },
  154. attachStream: clientStream,
  155. /* You'll use offer SDP here */
  156. offerSDP: offerSDP
  157. };
  158. peer2 = RTCPeerConnection(answerConfig);
  159. }
  160. function sendsdp(sdp, by) {
  161. sdp = JSON.stringify(sdp);
  162. var part = parseInt(sdp.length / 3);
  163. var firstPart = sdp.slice(0, part),
  164. secondPart = sdp.slice(part, sdp.length - 1),
  165. thirdPart = '';
  166. if (sdp.length > part + part) {
  167. secondPart = sdp.slice(part, part + part);
  168. thirdPart = sdp.slice(part + part, sdp.length);
  169. }
  170. socket.send({
  171. by: by,
  172. firstPart: firstPart
  173. });
  174. socket.send({
  175. by: by,
  176. secondPart: secondPart
  177. });
  178. socket.send({
  179. by: by,
  180. thirdPart: thirdPart
  181. });
  182. }
  183. </script>