Skip to content

Instantly share code, notes, and snippets.

@StasKoval

StasKoval/index.html

Created December 26, 2014 16:03
Show Gist options
  • Save StasKoval/49aadce8e4cd8ff1eeb9 to your computer and use it in GitHub Desktop.
Save StasKoval/49aadce8e4cd8ff1eeb9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/underscore-min.js"></script>
<script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="logo"></div>
<div class="logo-text">RESUMEO $HARES</div>
<ul class="nav navbar-nav navbar-right">
<div class="logo-text"><span id="inRoomName"></span></div>
<li class="tools">
<a href="#"></a>
</li>
<li class="log_in">
<a href="#"></a>
</li>
</ul>
</div>
</nav>
<div class="content">
<div class="container ">
<div id="videos">
</div>
<!--<div id="register">-->
<!--<label for="name">Name</label><input id="name">-->
<!--<button id="join" onclick="register()">Join</button>-->
<!--<label for="asBroadcaster">as broadcaster</label><input type="checkbox" id="asBroadcaster" onclick="broadcasterMode()">-->
<!--<input id="broadcasterPassword" style="display:none">-->
<!--</div>-->
<!--<div id="chat" style="display:none">-->
<!--<span id="inRoomName"></span>-->
<!--<br>-->
<!--<label for="chatMessage">Message </label> <input id="chatMessage" onkeyup="onChatMessageKeyup(event)">-->
<!--<hr>-->
<!--</div>-->
<div id="register">
<div class="create-user">
<input class="create-user" placeholder="Name" id="name">
<button class="create-button" id="join" onclick="register()">JOIN</button>
</div>
<br>
<label for="asBroadcaster">as broadcaster </label> <input type="checkbox" id="asBroadcaster" onclick="broadcasterMode()">
<br>
<input class="create-user" id="broadcasterPassword" style="display:none">
</div>
<div id="chat" style="display:none">
<div class="dialog">
<div class="comments-history">
</div>
<div class="new-comment">
<input class="input-comment" id="chatMessage" onkeyup="onChatMessageKeyup(event)" placeholder="Write something cool..." >
</div>
</div>
</div>
</div>
</div>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var socket = io(),
participants = {},
name, id, peer, calls = [], isBroadcaster = false, broadcasterStream = null,
chat = document.getElementById('chat');
var sdpConstraints = navigator.webkitGetUserMedia
? {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true,
MozDontOfferDataChannel: true
}
}
: {};
window.onbeforeunload = function() {
socket.close();
};
socket.on('chat', function(data) {
var div = document.createElement('div');
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
div.innerHTML = '<div class="comment"><div class="row"><div class="col-md-2"><div class="comment-user">'+ data.sender +'</div><div class="comment-date">['+ h + ":" + m + ":" + s +']:</div></div><div class="col-md-10"><div class="comment-text">' + data.text + '</div></div></div></div> '
// '<b>' + data.sender + '</b>: ' + data.text;
document.getElementsByClassName('comments-history')[0].appendChild(div);
// chat.appendChild(div);
});
socket.on('message', function(message) {
console.log('Received message: ', message);
if(!id && message.type !== 'roomReady') {
return;
}
switch (message.type) {
case 'roomReady':
onRoomReady(message);
break;
case 'newParticipantArrived':
onNewParticipant(message);
break;
case 'participantLeft':
onParticipantLeft(message);
break;
default:
console.error('Unrecognized message', message);
}
});
function broadcasterMode() {
var asBroadcaster = document.getElementById('asBroadcaster');
document.getElementById('broadcasterPassword').style.display = asBroadcaster.checked ? 'inline' : 'none';
}
function register() {
name = document.getElementById('name').value;
document.getElementById('register').style.display = 'none';
chat.style.display = 'block';
document.getElementById('inRoomName').innerText = name;
var asBroadcaster = document.getElementById('asBroadcaster');
document.getElementById('broadcasterPassword').style.display = asBroadcaster.checked ? 'inline' : 'none';
sendMessage({
type: 'joinRoom',
name: name,
broadcaster: asBroadcaster.checked ? document.getElementById('broadcasterPassword').value : null
});
}
function onChatMessageKeyup(e) {
if(e.keyCode === 13) {
var text = document.getElementById('chatMessage').value;
document.getElementById('chatMessage').value = '';
text.length && sendMessage({
type: 'chat',
text: text,
userId: id
});
}
}
function onRoomReady(message) {
console.log(name + " registered in room");
id = message.userId;
peer = new Peer(message.userId, {
key: 'lwjd5qra8257b9',
debug: 0,
config: {
'iceServers': [{
url: 'stun:79.135.200.66:3478'
}]
}
});
peer.on('open', function(){
console.log('Peer ready');
});
peer.on('error', function(err){
console.log('Peer error:' ,err);
});
peer.on('call', function(call) {
var video = document.createElement('video');
video.id = call.peer;
call.on('stream', function(stream){
video.src = URL.createObjectURL(stream);
video.autoplay = true;
video.controls = true;
document.getElementById('videos').appendChild(video);
});
call.on('disconnected', function(){
document.getElementById('videos').removeChild(video);
});
call.on('error', function(err){
console.log('Answer error:' ,err);
});
call.answer();
});
if(message.isBroadcaster) {
isBroadcaster = true;
navigator.getUserMedia({
audio: {
mandatory: {},
optional: [
//{googDucking:false},
{
googEchoCancellation: true
}, {
googAutoGainControl: true
}, {
googNoiseSupression: true
}, {
googHighpassFilter: true
}, {
googAudioMirroring: false
}, {
googNoisesuppression2: true
}, {
googEchoCancellation2: true
}, {
googAutoGainControl2: true
}, {
chromeRenderToAssociatedSink: true
}]
},
video: {
mandatory: {
maxWidth: 320,
maxHeight: 240,
maxFrameRate:20
},
optional: []
}
}, function (stream) {
broadcasterStream = stream;
var video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.volume = 0.1
video.autoplay = true;
video.controls = true;
document.getElementById('videos').appendChild(video);
_.each(message.participants, function(participant) {
var call = peer.call(participant.id, broadcasterStream, sdpConstraints);
calls.push(call);
call.on('error', function(err){
console.log('Call error:' ,err);
});
});
}, function(err) {
console.log(err);
});
}
_.each(message.participants, function(participant) {
participants[participant.id] = participant;
});
}
function onNewParticipant(message) {
participants[message.user.id] = message.user;
if(isBroadcaster) {
var call = peer.call(message.user.id, broadcasterStream, sdpConstraints);
calls.push(call);
}
}
function onParticipantLeft(message) {
console.log('Participant ' + message.user.name + ' left');
var video = document.getElementById(message.user.id);
video && document.getElementById('videos').removeChild(video);
delete participants[message.user.id];
}
function sendMessage(message) {
socket.emit('message', message);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment