david
/
daveo-webrtc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<!DOCTYPE html>
<html>
  <head>
    <title>Example webrtc.io</title>
    <link type="text/css" href="/style.css" rel="stylesheet"></link>

    <script src="http://localhost/socket.io/socket.io.js"></script>
    <script src="/io.js"></script>
  </head>
  <body onload="init()">
    <div id="videos">
      <video id="you" autoplay></video>
    </div>
    <div id="chatbox">
      <div id="messages">
      </div>
      <div id="chat">
        <input id="chatinput" type="text"/>
      </div>
    </div>
    <script>
      var videos = [];

      function getNumPerRow() {
        var len = videos.length;
        var biggest;

        // Ensure length is even for better division.
        if (len % 2 === 1) {
          len++;
        }

        biggest = Math.ceil(Math.sqrt(len));
        while (len % biggest !== 0) {
          biggest++;
        }
        return biggest;
      }

      function subdivideVideos() {
        var perRow = getNumPerRow();
        var numInRow = 0;
        for (var i = 0, len = videos.length; i < len; i++) {
          var video = videos[i];
          setWH(video, i);
          numInRow = (numInRow + 1) % perRow;
        }
      }

      function setWH(video, i) {
        var perRow = getNumPerRow();
        var perColumn = Math.ceil(videos.length / perRow);
        var width = Math.floor((window.innerWidth - 200) / perRow);
        var height = Math.floor(window.innerHeight / perColumn);
        console.log(width, height);
        video.width = width;
        video.height = height;
        video.style.position = "absolute";
        video.style.left = (i % perRow) * width + "px";
        video.style.top = Math.floor(i / perRow) * height + "px";
      }

      function cloneVideo(domId, socketId) {
        var video = document.getElementById(domId);
        var clone = video.cloneNode(false);
        clone.id = "remote" + socketId;
        document.getElementById('videos').appendChild(clone);
        videos.push(clone);
        return clone;
      }
      function removeVideo(socketId) {
        var video = document.getElementById('remote' + socketId);
        if (video) {
            videos.splice(videos.indexOf(video), 1);
            video.parentNode.removeChild(video);
        }
      }

      function initChat() {
        var input = document.getElementById("chatinput");
        input.addEventListener('keydown', function(event) {
          var key = event.which || event.keyCode;
          if (key === 13) {
            rtc._socket.emit('chat msg', input.value);
            addToChat(input.value);
            input.value = "";
          }
        }, false);
        rtc._socket.on('receive chat msg', function(data) {
          console.log(data.color);
          addToChat(data.msg, data.color.toString(16));
        });
      }

      function addToChat(msg, color) {
        var messages = document.getElementById('messages');
        msg = sanitize(msg);
        if (color) {
          msg = '<span style="color: #' + color + ';">' + msg + '</span>';
        } else {
          msg = "<strong>" + msg + "</strong>";
        }
        messages.innerHTML = messages.innerHTML + msg + '<br>';
      }

      function sanitize(msg) {
        return msg.replace(/</g, '&lt;');
      }

      function init() {
        rtc.createStream('you', function(stream) {
          videos.push(document.getElementById('you'));
          rtc.attachStream(stream, 'you');
          subdivideVideos();
        });

        rtc.connect("http://localhost/");
        rtc.on('add remote stream', function(stream, socketId) {
          console.log("ADDING REMOTE STREAM...");
          var clone = cloneVideo('you', socketId);
          rtc.attachStream(stream, clone.id);
          subdivideVideos();
        });
        rtc.on('disconnect stream', function(data) {
            console.log('remove ' + data);
            removeVideo(data);
        });
        initChat();
      }
      
      function onClose(data) {
//        video.parentNode.removeChild(video);
      }

      window.onresize = function(event) {
        subdivideVideos();
      };
    </script>
  </body>
</html>