index.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <html>
  2. <head>
  3. <title>Example webrtc.io</title>
  4. <link type="text/css" href="/style.css" rel="stylesheet"></link>
  5. <script src="/socket.io/socket.io.js"></script>
  6. <script src="/webrtc.io/webrtc.io.js"></script>
  7. </head>
  8. <body onload="init()">
  9. <div id="videos">
  10. <a href="https://github.com/dennismartensson/webrtc.io-demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
  11. <video id="you" autoplay></video>
  12. </div>
  13. <div id="chatbox">
  14. <button id="fullscreen">Enter Full Screen</button>
  15. <button id="newRoom">Create A New Room</button>
  16. <div id="messages">
  17. </div>
  18. <br>
  19. <input id="chatinput" type="text"/>
  20. </div>
  21. <script>
  22. var videos = [];
  23. function getNumPerRow() {
  24. var len = videos.length;
  25. var biggest;
  26. // Ensure length is even for better division.
  27. if (len % 2 === 1) {
  28. len++;
  29. }
  30. biggest = Math.ceil(Math.sqrt(len));
  31. while (len % biggest !== 0) {
  32. biggest++;
  33. }
  34. return biggest;
  35. }
  36. function subdivideVideos() {
  37. var perRow = getNumPerRow();
  38. var numInRow = 0;
  39. for (var i = 0, len = videos.length; i < len; i++) {
  40. var video = videos[i];
  41. setWH(video, i);
  42. numInRow = (numInRow + 1) % perRow;
  43. }
  44. }
  45. function setWH(video, i) {
  46. var perRow = getNumPerRow();
  47. var perColumn = Math.ceil(videos.length / perRow);
  48. var width = Math.floor((window.innerWidth) / perRow);
  49. var height = Math.floor((window.innerHeight - 190) / perColumn);
  50. console.log(width, height);
  51. video.width = width;
  52. video.height = height;
  53. video.style.position = "absolute";
  54. video.style.left = (i % perRow) * width + "px";
  55. video.style.top = Math.floor(i / perRow) * height + "px";
  56. }
  57. function cloneVideo(domId, socketId) {
  58. var video = document.getElementById(domId);
  59. var clone = video.cloneNode(false);
  60. clone.id = "remote" + socketId;
  61. document.getElementById('videos').appendChild(clone);
  62. videos.push(clone);
  63. return clone;
  64. }
  65. function removeVideo(socketId) {
  66. var video = document.getElementById('remote' + socketId);
  67. if (video) {
  68. videos.splice(videos.indexOf(video), 1);
  69. video.parentNode.removeChild(video);
  70. }
  71. }
  72. function initChat() {
  73. var input = document.getElementById("chatinput");
  74. input.addEventListener('keydown', function(event) {
  75. var key = event.which || event.keyCode;
  76. if (key === 13) {
  77. rtc._socket.emit('chat msg', input.value);
  78. addToChat(input.value);
  79. input.value = "";
  80. }
  81. }, false);
  82. rtc._socket.on('receive chat msg', function(data) {
  83. console.log(data.color);
  84. addToChat(data.msg, data.color.toString(16));
  85. });
  86. }
  87. function addToChat(msg, color) {
  88. var messages = document.getElementById('messages');
  89. msg = sanitize(msg);
  90. if (color) {
  91. msg = '<span style="color: #' + color + '; padding-left: 15px">' + msg + '</span>';
  92. } else {
  93. msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
  94. }
  95. messages.innerHTML = messages.innerHTML + msg + '<br>';
  96. messages.scrollTop = 10000;
  97. }
  98. function sanitize(msg) {
  99. return msg.replace(/</g, '&lt;');
  100. }
  101. function initFullScreen() {
  102. var button = document.getElementById("fullscreen");
  103. button.addEventListener('click', function(event) {
  104. var elem = document.getElementById("videos");
  105. //show full screen
  106. elem.webkitRequestFullScreen();
  107. });
  108. }
  109. function initNewRoom() {
  110. var button = document.getElementById("newRoom");
  111. button.addEventListener('click', function(event) {
  112. var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  113. var string_length = 8;
  114. var randomstring = '';
  115. for (var i=0; i<string_length; i++) {
  116. var rnum = Math.floor(Math.random() * chars.length);
  117. randomstring += chars.substring(rnum,rnum+1);
  118. }
  119. window.location.hash = randomstring;
  120. location.reload();
  121. })
  122. }
  123. function init() {
  124. rtc.createStream('you', function(stream) {
  125. videos.push(document.getElementById('you'));
  126. rtc.attachStream(stream, 'you');
  127. subdivideVideos();
  128. });
  129. var room = window.location.hash.slice(1);
  130. var rooms = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
  131. if (room === '') {
  132. room = Math.floor(Math.random()*rooms.length);
  133. window.location.hash = room;
  134. }
  135. //When connectiong to nodejitsu
  136. //rtc.connect("http://multiwebrtc.nodejitsu.com/", room);
  137. //When using localhost
  138. rtc.connect("http://localhost:8000/", room);
  139. rtc.on('add remote stream', function(stream, socketId) {
  140. console.log("ADDING REMOTE STREAM...");
  141. var clone = cloneVideo('you', socketId);
  142. rtc.attachStream(stream, clone.id);
  143. subdivideVideos();
  144. });
  145. rtc.on('disconnect stream', function(data) {
  146. console.log('remove ' + data);
  147. removeVideo(data);
  148. });
  149. initChat();
  150. initFullScreen();
  151. initNewRoom();
  152. }
  153. window.onresize = function(event) {
  154. subdivideVideos();
  155. };
  156. </script>
  157. </body>
  158. </html>