Skip to content

Commit 7c6f3dd

Browse files
author
Dennis Mårtensson
committed
new demo added and link to the demo page is now correct
1 parent 8ef0dce commit 7c6f3dd

File tree

7 files changed

+805
-1
lines changed

7 files changed

+805
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#webrtc.io-demo
22
==============
33

4-
You can have a look at the [demo](http://bit.ly/webrtcio)
4+
You can have a look at the [demo](http://webrtc.dennis.is/)
55

66
##Instructions on how to setup the demo:
77

‎site/fullscrean.png

5.07 KB
Loading

‎site/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<head>
3+
<title>Example webrtc.io</title>
4+
<link type="text/css" href="/style.css" rel="stylesheet"></link>
5+
6+
<script src="/webrtc.io.js"></script>
7+
</head>
8+
<body onload="init()">
9+
<div id="videos">
10+
<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>
11+
<video id="you" class="flip" autoplay></video>
12+
</div>
13+
<div id="chatbox">
14+
<div id="messages">
15+
</div>
16+
<input id="chatinput" type="text" placeholder="Message:"/>
17+
</div>
18+
19+
<div class="buttonBox">
20+
<div id="fullscreen" class="button">Enter Full Screen</div>
21+
<div id="newRoom" class="button">Create A New Room</div>
22+
</div>
23+
24+
<script src="/script.js"></script>
25+
<script type="text/javascript">
26+
27+
var _gaq = _gaq || [];
28+
_gaq.push(['_setAccount', 'UA-31155783-1']);
29+
_gaq.push(['_setDomainName', 'dennis.is']);
30+
_gaq.push(['_trackPageview']);
31+
32+
(function() {
33+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
34+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
35+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
36+
})();
37+
38+
</script>
39+
</body>
40+
</html>

‎site/script.js

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
var videos = [];
2+
var rooms = [1, 2, 3, 4, 5];
3+
var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection;
4+
5+
function getNumPerRow() {
6+
var len = videos.length;
7+
var biggest;
8+
9+
// Ensure length is even for better division.
10+
if(len % 2 === 1) {
11+
len++;
12+
}
13+
14+
biggest = Math.ceil(Math.sqrt(len));
15+
while(len % biggest !== 0) {
16+
biggest++;
17+
}
18+
return biggest;
19+
}
20+
21+
function subdivideVideos() {
22+
var perRow = getNumPerRow();
23+
var numInRow = 0;
24+
for(var i = 0, len = videos.length; i < len; i++) {
25+
var video = videos[i];
26+
setWH(video, i);
27+
numInRow = (numInRow + 1) % perRow;
28+
}
29+
}
30+
31+
function setWH(video, i) {
32+
var perRow = getNumPerRow();
33+
var perColumn = Math.ceil(videos.length / perRow);
34+
var width = Math.floor((window.innerWidth) / perRow);
35+
var height = Math.floor((window.innerHeight - 190) / perColumn);
36+
video.width = width;
37+
video.height = height;
38+
video.style.position = "absolute";
39+
video.style.left = (i % perRow) * width + "px";
40+
video.style.top = Math.floor(i / perRow) * height + "px";
41+
}
42+
43+
function cloneVideo(domId, socketId) {
44+
var video = document.getElementById(domId);
45+
var clone = video.cloneNode(false);
46+
clone.id = "remote" + socketId;
47+
document.getElementById('videos').appendChild(clone);
48+
videos.push(clone);
49+
return clone;
50+
}
51+
52+
function removeVideo(socketId) {
53+
var video = document.getElementById('remote' + socketId);
54+
if(video) {
55+
videos.splice(videos.indexOf(video), 1);
56+
video.parentNode.removeChild(video);
57+
}
58+
}
59+
60+
function addToChat(msg, color) {
61+
var messages = document.getElementById('messages');
62+
msg = sanitize(msg);
63+
if(color) {
64+
msg = '<span style="color: ' + color + '; padding-left: 15px">' + msg + '</span>';
65+
} else {
66+
msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
67+
}
68+
messages.innerHTML = messages.innerHTML + msg + '<br>';
69+
messages.scrollTop = 10000;
70+
}
71+
72+
function sanitize(msg) {
73+
return msg.replace(/</g, '&lt;');
74+
}
75+
76+
function initFullScreen() {
77+
var button = document.getElementById("fullscreen");
78+
button.addEventListener('click', function(event) {
79+
var elem = document.getElementById("videos");
80+
//show full screen
81+
elem.webkitRequestFullScreen();
82+
});
83+
}
84+
85+
function initNewRoom() {
86+
var button = document.getElementById("newRoom");
87+
88+
button.addEventListener('click', function(event) {
89+
90+
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
91+
var string_length = 8;
92+
var randomstring = '';
93+
for(var i = 0; i < string_length; i++) {
94+
var rnum = Math.floor(Math.random() * chars.length);
95+
randomstring += chars.substring(rnum, rnum + 1);
96+
}
97+
98+
window.location.hash = randomstring;
99+
location.reload();
100+
})
101+
}
102+
103+
104+
var websocketChat = {
105+
send: function(message) {
106+
rtc._socket.send(message);
107+
},
108+
recv: function(message) {
109+
return message;
110+
},
111+
event: 'receive_chat_msg'
112+
};
113+
114+
var dataChannelChat = {
115+
send: function(message) {
116+
for(var connection in rtc.dataChannels) {
117+
var channel = rtc.dataChannels[connection];
118+
channel.send(message);
119+
}
120+
},
121+
recv: function(channel, message) {
122+
return JSON.parse(message).data;
123+
},
124+
event: 'data stream data'
125+
};
126+
127+
function initChat() {
128+
var chat;
129+
130+
if(rtc.dataChannelSupport) {
131+
console.log('initializing data channel chat');
132+
chat = dataChannelChat;
133+
} else {
134+
console.log('initializing websocket chat');
135+
chat = websocketChat;
136+
}
137+
138+
var input = document.getElementById("chatinput");
139+
var room = window.location.hash.slice(1);
140+
var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
141+
142+
input.addEventListener('keydown', function(event) {
143+
var key = event.which || event.keyCode;
144+
if(key === 13) {
145+
chat.send(JSON.stringify({
146+
"eventName": "chat_msg",
147+
"data": {
148+
"messages": input.value,
149+
"room": room,
150+
"color": color
151+
}
152+
}));
153+
addToChat(input.value);
154+
input.value = "";
155+
}
156+
}, false);
157+
rtc.on(chat.event, function() {
158+
data = chat.recv.apply(this, arguments);
159+
console.log(data.color);
160+
addToChat(data.messages, data.color.toString(16));
161+
});
162+
}
163+
164+
165+
function init() {
166+
if(PeerConnection) {
167+
rtc.createStream({
168+
"video": true,
169+
"audio": true
170+
}, function(stream) {
171+
document.getElementById('you').src = URL.createObjectURL(stream);
172+
videos.push(document.getElementById('you'));
173+
//rtc.attachStream(stream, 'you');
174+
subdivideVideos();
175+
});
176+
} else {
177+
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');
178+
}
179+
180+
181+
var room = window.location.hash.slice(1);
182+
183+
rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], room);
184+
185+
rtc.on('add remote stream', function(stream, socketId) {
186+
console.log("ADDING REMOTE STREAM...");
187+
var clone = cloneVideo('you', socketId);
188+
document.getElementById(clone.id).setAttribute("class", "");
189+
rtc.attachStream(stream, clone.id);
190+
subdivideVideos();
191+
});
192+
rtc.on('disconnect stream', function(data) {
193+
console.log('remove ' + data);
194+
removeVideo(data);
195+
});
196+
initFullScreen();
197+
initNewRoom();
198+
initChat();
199+
}
200+
201+
window.onresize = function(event) {
202+
subdivideVideos();
203+
};

‎site/server.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
var app = require('express')();
2+
var server = require('http').createServer(app);
3+
var webRTC = require('webrtc.io').listen(server);
4+
5+
server.listen(8000);
6+
7+
8+
9+
app.get('/', function(req, res) {
10+
res.sendfile(__dirname + '/index.html');
11+
});
12+
13+
app.get('/style.css', function(req, res) {
14+
res.sendfile(__dirname + '/style.css');
15+
});
16+
17+
app.get('/fullscrean.png', function(req, res) {
18+
res.sendfile(__dirname + '/fullscrean.png');
19+
});
20+
21+
app.get('/script.js', function(req, res) {
22+
res.sendfile(__dirname + '/script.js');
23+
});
24+
25+
app.get('/webrtc.io.js', function(req, res) {
26+
res.sendfile(__dirname + '/webrtc.io.js');
27+
});
28+
29+
30+
webRTC.rtc.on('connect', function(rtc) {
31+
//Client connected
32+
});
33+
34+
webRTC.rtc.on('send answer', function(rtc) {
35+
//answer sent
36+
});
37+
38+
webRTC.rtc.on('disconnect', function(rtc) {
39+
//Client disconnect
40+
});
41+
42+
webRTC.rtc.on('chat_msg', function(data, socket) {
43+
var roomList = webRTC.rtc.rooms[data.room] || [];
44+
45+
for (var i = 0; i < roomList.length; i++) {
46+
var socketId = roomList[i];
47+
48+
if (socketId !== socket.id) {
49+
var soc = webRTC.rtc.getSocket(socketId);
50+
51+
if (soc) {
52+
soc.send(JSON.stringify({
53+
"eventName": "receive_chat_msg",
54+
"data": {
55+
"messages": data.messages,
56+
"color": data.color
57+
}
58+
}), function(error) {
59+
if (error) {
60+
console.log(error);
61+
}
62+
});
63+
}
64+
}
65+
}
66+
});

0 commit comments

Comments
 (0)