index.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <html>
  2. <head>
  3. <title>Example webrtc.io</title>
  4. <link type="text/css" href="/style.css" rel="stylesheet"></link>
  5. <script src="/webrtc.io.js"></script>
  6. </head>
  7. <body onload="init()">
  8. <div id="videos">
  9. <a href="https://github.com/webRTC"><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>
  10. <video id="you" class="flip" autoplay></video>
  11. </div>
  12. <div id="chatbox">
  13. <button id="fullscreen">Enter Full Screen</button>
  14. <button id="newRoom">Create A New Room</button>
  15. <div id="messages">
  16. </div>
  17. <br>
  18. <input id="chatinput" type="text"/>
  19. </div>
  20. <script>
  21. var videos = [];
  22. var rooms = [1,2,3,4,5];
  23. var PeerConnection = window.PeerConnection || window.webkitPeerConnection00;
  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. 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 addToChat(msg, color) {
  73. var messages = document.getElementById('messages');
  74. msg = sanitize(msg);
  75. if (color) {
  76. msg = '<span style="color: ' + color + '; padding-left: 15px">' + msg + '</span>';
  77. } else {
  78. msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
  79. }
  80. messages.innerHTML = messages.innerHTML + msg + '<br>';
  81. messages.scrollTop = 10000;
  82. }
  83. function sanitize(msg) {
  84. return msg.replace(/</g, '&lt;');
  85. }
  86. function initFullScreen() {
  87. var button = document.getElementById("fullscreen");
  88. button.addEventListener('click', function(event) {
  89. var elem = document.getElementById("videos");
  90. //show full screen
  91. elem.webkitRequestFullScreen();
  92. });
  93. }
  94. function initNewRoom() {
  95. var button = document.getElementById("newRoom");
  96. button.addEventListener('click', function(event) {
  97. var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  98. var string_length = 8;
  99. var randomstring = '';
  100. for (var i=0; i<string_length; i++) {
  101. var rnum = Math.floor(Math.random() * chars.length);
  102. randomstring += chars.substring(rnum,rnum+1);
  103. }
  104. window.location.hash = randomstring;
  105. location.reload();
  106. })
  107. }
  108. function initChat() {
  109. var input = document.getElementById("chatinput");
  110. var room = window.location.hash.slice(1);
  111. var color = "#"+((1<<24)*Math.random()|0).toString(16);
  112. input.addEventListener('keydown', function(event) {
  113. var key = event.which || event.keyCode;
  114. if (key === 13) {
  115. rtc._socket.send(JSON.stringify({
  116. "eventName": "chat_msg",
  117. "messages": input.value,
  118. "room": room,
  119. "color": color
  120. }), function(error) {
  121. if (error) {
  122. console.log(error);
  123. }
  124. });
  125. addToChat(input.value);
  126. input.value = "";
  127. }
  128. }, false);
  129. rtc.on('receive_chat_msg', function(data) {
  130. console.log(data.color);
  131. addToChat(data.messages, data.color.toString(16));
  132. });
  133. }
  134. function init() {
  135. if(PeerConnection){
  136. rtc.createStream({"video": true, "audio": true}, function(stream) {
  137. document.getElementById('you').src = URL.createObjectURL(stream);
  138. videos.push(document.getElementById('you'));
  139. rtc.attachStream(stream, 'you');
  140. subdivideVideos();
  141. });
  142. }else {
  143. alert('Your browser is not supported or you have to turn on flags. In chrome you go to chrome://flags and turn on Enable PeerConnection remember to restart chrome');
  144. }
  145. var room = window.location.hash.slice(1);
  146. //When using localhost
  147. rtc.connect("ws://localhost:8000/", room);
  148. rtc.on('add remote stream', function(stream, socketId) {
  149. console.log("ADDING REMOTE STREAM...");
  150. var clone = cloneVideo('you', socketId);
  151. document.getElementById(clone.id).setAttribute("class", "");
  152. rtc.attachStream(stream, clone.id);
  153. subdivideVideos();
  154. });
  155. rtc.on('disconnect stream', function(data) {
  156. console.log('remove ' + data);
  157. removeVideo(data);
  158. });
  159. initFullScreen();
  160. initNewRoom();
  161. initChat();
  162. }
  163. window.onresize = function(event) {
  164. subdivideVideos();
  165. };
  166. </script>
  167. </body>
  168. </html>