Start/stop video stream when taking/retaking a picture.

src/styles/components/_buddypicture.scss

@@ -27,6 +27,17 @@
   .videoPicture {
     position: relative;
   }
+  video#prim {
+    //nothing
+  }
+  video#sec {
+    position: absolute;
+    top: 0;
+    left: 0;
+    &.previewPicture {
+      position: relative;
+    }
+  }
   .showTakePicture {
     .btn {
       margin: 5px 0px;

static/js/directives/buddypicture.js

@@ -22,13 +22,14 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 
 	return ["$compile", function($compile) {
 
-		var controller = ['$scope', 'safeApply', '$timeout', function($scope, safeApply, $timeout) {
+		var controller = ['$scope', 'safeApply', '$timeout', '$q', function($scope, safeApply, $timeout, $q) {
 
 			$scope.showTakePicture = false;
-			$scope.showTakePictureReady = true;
+			$scope.waitingForPermission = false;
 			$scope.previewPicture = false;
 			$scope.countingDown = false;
-			$scope.video = null;
+			$scope.videoPrim = null;
+			$scope.videoSec = null;
 			$scope.canvas = null;
 
 			var localStream = null;
@@ -53,17 +54,28 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 				}
 			};
 
-			var makePicture = function(cntFrom, delayTotal) {
+			var makePicture = function(stream, cntFrom, delayTotal) {
 				takePictureCountDown(cntFrom, delayTotal);
+				reattachMediaStream($scope.videoSec, $scope.videoPrim);
 				$timeout(function() {
 					$scope.previewPicture = true;
-					$scope.video.pause();
+					videoStop(stream, $scope.videoPrim, $scope.videoSec);
 				}, delayTotal);
 			};
 
-			$scope.initPicture = function() {
-				$scope.showTakePictureReady = false;
+			var videoStop = function(stream, video1, video2) {
+				if (stream) {
+					video1.pause();
+					video2.pause();
+					stream.stop();
+					stream = null;
+				}
+			};
+
+			var videoStart = function() {
+				$scope.waitingForPermission = true;
 				var videoConstraints = true;
+				var videoAllowed = $q.defer();
 				if ($scope.user.settings.cameraId) {
 					videoConstraints = {
 						optional: [{
@@ -74,44 +86,48 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 				getUserMedia({
 					video: videoConstraints
 				}, function(stream) {
-					if ($scope.showTakePictureReady) {
-						stream.stop();
-						return;
-					}
 					$scope.showTakePicture = true;
 					localStream = stream;
-					$scope.showTakePictureReady = true;
-					attachMediaStream($scope.video, stream);
+					$scope.waitingForPermission = false;
+					attachMediaStream($scope.videoPrim, stream);
 					safeApply($scope);
+					videoAllowed.resolve(true);
 				}, function(error) {
 					console.error('Failed to get access to local media. Error code was ' + error.code);
-					$scope.showTakePictureReady = true;
+					$scope.waitingForPermission = false;
 					safeApply($scope);
+					videoAllowed.resolve(false);
 				});
+				return videoAllowed.promise;
+			};
+
+			$scope.initPicture = function() {
+				videoStart(localStream);
 			};
 
 			$scope.cancelPicture = function() {
 				$scope.showTakePicture = false;
 				$scope.previewPicture = false;
-				if (localStream) {
-					localStream.stop();
-					localStream = null;
-				}
+				videoStop(localStream, $scope.videoPrim, $scope.videoSec);
 			};
 
 			$scope.retakePicture = function() {
-				$scope.video.play();
-				$scope.previewPicture = false;
-				makePicture(countDownFrom, delayToTakePicture);
+				var permission = videoStart(localStream);
+				permission.then(function(isPermitted) {
+					if(isPermitted) {
+						$scope.previewPicture = false;
+						makePicture(localStream, countDownFrom, delayToTakePicture);
+					}
+				});
 			};
 
 			$scope.takePicture = function() {
-				makePicture(countDownFrom, delayToTakePicture);
+				makePicture(localStream, countDownFrom, delayToTakePicture);
 			};
 
 			$scope.setAsProfilePicture = function() {
-				var videoWidth = $scope.video.videoWidth;
-				var videoHeight = $scope.video.videoHeight;
+				var videoWidth = $scope.videoSec.videoWidth;
+				var videoHeight = $scope.videoSec.videoHeight;
 				var aspectRatio = videoWidth/videoHeight;
 				if (!aspectRatio) {
 					// NOTE(longsleep): In Firefox the video size becomes available at sound point later - crap!
@@ -119,21 +135,18 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 					aspectRatio = 1.3333333333333333;
 				}
 				var x = (46 * aspectRatio - 46) / -2;
-				$scope.canvas.getContext("2d").drawImage($scope.video, x, 0, 46 * aspectRatio, 46);
+				$scope.canvas.getContext("2d").drawImage($scope.videoSec, x, 0, 46 * aspectRatio, 46);
 				$scope.user.buddyPicture = $scope.canvas.toDataURL("image/jpeg");
 				console.info("Image size", $scope.user.buddyPicture.length);
-				localStream.stop();
-				localStream = null;
-				$scope.showTakePictureReady = true;
-				$scope.showTakePicture = false;
-				$scope.previewPicture = false;
+				$scope.cancelPicture();
 				safeApply($scope);
 			};
 
 		}];
 
 		var link = function($scope, $element) {
-			$scope.video = $element.find("video").get(0);
+			$scope.videoPrim = $element.find("video#prim").get(0);
+			$scope.videoSec = $element.find("video#sec").get(0);
 			$scope.canvas = $element.find("canvas").get(0);
 		};
 

static/partials/buddypicture.html

@@ -3,16 +3,17 @@
 	<div class="collapse showTakePicture" collapse="!showTakePicture">
 		<div class="videoPicture">
 			<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
-			<video autoplay="autoplay" width="200"></video>
+			<video id="prim" ng-show="!previewPicture" autoplay="autoplay" width="200"></video>
+			<video id="sec" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" autoplay="autoplay" width="200"></video>
 			<canvas style="display:none" width="46" height="46"></canvas>
-			<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown" ng-show="!previewPicture" ng-click="takePicture()"> {{_('Take')}}</a>
-			<a class="btn btn-xs btn-success btn-retakePicture" ng-show="previewPicture" ng-click="retakePicture()"> {{_('Retake')}}</a>
+			<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown || waitingForPermission" ng-show="!previewPicture" ng-click="takePicture()"> {{_('Take')}}</a>
+			<a class="btn btn-xs btn-success btn-retakePicture" ng-disabled="waitingForPermission" ng-show="previewPicture" ng-click="retakePicture()"> {{_('Retake')}}</a>
 		</div>
 		<a class="btn btn-small btn-default" ng-click="cancelPicture()"> {{_('Cancel')}}</a>
-		<a class="btn btn-small btn-primary" ng-disabled="!previewPicture" ng-click="setAsProfilePicture()"> {{_('Set as Profile Picture')}}</a>
+		<a class="btn btn-small btn-primary" ng-disabled="!previewPicture || waitingForPermission" ng-click="setAsProfilePicture()"> {{_('Set as Profile Picture')}}</a>
 	</div>
-	<a class="btn btn-small btn-success" ng-show="!showTakePicture" ng-disabled="!showTakePictureReady" ng-click="initPicture()"> {{_('Take picture')}}</a>
-	<span ng-show="!showTakePictureReady">
+	<a class="btn btn-small btn-success" ng-show="!showTakePicture" ng-disabled="waitingForPermission" ng-click="initPicture()"> {{_('Take picture')}}</a>
+	<span ng-show="waitingForPermission">
 		<i class="fa fa-spinner fa-spin"></i> {{_('Waiting for camera')}}
 	</span>
 </div>