diff --git a/src/styles/components/_buddypicture.scss b/src/styles/components/_buddypicture.scss
index 29259796..cab9a654 100644
--- a/src/styles/components/_buddypicture.scss
+++ b/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;
diff --git a/static/js/directives/buddypicture.js b/static/js/directives/buddypicture.js
index 46a77228..c631e779 100644
--- a/static/js/directives/buddypicture.js
+++ b/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);
};
diff --git a/static/partials/buddypicture.html b/static/partials/buddypicture.html
index f514d730..40982eef 100644
--- a/static/partials/buddypicture.html
+++ b/static/partials/buddypicture.html
@@ -3,16 +3,17 @@
- {{_('Take picture')}}
-
+ {{_('Take picture')}}
+
{{_('Waiting for camera')}}