<!DOCTYPE html>
<html>
<head>
<title>Example webrtc.io</title>
<link type="text/css" href="/style.css" rel="stylesheet"></link>
<script src="/socket.io/socket.io.js"></script>
<script src="/webrtc.io/webrtc.io.js"></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>
<button id="newRoom">Create A New Room</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, '<');
}
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();
})
}
function init() {
rtc.createStream('you', function(stream) {
videos.push(document.getElementById('you'));
rtc.attachStream(stream, 'you');
subdivideVideos();
});
var room = window.location.hash.slice(1);
//When connectiong to nodejitsu
//rtc.connect("http://multiwebrtc.nodejitsu.com/", room);
//When using lokalhost
rtc.connect("http://localhost:8000/", room);
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();
initNewRoom();
}
window.onresize = function(event) {
subdivideVideos();
};
</script>
</body>
</html>