oxsav/gist:5635084

## 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>
	<!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>© 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>