index.html 5.5 KB

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