Updated controller and added features to each demo

GleasonK · GleasonK · commit e6329a285ad3 · 2015-07-16T17:36:02.000-07:00
diff --git a/embed.html b/embed.html
@@ -28,13 +28,13 @@
 </head>
 <body>
 	<div id="vid-box"></div>
-	<div id="stream-info" ><img src="img/person_dark.png"/><span id="here-now">0</span></div>
+	<div id="stream-info"><img src="img/person_dark.png"/><span id="here-now">0</span></div>
 </body>
 
 <script src="https://cdn.pubnub.com/pubnub.min.js"></script>
 <script src="js/webrtc.js"></script>
 <script src="js/rtc-controller.js"></script>
-<script>
+<script>	
 	
 (function(){
 
diff --git a/embed_demo.html b/embed_demo.html
@@ -0,0 +1,62 @@
+<html>
+<head>
+	<title>WebRTC Embed Demo</title>
+</head>
+<body style="text-align: center">
+	<div id="embed"></div>
+	<h1 id="stream-name"></h1>
+</body>
+<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
+<script type="text/javascript">
+
+(function(){
+
+var urlargs     = urlparams();
+var embed_box   = document.getElementById('embed');
+var stream_name = document.getElementById('stream-name');
+
+// Handle error if stream is not in urlargs.
+if (!('stream' in urlargs)) {
+	handleNoStream();
+    return;
+}
+var stream = urlargs.stream;
+var width  = 500;
+var height = 500;
+
+if ('width'  in urlargs) width = urlargs.width;
+if ('height' in urlargs) height = urlargs.height;
+
+stream_name.innerHTML = "Currently Watching: " + stream;
+genEmbed(width,height);
+
+
+function genEmbed(w,h){
+	var url = "http://kevingleason.me/SimpleRTC/embed.html?stream=" + stream;
+	var embed    = document.createElement('iframe');
+	embed.src    = url;
+	embed.width  = w;
+	embed.height = h;
+	embed.setAttribute("frameborder", 0);
+	embed_box.innerHTML = embed.outerHTML; // For a preview
+}
+
+// Get URL params
+function urlparams() {
+    var params = {};
+    if (location.href.indexOf('?') < 0) return params;
+    PUBNUB.each(
+        location.href.split('?')[1].split('&'),
+        function(data) { var d = data.split('='); params[d[0]] = d[1]; }
+    );
+    return params;
+}
+
+function handleNoStream(){
+	embed_box.innerHTML="ERROR! Stream not found in URL params.";
+}
+	
+}());
+	
+</script>
+</html>
diff --git a/embed_test.html b/embed_test.html
diff --git a/index.html b/index.html
@@ -46,8 +46,6 @@ <h2><a href="stream.html">Streaming & Embedding</a></h2>
 			<p>Stream video from one device to many listeners. Also embed that
 		live video feed anywhere you want!</p>
 
-
-
         </section>
 
         <footer>
diff --git a/js/rtc-controller.js b/js/rtc-controller.js
@@ -1,3 +1,13 @@
+/* WebRTC PubNub Controller
+ * Author: Kevin Gleason
+ * Date: July 15, 2015
+ * Description: A wrapper library for the PubNub WebRTC SDK to make simple video
+ *              functions a breeze to implement.
+ *
+ * TODO: make getVideoElement a native non-jQuery function
+ *
+ */
+
 (function(){
 	
 	
@@ -93,6 +103,13 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 	    publishCtrl(controlChannel(name), "userJoin", phone.number());
     }
     
+    CONTROLLER.leaveStream = function(name){
+	    var ch = (name ? name : phone.number()) + "-stream";
+	    pubnub.unsubscribe({
+            channel    : ch,
+        });
+    }
+    
     CONTROLLER.send = function( message, number ) {
         if (phone.oneway) return stream_message(message);
         phone.send(message, number);
@@ -119,10 +136,12 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 	};
 	
 	CONTROLLER.hangup = function(number){
-		if (number) { 
+		if (number) {
+			if (phone.oneway) CONTROLLER.leaveStream(number);
 			phone.hangup(number);
 			return publishCtrl(controlChannel(number), "userLeave", phone.number())
 		} 
+		if (phone.oneway) CONTROLLER.leaveStream();
 		phone.hangup();
 		for (var i=0; i < userArray.length; i++) {
 			var cChan = controlChannel(userArray[i].number);
@@ -166,6 +185,10 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 		CONTROLLER.isOnline(number+"-stream", cb);
 	};
 	
+	CONTROLLER.getVideoElement = function(number){
+		return $('*[data-number="'+number+'"]');
+	}
+	
 	function manage_users(session){
 		if (session.number == phone.number()) return; 	// Do nothing if it is self.
 		var idx = findWithAttr(userArray, "number", session.number); // Find session by number
@@ -178,7 +201,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 			}
 		}
 		userArray = userArray.filter(function(s){ return !s.closed; }); // Clean to only open talks
-		console.log(userArray);
+		// console.log(userArray);
 	}
 	
 	function add_to_stream(number){
@@ -198,7 +221,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 	}
 	
 	function publishCtrl(ch, type, data){
-		console.log("Pub to " + ch);
+		// console.log("Pub to " + ch);
 		var msg = {type: type, data: data};
 		pubnub.publish({ 
 			channel: ch,
@@ -211,7 +234,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 		pubnub.subscribe({
             channel    : ctrlChan,
             message    : receive,
-            connect    : function() { console.log("Subscribed to " + ctrlChan); }
+            connect    : function() {} // console.log("Subscribed to " + ctrlChan); }
         });
 	}
 	
@@ -239,7 +262,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 			if (idx != -1) audiotogglecb(userArray[idx], audEnabled);
 			break;
 		}
-		console.log(m);
+		// console.log(m);
 	}
 	
 	function findWithAttr(array, attr, value) {
@@ -257,7 +280,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
 })();
 
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-// Request fresh TURN servers from XirSys
+// Request fresh TURN servers from XirSys - Need to explain.
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 function get_xirsys_servers() {
     var servers;
diff --git a/minivid2.html b/minivid2.html
@@ -19,6 +19,10 @@
 		    display: block;
 		    margin: 0 auto;
 	    }
+	    
+	    input[type="submit"]{
+		    width:50px;
+	    }
     </style>
     
 </head>
@@ -27,24 +31,24 @@
 <!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
 <!-- My Phone Number & Dial Areas -->
 <!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
-<div id="vid-box"></div>
-<div id="vid-thumb"></div>
-
-<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
-    <input type="text" name="username" id="username" placeholder="Pick a username!" />
-    <input type="submit" name="login_submit" value="Log In">
-</form>
-
-
-<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
-	<input type="text" name="number" placeholder="Enter user to dial!" />
-	<input type="submit" value="Call"/>
-</form>
-
-<div id="inCall">
-	<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
-</div>
-<div id="logs"></div>
+	<div id="vid-box"></div>
+	<div id="vid-thumb"></div>
+	
+	<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
+	    <input type="text" name="username" id="username" placeholder="Pick a username!" />
+	    <input type="submit" name="login_submit" value="Log In">
+	</form>
+	
+	
+	<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
+		<input type="text" name="number" placeholder="Enter user to dial!" />
+		<input type="submit" value="Call"/>
+	</form>
+	
+	<div id="inCall">
+		<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
+	</div>
+	<div id="logs"></div>
 
 <p><b>To Use:</b></p>
 <p>Type a username and click Log in. If input turns green you are ready to receive/place a call.</p>
@@ -78,13 +82,14 @@
 	});
 	ctrl.receive(function(session){
 	    session.connected(function(session){ video_out.appendChild(session.video); addLog(session.number + " has joined."); });
-	    session.ended(function(session) { getVideo(session.number).remove(); addLog(session.number + " has left."); });
+	    session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); addLog(session.number + " has left."); });
 	});
 	ctrl.videoToggled(function(session, isEnabled){
-		getVideo(session.number).toggle(isEnabled);
+		ctrl.getVideoElement(session.number).toggle(isEnabled);
 		addLog(session.number+": video enabled - " + isEnabled);
 	});
 	ctrl.audioToggled(function(session, isEnabled){
+		ctrl.getVideoElement(session.number).css("opacity",isEnabled ? 1 : 0.75);
 		addLog(session.number+": audio enabled - " + isEnabled);
 	});
 	return false;
@@ -103,8 +108,8 @@
 
 function mute(){
 	var audio = ctrl.toggleAudio();
-	if (!audio){ $("#mute").html("Unmute"); }
-	else { $("#mute").html("Mute"); }
+	if (!audio) $("#mute").html("Unmute");
+	else $("#mute").html("Mute");
 }
 
 function end(){
@@ -113,8 +118,8 @@
 
 function pause(){
 	var video = ctrl.toggleVideo();
-	if (!video){ $('#pause').html('Unpause'); }
-	else { $('#pause').html('Pause'); }
+	if (!video) $('#pause').html('Unpause'); 
+	else $('#pause').html('Pause'); 
 }
 
 function getVideo(number){
diff --git a/stream.html b/stream.html
@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
-	    #vid-box, #vid-thumb {
+	    #vid-box{
 		    text-align: center;
 	    }
 	    
@@ -23,12 +23,10 @@
 			    display: inline-block;
 			    height: 20px;
 		    }
-
-	    #vid-thumb, #vid-thumb video{
-		    width: 200px;
-		    display: block;
-		    margin: 0 auto;
-	    }
+		
+		input[type="submit"], button {
+			width: 50px;
+		}
     </style>
     
 </head>
@@ -38,7 +36,6 @@
 <!-- My Phone Number & Dial Areas -->
 <!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
 <div id="vid-box"></div>
-<div id="vid-thumb"></div>
 
 <form name="streamForm" id="stream" action="#" onsubmit="return stream(this);">
     <input type="text" name="streamname" id="streamname" placeholder="Pick a stream name!" />
@@ -76,6 +73,7 @@
 var video_out  = document.getElementById("vid-box");
 var embed_code = document.getElementById("embed-code");
 var embed_demo = document.getElementById("embed-demo");
+var here_now   = document.getElementById('here-now');
 var streamName;
 
 function stream(form) {
@@ -102,7 +100,7 @@
 	    session.ended(function(session) { addLog(session.number + " has left."); console.log(session)});
 	});
 	ctrl.streamPresence(function(m){
-		$('#here-now').html(m.occupancy+'');
+		here_now.innerHTML=m.occupancy;
 		addLog(m.occupancy + " currently watching.");
 	});
 	return false;
@@ -116,7 +114,7 @@
 	    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe', // Your Sub Key
 	    oneway        : true
 	});
-	var ctrl = window.ctrl = CONTROLLER(phone, true);
+	var ctrl = window.ctrl = CONTROLLER(phone);
 	ctrl.ready(function(){
 		ctrl.isStreaming(num, function(isOn){
 			if (isOn) ctrl.joinStream(num);
@@ -129,7 +127,7 @@
 	    session.ended(function(session) { addLog(session.number + " has left."); });
 	});
 	ctrl.streamPresence(function(m){
-		$('#here-now').html(m.occupancy+'');
+		here_now.innerHTML=m.occupancy;
 		addLog(m.occupancy + " currently watching.");
 	});
 	return false;
@@ -145,7 +143,7 @@
 
 function end(){
 	if (!window.phone) return;
-	phone.hangup();
+	ctrl.hangup();
 	phone.pubnub.unsubscribe(phone.number());
 }
 
@@ -156,9 +154,9 @@
 	embed.src    = url;
 	embed.width  = w;
 	embed.height = h;
-	embed.frameborder=0;
-	embed_demo.innerHTML = embed.outerHTML;
-	embed_code.innerHTML = '';
+	embed.setAttribute("frameborder", 0);
+	embed_demo.innerHTML = "<a href='embed_demo.html?stream="+streamName+"&width="+w+"&height="+h+"'>Embed Demo</a>" 
+	embed_code.innerHTML = 'Embed Code: ';
 	embed_code.appendChild(document.createTextNode(embed.outerHTML));
 }
 
