first

1 files changed, 249 insertions, 0 deletions

diff --git a/public/javascripts/client.js b/public/javascripts/client.js
new file mode 100644
index 0000000..793ae89
--- /dev/null
+++ b/public/javascripts/client.js
@@ -0,0 +1,249 @@
+var webcam_videos = [];
+var chat_users = [];
+var webcam_width = 130;
+var webcam_height = 90;
+var peerConnection;		
+var websocketChat = {
+		send: function (message) {
+			rtc._socket.send(message);
+		},
+		recv: function (message) {
+			return message;
+		},
+		event: 'receive_chat_msg'
+};
+var dataChannelChat = {
+		broadcast: function(message) {
+			for(var connection in rtc.dataChannels) {
+				var channel = rtc.dataChannels[connection];
+				if (rtc.connection_ok_to_send[connection]) {
+					channel.send(message);
+				} else {
+					console.log("unable to send message to " + connection);
+				}
+			}
+		},
+		send: function(connection, message) {
+			var channel = rtc.dataChannels[connection];
+			if (rtc.connection_ok_to_send[connection]) {
+				channel.send(message);
+			} else {
+				console.log("unable to send message to " + connection);
+			}
+		},
+		recv: function(channel, message) {
+			return JSON.parse(message).data;
+		},
+		event: 'data stream data'
+};
+
+var ppChat = {
+	init:function(){
+		$('#chat-wrapper').window('open');				
+	},
+	addmsg_to_board : function(username, msg, color) {
+			var messages = $('#msgboard');
+			msg = ppChat.sanitize(msg);
+			if(color) {
+				msg = '<span style="color: ' + color + '; padding-left: 15px;">' + username + ' : </span>' + '<span style="color: ' + color + '; padding-left: 10px">' + msg + '</span>';
+			} else {
+				msg = '<span style="color: ' + color + '; padding-left: 15px;">' + username + ' : </span>' + '<span><strong style="padding-left: 10px">' + msg + '</strong></span>';
+			}
+			messages.html(messages.html() + msg + '<br />');
+			messages.scrollTop(10000);
+	},
+	dispsystemmessage : function(msg) {
+		var messages = $('#msgboard');
+		msg = ppChat.sanitize(msg);
+		msg = '<strong class="small" style="padding-left: 15px">' + msg + '</strong>';
+		messages.html(messages.html() + msg + '<br />');
+		messages.scrollTop(10000);
+	},
+	sanitize : function(msg) {
+		/* this isn't actual security, just avoids accidential html input */
+		return msg.replace(/</g, '&lt;');
+	},
+	sendmessage : function(chat, color) {
+		var room = window.location.hash.slice(1);
+		var username = $("#username").val();
+		chat.broadcast(JSON.stringify({
+			"eventName": "chat_msg",
+			"data": {
+			  "messages": $("#sendtext").val(),
+			  "room": room,
+			  "color": color
+			}
+	    }));		
+		ppChat.addmsg_to_board(username, $("#sendtext").val());
+		$("#sendtext").val("");
+	},
+	initChat : function() {
+		  var chat;
+		  if (rtc.dataChannelSupport) {
+				console.log('initializing data channel chat');
+				chat = dataChannelChat;
+		  } else {
+				console.log('initializing websocket chat');
+				chat = websocketChat;
+		  }		  		  
+		  var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
+		  $('#btnSend').bind('click', function(event){
+				ppChat.sendmessage(chat, color);
+		  });
+		  $('#sendtext').bind('keypress', function(event){
+				var key = event.which || event.keyCode;
+				if((key === 13 || key === 10) && event.ctrlKey) {
+					ppChat.sendmessage(chat, color);
+					event.preventDefault();
+				}
+		  });
+		  $('#shutter').bind('click', function(event) {
+			    var canvas       = document.querySelector('#canvas');
+				var photo        = document.querySelector('#photo');
+				var video        = document.querySelector('#you');
+				canvas.width = webcam_width;
+				canvas.height = webcam_height;
+				canvas.getContext('2d').drawImage(video, 0, 0, webcam_width, webcam_height);
+				var data = canvas.toDataURL('image/png');
+				$.ajax({
+					type : 'POST',
+					url  : '/upload',
+					data : { shutter_image : data, username : $('#username').val() },
+					success : function(data){
+							alert('uploaded successfully!');
+							console.log('uploaded successfully!');
+						}});
+		  });
+		  
+		  /* this function is called with every data packet recieved */
+		  rtc.on(chat.event, function(conn, data, id, username) {
+				/* decode and append to data */
+				data = chat.recv.apply(this, arguments);
+				data.id = id;
+				data.username = username;			
+				/* pass data along */
+				if (data.messages) {
+					/* chat */
+					ppChat.addmsg_to_board(data.username, data.messages, data.color.toString(16));
+				} else {
+					/* data */
+					process_data(data);
+				}
+		  });
+	},
+	WebRTC: {		
+		init: function() {
+			 if (window.chrome)
+			 {
+				peerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection;
+			 }else{
+				peerConnection = mozRTCPeerConnection;
+			 }
+			 if(peerConnection){
+				rtc.createStream({"video": true, "audio": false}, function(stream) {
+				  $('#you').attr('src', URL.createObjectURL(stream));
+				  webcam_videos.push($('#you'));
+				  rtc.attachStream(stream, 'you');
+				  ppChat.WebRTC.displaywebcamVideos();
+				});
+			 }else {
+				ppChat.Errors.displayErrors('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');
+			 }
+			 var room = window.location.hash.slice(1);
+			 if (room != 0) {
+				  rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], room, $("#username").val());
+				  rtc.on('ready', function(my_socket, usernames) {
+					 //to expand for ready event of WebRTC
+				  });
+				  /* when a new user's data channel is opened and we are offering a file, tell them */
+				  rtc.on('data stream open', function(id, username) {
+						ppChat.dispsystemmessage('now connected to ' + username);
+						ppChat.WebRTC.cloneUser('useryou', id, username);
+				  });
+				  rtc.on('add remote stream', function(stream, socketId) {
+						console.log("adding remote stream...");
+						var clone = ppChat.WebRTC.cloneVideo('you', socketId);
+						$('#' + clone.attr('id')).attr("class", "");
+						rtc.attachStream(stream, clone.attr('id'));
+						ppChat.WebRTC.displaywebcamVideos();
+				  });
+				  /* when another user disconnects */
+				  rtc.on('disconnect stream', function(disconnecting_socket, disconnecting_username) {
+						ppChat.dispsystemmessage(disconnecting_username + " has left the room");						
+						ppChat.WebRTC.removeVideo(disconnecting_socket);
+						ppChat.WebRTC.removeUser(disconnecting_socket);
+				  });
+				  ppChat.initChat();
+			 }
+		},
+		calcNumPerRow : function() {
+			var len = webcam_videos.length;
+			var biggest;  
+			len++;
+			biggest = Math.ceil(Math.sqrt(len));
+			while (len % biggest !== 0) {
+				biggest++;
+			}
+			return biggest;
+		},
+		displaywebcamVideos : function() {
+			var perRow = ppChat.WebRTC.calcNumPerRow();
+			var numInRow = 0;
+			for (var i = 0, len = webcam_videos.length; i < len; i++) {
+				var video = webcam_videos[i];
+				ppChat.WebRTC.setwebcamSize(video);
+				numInRow = (numInRow + 1) % perRow;
+			}
+		},
+		setwebcamSize : function(video) {
+			var perRow = ppChat.WebRTC.calcNumPerRow();
+			var perColumn = Math.ceil(webcam_videos.length / perRow);
+			var width = webcam_width;
+			var height = webcam_height;
+			video.attr('width', webcam_width);
+			video.attr('height', webcam_height);
+			video.attr('style','position:relative;left:0px;top:0px;');			
+		},
+		cloneUser : function(domId, socketId, username) {
+			var user = $('#' + domId);
+			var clone = user.clone();
+			clone.attr('id',"uremote" + socketId);
+			$('#users').append(clone);
+			$('#' + clone.attr('id')).attr("class", "");
+			$('#' + clone.attr('id')).html(username);
+			chat_users.push(username);
+			return clone;
+		},
+		cloneVideo : function(domId, socketId) {
+			var video = $('#' + domId);
+			var clone = video.clone();
+			clone.attr('id',"vremote" + socketId);
+			$('#webcam-videos').append(clone);
+			webcam_videos.push(clone);
+			return clone;
+		},
+		removeVideo : function(socketId) {
+			var video = $('#vremote' + socketId);
+			if (video) {
+				webcam_videos.splice(webcam_videos.indexOf(video), 1);
+				video.remove();
+			}
+		},
+		removeUser : function(socketId) {
+			var user = $('#uremote' + socketId);
+			if (user) {
+				chat_users.splice(chat_users.indexOf(user), 1);
+				user.remove();
+			}
+		}
+	},
+	Errors: {
+		displayErrors : function(errMsg) {
+			alert(errMsg);
+		}
+	}
+}
+
+window.onresize = function(event) {
+	ppChat.WebRTC.displaywebcamVideos();
+};