david
/
daveo-webrtc


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

    <script src="/webrtc.io.js"></script>
  </head>
  <body onload="init()">
    <div id="videos">
      <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>
      <video id="you" class="flip" autoplay></video>
    </div>
    <div id="chatbox">
      <button id="fullscreen">Enter Full Screen</button>
      <button id="newRoom">Create A New Room</button>
      <div id="messages">
      </div>
      <br>
      <input id="chatinput" type="text"/>
    </div>
    <script>
      var videos = [];
      var rooms = [1,2,3,4,5];
      var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection;

      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);
        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 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 initNewRoom() {
        var button = document.getElementById("newRoom");

        button.addEventListener('click', function(event) {

            var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
            var string_length = 8;
            var randomstring = '';
            for (var i=0; i<string_length; i++) {
              var rnum = Math.floor(Math.random() * chars.length);
              randomstring += chars.substring(rnum,rnum+1);
            }

            window.location.hash = randomstring;
            location.reload();
        })
      }


      var websocketChat = {
        send: function (message) {
          rtc._socket.send(message);
        },
        recv: function (message) {
          return message;
        },
        event: 'receive_chat_msg'
      };

      var dataChannelChat = {
        send: function (message) {
          for (var connection in rtc.dataChannels) {
            var channel = rtc.dataChannels[connection];
            channel.send(message);
          }
        },
        recv:  function (channel, message) {
          return JSON.parse(message).data;
        },
        event: 'data stream data'
      };

      function initChat() {
        var chat;

        if (rtc.dataChannelSupport) {
          console.log('initializing data channel chat');
          chat = dataChannelChat;
        } else {
          console.log('initializing websocket chat');
          chat = websocketChat;
        }

        var input = document.getElementById("chatinput");
        var room = window.location.hash.slice(1);
        var color = "#"+((1<<24)*Math.random()|0).toString(16);

        input.addEventListener('keydown', function(event) {
          var key = event.which || event.keyCode;
          if (key === 13) {
            chat.send(JSON.stringify({
              "eventName": "chat_msg",
              "data": {
              "messages": input.value,
              "room": room,
              "color": color
              }
            }));
            addToChat(input.value);
            input.value = "";
          }
        }, false);
        rtc.on(chat.event, function() {
          data = chat.recv.apply(this, arguments);
          console.log(data.color);
          addToChat(data.messages, data.color.toString(16));
        });
      }


      function init() {
        if(PeerConnection){
          rtc.createStream({"video": true, "audio": true}, function(stream) {
            document.getElementById('you').src = URL.createObjectURL(stream);
            videos.push(document.getElementById('you'));
            //rtc.attachStream(stream, 'you');
            subdivideVideos();
          });
        }else {
          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');
        }


        var room = window.location.hash.slice(1);

        rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length), room);

        rtc.on('add remote stream', function(stream, socketId) {
          console.log("ADDING REMOTE STREAM...");
          var clone = cloneVideo('you', socketId);
          document.getElementById(clone.id).setAttribute("class", "");
          rtc.attachStream(stream, clone.id);
          subdivideVideos();
        });
        rtc.on('disconnect stream', function(data) {
            console.log('remove ' + data);
            removeVideo(data);
        });
        initFullScreen();
        initNewRoom();
        initChat();
      }

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