new demo added and link to the demo page is now correct

webRTC-io · Feb 21, 2013 · 7c6f3dd · danielkutik · Feb 22, 2013 · dennismartensson
1 parent 8ef0dce
commit 7c6f3dd
Show file tree

Hide file tree

Showing 7 changed files with 805 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 #webrtc.io-demo
 ==============
 
-You can have a look at the [demo](http://bit.ly/webrtcio)
+You can have a look at the [demo](http://webrtc.dennis.is/)
 
 ##Instructions on how to setup the demo:
 

diff --git a/site/fullscrean.png b/site/fullscrean.png
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,40 @@
+<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">
+      <div id="messages">
+      </div>
+      <input id="chatinput" type="text" placeholder="Message:"/>
+    </div>
+
+    <div class="buttonBox">
+      <div id="fullscreen" class="button">Enter Full Screen</div>
+      <div id="newRoom" class="button">Create A New Room</div>
+    </div>
+
+    <script src="/script.js"></script>
+    <script type="text/javascript">
+
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-31155783-1']);
+    _gaq.push(['_setDomainName', 'dennis.is']);
+    _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>
+  </body>
+</html>
diff --git a/site/script.js b/site/script.js
@@ -0,0 +1,203 @@
+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).split('#')[0], 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();
+};
diff --git a/site/server.js b/site/server.js
@@ -0,0 +1,66 @@
+var app = require('express')();
+var server = require('http').createServer(app);
+var webRTC = require('webrtc.io').listen(server);
+
+server.listen(8000);
+
+
+
+app.get('/', function(req, res) {
+  res.sendfile(__dirname + '/index.html');
+});
+
+app.get('/style.css', function(req, res) {
+  res.sendfile(__dirname + '/style.css');
+});
+
+app.get('/fullscrean.png', function(req, res) {
+  res.sendfile(__dirname + '/fullscrean.png');
+});
+
+app.get('/script.js', function(req, res) {
+  res.sendfile(__dirname + '/script.js');
+});
+
+app.get('/webrtc.io.js', function(req, res) {
+  res.sendfile(__dirname + '/webrtc.io.js');
+});
+
+
+webRTC.rtc.on('connect', function(rtc) {
+  //Client connected
+});
+
+webRTC.rtc.on('send answer', function(rtc) {
+  //answer sent
+});
+
+webRTC.rtc.on('disconnect', function(rtc) {
+  //Client disconnect 
+});
+
+webRTC.rtc.on('chat_msg', function(data, socket) {
+  var roomList = webRTC.rtc.rooms[data.room] || [];
+
+  for (var i = 0; i < roomList.length; i++) {
+    var socketId = roomList[i];
+
+    if (socketId !== socket.id) {
+      var soc = webRTC.rtc.getSocket(socketId);
+
+      if (soc) {
+        soc.send(JSON.stringify({
+          "eventName": "receive_chat_msg",
+          "data": {
+            "messages": data.messages,
+            "color": data.color
+          }
+        }), function(error) {
+          if (error) {
+            console.log(error);
+          }
+        });
+      }
+    }
+  }
+});