Permalink
Browse files

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

  • Loading branch information...
1 parent 8ef0dce commit 7c6f3ddda3315b652652d551eb58e7ffdd7dcd51 Dennis Mårtensson committed Feb 21, 2013
Showing with 805 additions and 1 deletion.
  1. +1 −1 README.md
  2. BIN site/fullscrean.png
  3. +40 −0 site/index.html
  4. +203 −0 site/script.js
  5. +66 −0 site/server.js
  6. +103 −0 site/style.css
  7. +392 −0 site/webrtc.io.js
View
@@ -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:
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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']);
@danielkutik
danielkutik Feb 22, 2013 Contributor

Google Analytics should be removed

@dennismartensson
dennismartensson Feb 22, 2013 Member

This is now done thank you for telling me totally forgot it!

+ _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>
View
@@ -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();
+};
View
@@ -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);
+ }
+ });
+ }
+ }
+ }
+});
Oops, something went wrong.

0 comments on commit 7c6f3dd

Please sign in to comment.