Skip to content

Instantly share code, notes, and snippets.

@oxsav

oxsav/gist:5635084

Last active December 17, 2015 15:59
Show Gist options
  • Save oxsav/5635084 to your computer and use it in GitHub Desktop.
Save oxsav/5635084 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Socket.io tests</title>
<link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/js/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/js/bootstrap/css/docs.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<style>
/*body {*/
/*padding-top: 60px;*/
/*}*/
</style>
<!--<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span9 well">
<button id="start" class="btn btn-success"> Start </button>
<table align="center" class="table table-striped">
<tr>
<td id="local-video-container"></td>
</tr>
<hr />
<tr>
<td id="remote-videos-container"></td>
</tr>
<td>
<h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
<input type="file" id="file" disabled>
<br />
<h2 style="display: block; font-size: 1em; text-align: center;">Text Chat</h2>
<div id="chat-output"></div>
<input type="text" id="chat-input" style="font-size: 1.2em;" placeholder="chat message" disabled>
</td>
</table>
</div>
<div class="span2 well">
as
</div>
</div>
<hr />
<footer>
<p>&copy; PT Inovacao 2013</p>
</footer>
</div>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/socket.io-0.9.10.js"></script>
<script src="/js/prettify.js"></script>
<script src="/js/rtcmulti.js"></script>
<script>
var URL = ':8888/';
var extra = {
openSignalingChannel: function (config) {
var channel = 'signaling';
var sender = Math.floor(Math.random()*10000);
io.connect(URL).emit('newchannel', {
channel: channel,
sender : sender
});
var socket = io.connect(URL + channel);
console.log(socket);
socket.channel = channel;
socket.on('connect', function () {
console.log("liguei");
if (config.callback) config.callback(socket);
});
socket.send = function (message) {
console.log(message);
socket.emit('message', {
sender: sender,
data : message
});
};
socket.on('message', config.onmessage);
},
//configuraçao para conferencia chat e file transfer
session: 'audio + video + data'
//configuraçao para screen sharing
//session: 'only screen',
//direction: 'one-way'
};
</script>
<script>
//##########################################################################
var sessionid = 'signaling';
var connection = new RTCMultiConnection(sessionid, extra);
// to be alerted on data ports get open
connection.onopen = function() {
document.getElementById('chat-input').disabled = false;
document.getElementById('file').disabled = false;
console.log("abri");
console.log(extra);
}
// to be alerted on data ports get new message
connection.onmessage = function(message) {
//console.log(message);
//appendDIV(message);
appendDIV(message);
console.log(connection);
console.log(message);
}
connection.onFileProgress = function (packets) {
console.log(packets.remaining + ' packets remaining.');
if (packets.sent) console.log(packets.sent + ' packets sent.');
if (packets.received) console.log(packets.received + ' packets received.');
};
connection.onFileReceived = function (fileName) {
console.log(fileName + ' received.');
};
connection.onFileSent = function (file) {
console.log(file.name + ' sent.');
};
document.getElementById('file').onchange = function() {
var file = this.files[0];
connection.send(file);
};
var chatOutput = document.getElementById('chat-output');
function appendDIV(data) {
var div = document.createElement('div');
div.innerHTML = data;
chatOutput.insertBefore(div, chatOutput.firstChild);
div.tabIndex = 0;
div.focus();
}
document.getElementById('chat-input').onkeypress = function(e) {
if (e.keyCode !== 13 || !this.value) return;
//var message = JSON.parse('{ "username" : "'+ username +'", "message": "'+ this.value +'" }');
appendDIV(this.value);
connection.send(this.value);
this.value = '';
this.focus();
};
$("#start").click( function() {
connection.open(sessionid);
});
//$("#join").click( function() {
connection.connect(sessionid);
//});
connection.onstream = function (stream) {
if (stream.type === 'remote') {
var mediaElement = stream.mediaElement;
console.log("esta");
console.log(mediaElement);
if (stream.direction !== RTCDirection.OneWay) {
var e = $(mediaElement);
e.attr('width','200px');
e.attr('height','200px');
$("#remote-videos-container").append(mediaElement);
} else document.getElementById('remote-videos-container').appendChild(mediaElement);
mediaElement.controls = true;
}
if (stream.type === 'local') {
mediaElement = stream.mediaElement;
document.getElementById('local-video-container').appendChild(mediaElement);
mediaElement.controls = true;
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment