added live cam feed button, fixed unsubs

odbol · Apr 22, 2013 · 1e26882 · 1e26882
1 parent cb88c41
commit 1e26882
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 42 deletions.
diff --git a/lsd/lsd.css b/lsd/lsd.css
@@ -459,6 +459,25 @@ body #backgroundCanvasControls div .clipThumb {
     height: 100px;
 }
 
+.camModeButton {
+	background-color: rgb(9, 114, 173);
+}
+	.camModeButton:hover {
+		background-color: rgb(16, 150, 226);
+	}
+
+	.camModeButton.enabled {
+		background-color: rgb(200, 9, 1);
+	}
+
+		.camModeButton.enabled:before {
+			content: 'Stop ';
+		}
+
+		.camModeButton.enabled span {
+			display:none;
+		}	
+
 /*
 #backgroundCanvasControls .layerSliders input.slider::-webkit-slider-thumb {
      -webkit-appearance: none;

diff --git a/lsd/lsd.js b/lsd/lsd.js
@@ -541,6 +541,7 @@ var scaleRange = function scaleRange(num, oldMin, oldMax, newMin, newMax, isHard
 
 			var sliderHTML = "<div class='globalOptions'>" + 
 				"<label id='interactiveToggle' style='display:none'><input type='checkbox' value='true' />Interactive Mouse Mode</label>" +
+				'<div class="camModeButton dialogButton"><span>Start</span> Live Cam Feed</div>' +
 				"</div>",
 				effectsTabHTML = '',
 				availableEffectOptionsHTML = '<option value="">(no effect)</option>';
@@ -1625,11 +1626,39 @@ if (!renderer.areEffectsSupported()) {
 							}, 
 							// add the ID to the end of the generic image because this is how Crowd finds the clip!
 							"/lsd/icons/stamp-lsd-72.png?id=" + videoElementHolderId))
-					}, 
+					},
+					onWebcamUnsubscribeCallback = function onWebcamUnsubscribeCallback(videoElementHolderId) {
+						// we can do this because the videoElementHolderId is appended to the end of the thumbnail URL
+						$('#clipThumbLists ul').find('img[src$="' + videoElementHolderId + '"]').parent()
+							.hide();
+					},
 
-					webcam = new RemoteCam(onWebcamSubscribeCallback);
+					webcam = new RemoteCam(onWebcamSubscribeCallback, onWebcamUnsubscribeCallback);
 
-
+				$('.camModeButton').click(function () {
+					var $this = $(this);
+
+					if ($this.hasClass('enabled')) {
+						webcam.unpublish();
+
+						$this.removeClass('enabled');
+
+						$this.hide() // since TokBox can't really republish easily.
+					}
+					else {
+
+						if (confirm('This will send live video from your ' +
+									(isMobile ? 'phone camera' : 'webcam') +
+									' to be remixed in LSD. Please click "Allow" when prompted.')) {
+
+							webcam.publish();
+
+							$this.addClass('enabled');
+						}
+					}
+
+					return false;
+				})
 
 				//*********** END REMOTE WEBCAMS **********
 

diff --git a/lsd/webcam.js b/lsd/webcam.js
@@ -9,62 +9,111 @@ var TOKBOX_API_KEY = 22961042,
 	Initializes a TokBox remote webcam connection via WebRTC.
 
 	@param Function onSubscribeCallback(videoElementHolderId) Called when a new video stream is available.
+	@param Function onUnsubscribeCallback(videoElementHolderId) Called when a video stream is removed.
 
 ***/
-var RemoteCam = function RemoteCam(onSubscribeCallback) {
+var RemoteCam = function RemoteCam(onSubscribeCallback, onUnsubscribeCallback) {
 	TB.addEventListener("exception", exceptionHandler);
 
-		var $remotecams = $('<div id="remotecams" style="position:absolute;z-index:-1;width:410px;height:410px;"></div>')
-				.appendTo('body'),
+	var $remotecams = $('<div id="remotecams" style="position:absolute;z-index:-1;width:410px;height:410px;"></div>')
+			.appendTo('body'),
 
+		session = null, // the session
+		publisher = null, // the published stream, populated once publishSelf is called
 
-			/*** 
+		/*** 
 
-				creates a clip holder and adds the clip to LSD. 
+			creates a clip holder and adds the clip to LSD. 
 
-				@returns the ID of the element to be replaced by the <video> object from session.subscribe().
-			***/
-			createClipHolder = function (feedId) {
-				$remotecams.append('<div id="' + feedId + '"><div id="' + feedId + '_el"></div></div>');
+			@returns the ID of the element to be replaced by the <video> object from session.subscribe().
+		***/
+		createClipHolder = function (connectionId) {
+			var feedId = 'camSource_' + connectionId;
 
-				onSubscribeCallback && onSubscribeCallback(feedId);
+			$remotecams.append('<div id="' + feedId + '"><div id="' + feedId + '_el"></div></div>');
 
-				return feedId + '_el';
-			},
+			onSubscribeCallback && onSubscribeCallback(feedId);
 
-			sessionConnectedHandler = function sessionConnectedHandler(event) {
-				subscribeToStreams(event.streams);
+			return feedId + '_el';
+		},
 
-				var feedId = createClipHolder('camSource_publisher');
+		hideClipHolder = function (connectionId) {
+			var feedId = 'camSource_' + connectionId;
+
+			$remotecams.find('#' + feedId).hide();
+
+			onUnsubscribeCallback && onUnsubscribeCallback(feedId);
+		},
+
+		sessionConnectedDef = $.Deferred(),
+
+		sessionConnectedHandler = function sessionConnectedHandler(event) {
+			subscribeToStreams(event.streams);
+
+			sessionConnectedDef.resolve();
+		},
+
+		publishSelf = function publishSelf() {
+
+			sessionConnectedDef.then(function () {
+				var feedId = createClipHolder(session.connection.connectionId);
 
-				var publisher = TB.initPublisher(TOKBOX_API_KEY, feedId, {name: 'self', publishAudio: false});
+				publisher = TB.initPublisher(TOKBOX_API_KEY, feedId, {
+					name: 'self', 
+					publishAudio: false,
+					mirror : false
+				});
 				session.publish(publisher);
-			},
-
-			streamCreatedHandler = function streamCreatedHandler(event) {
-				subscribeToStreams(event.streams);
-			},
-
-			subscribeToStreams = function subscribeToStreams(streams) {
-				for (i = 0; i < streams.length; i++) {
-					var stream = streams[i];
-					if (stream.connection.connectionId != session.connection.connectionId) {
-						var feedId = createClipHolder('camSource_' + stream.connection.connectionId);
-
-						session.subscribe(stream, feedId);
-					}
+			});
+		},
+
+		unpublishSelf = function unpublishSelf() {
+			sessionConnectedDef.then(function () {
+				if (publisher) {
+					session.unpublish(publisher);
 				}
-			},
-
-			exceptionHandler = function exceptionHandler(event) {
-				console && console.log("RemoteCam Error: " + event.message);
-			},
+			});
+		},
+
+		streamCreatedHandler = function streamCreatedHandler(event) {
+			subscribeToStreams(event.streams);
+		},
+
+		streamDestroyedHandler = function streamDestroyedHandler(event) {
+			var streams = event.streams;
 
-		session = TB.initSession(TOKBOX_SESSION_ID); 
+			for (i = 0; i < streams.length; i++) {
+				var stream = streams[i];
 
+				console && console.log("RemoteCam steam removed: " + stream.connection.connectionId);
 
+				hideClipHolder(stream.connection.connectionId);
+			}
+		},
+
+		subscribeToStreams = function subscribeToStreams(streams) {
+			for (i = 0; i < streams.length; i++) {
+				var stream = streams[i];
+				if (stream.connection.connectionId != session.connection.connectionId) {
+					var feedId = createClipHolder(stream.connection.connectionId);
 
-		session.addEventListener("sessionConnected", sessionConnectedHandler);
-		session.addEventListener("streamCreated", streamCreatedHandler);
-		session.connect(TOKBOX_API_KEY, TOKBOX_TOKEN);
+					session.subscribe(stream, feedId);
+				}
+			}
+		},
+
+		exceptionHandler = function exceptionHandler(event) {
+			console && console.log("RemoteCam Error: " + event.message);
+		};
+
+	session = TB.initSession(TOKBOX_SESSION_ID); 
+	session.addEventListener("sessionConnected", sessionConnectedHandler);
+	session.addEventListener("streamCreated", streamCreatedHandler);
+	session.addEventListener("streamDestroyed", streamDestroyedHandler);
+	session.connect(TOKBOX_API_KEY, TOKBOX_TOKEN);
+
+	return {
+		publish : publishSelf,
+		unpublish : unpublishSelf
+	};
 };