david
/
daveo-webrtc


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

    <script src="http://multiwebrtc.nodejitsu.com/socket.io/socket.io.js"></script>
    <script src="/io.js"></script>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31155783-4']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

  </head>
  <body onload="init()">
    <div id="videos">
      <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>
      <video id="you" autoplay></video>
    </div>
    <div id="chatbox">
      <button id="fullscreen">Enter Full Screen</button>
      <div id="messages">
      </div>
      <br>
      <input id="chatinput" type="text"/>
    </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) / perRow);
        var height = Math.floor((window.innerHeight - 190) / 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 + '; padding-left: 15px">' + msg + '</span>';
        } else {
          msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
        }
        messages.innerHTML = messages.innerHTML + msg + '<br>';
        messages.scrollTop = 10000;
      }

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

      function initFullScreen(){ 
        var button = document.getElementById("fullscreen");
        button.addEventListener('click', function(event) {
          var elem = document.getElementById("videos"); 
          //show full screen 
          elem.webkitRequestFullScreen();
        });
      } 

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

        rtc.connect("http://multiwebrtc.nodejitsu.com/");
        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();
        initFullScreen();
      }
      
      function onClose(data) {
//        video.parentNode.removeChild(video);
      }

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