index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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 init() {
  109. if(PeerConnection){
  110. rtc.createStream('you', function(stream) {
  111. videos.push(document.getElementById('you'));
  112. rtc.attachStream(stream, 'you');
  113. subdivideVideos();
  114. });
  115. }else {
  116. 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');
  117. }
  118. var room = window.location.hash.slice(1);
  119. if (room === '') {
  120. room = Math.floor(Math.random()*rooms.length);
  121. window.location.hash = room;
  122. }
  123. //When connectiong to nodejitsu
  124. //rtc.connect("http://multiwebrtc.nodejitsu.com/", room);
  125. //When using localhost
  126. rtc.connect("ws://localhost:8001/", room);
  127. rtc.on('add remote stream', function(stream, socketId) {
  128. console.log("ADDING REMOTE STREAM...");
  129. var clone = cloneVideo('you', socketId);
  130. document.getElementById(clone.id).setAttribute("class", "");
  131. rtc.attachStream(stream, clone.id);
  132. subdivideVideos();
  133. });
  134. rtc.on('disconnect stream', function(data) {
  135. console.log('remove ' + data);
  136. removeVideo(data);
  137. });
  138. initFullScreen();
  139. initNewRoom();
  140. }
  141. window.onresize = function(event) {
  142. subdivideVideos();
  143. };
  144. </script>
  145. </body>
  146. </html>