Evan Theurer
11 years ago
8 changed files with 223 additions and 140 deletions
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
/* |
||||
* Spreed WebRTC. |
||||
* Copyright (C) 2013-2014 struktur AG |
||||
* |
||||
* This file is part of Spreed WebRTC. |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as published by |
||||
* the Free Software Foundation, either version 3 of the License, or |
||||
* (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
|
||||
.buddyPicture { |
||||
.picture { |
||||
display: block; |
||||
margin-bottom: 5px; |
||||
} |
||||
.showTakePicture { |
||||
position: relative; |
||||
.btn { |
||||
margin: 5px 0px; |
||||
} |
||||
} |
||||
.btn-takePicture { |
||||
position: absolute; |
||||
right: 90px; |
||||
top: 110px; |
||||
} |
||||
.countdownPicture { |
||||
color: $componentbg; |
||||
font-size: 45px; |
||||
left: 95px; |
||||
position: absolute; |
||||
top: 55px; |
||||
} |
||||
} |
||||
@ -0,0 +1,151 @@
@@ -0,0 +1,151 @@
|
||||
/* |
||||
* Spreed WebRTC. |
||||
* Copyright (C) 2013-2014 struktur AG |
||||
* |
||||
* This file is part of Spreed WebRTC. |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as published by |
||||
* the Free Software Foundation, either version 3 of the License, or |
||||
* (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
* |
||||
*/ |
||||
define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, _, template) { |
||||
|
||||
return ["$compile", function($compile) { |
||||
|
||||
var controller = ['$scope', 'safeApply', '$timeout', function($scope, safeApply, $timeout) { |
||||
|
||||
$scope.showTakePicture = false; |
||||
$scope.showTakePictureReady = true; |
||||
$scope.previewPicture = false; |
||||
$scope.countingDown = false; |
||||
$scope.video = null; |
||||
$scope.canvas = null; |
||||
|
||||
var localStream = null; |
||||
var delayToTakePicture = 3000; |
||||
var countDownFrom = 3; |
||||
|
||||
// Counts down from start to 1
|
||||
var takePictureCountDown = function(start, delayTotal) { |
||||
$scope.countingDown = true; |
||||
$scope.countdown = {}; |
||||
$scope.countdown.num = start; |
||||
var decrementNum = function(num) { |
||||
$timeout(function() { |
||||
$scope.countdown.num--; |
||||
if($scope.countdown.num === 0) { |
||||
$scope.countingDown = false; |
||||
} |
||||
}, delayTotal/start*num); |
||||
}; |
||||
for(var i = 1; i <= start; i++) { |
||||
decrementNum(i); |
||||
} |
||||
}; |
||||
|
||||
var makePicture = function(cntFrom, delayTotal) { |
||||
takePictureCountDown(cntFrom, delayTotal); |
||||
$timeout(function() { |
||||
$scope.previewPicture = true; |
||||
$scope.video.pause(); |
||||
}, delayTotal); |
||||
}; |
||||
|
||||
$scope.initPicture = function() { |
||||
$scope.showTakePictureReady = false; |
||||
var videoConstraints = true; |
||||
if ($scope.user.settings.cameraId) { |
||||
videoConstraints = { |
||||
optional: [{ |
||||
sourceId: $scope.user.settings.cameraId |
||||
}] |
||||
}; |
||||
} |
||||
getUserMedia({ |
||||
video: videoConstraints |
||||
}, function(stream) { |
||||
if ($scope.showTakePictureReady) { |
||||
stream.stop(); |
||||
return; |
||||
} |
||||
$scope.showTakePicture = true; |
||||
localStream = stream; |
||||
$scope.showTakePictureReady = true; |
||||
attachMediaStream($scope.video, stream); |
||||
safeApply($scope); |
||||
}, function(error) { |
||||
console.error('Failed to get access to local media. Error code was ' + error.code); |
||||
$scope.showTakePictureReady = true; |
||||
safeApply($scope); |
||||
}); |
||||
}; |
||||
|
||||
$scope.cancelPicture = function() { |
||||
$scope.showTakePicture = false; |
||||
$scope.previewPicture = false; |
||||
if (localStream) { |
||||
localStream.stop(); |
||||
localStream = null; |
||||
} |
||||
}; |
||||
|
||||
$scope.retakePicture = function() { |
||||
$scope.video.play(); |
||||
$scope.previewPicture = false; |
||||
makePicture(countDownFrom, delayToTakePicture); |
||||
}; |
||||
|
||||
$scope.takePicture = function() { |
||||
makePicture(countDownFrom, delayToTakePicture); |
||||
}; |
||||
|
||||
$scope.setAsProfilePicture = function() { |
||||
var videoWidth = $scope.video.videoWidth; |
||||
var videoHeight = $scope.video.videoHeight; |
||||
var aspectRatio = videoWidth/videoHeight; |
||||
if (!aspectRatio) { |
||||
// NOTE(longsleep): In Firefox the video size becomes available at sound point later - crap!
|
||||
console.warn("Unable to compute aspectRatio", aspectRatio); |
||||
aspectRatio = 1.3333333333333333; |
||||
} |
||||
var x = (46 * aspectRatio - 46) / -2; |
||||
$scope.canvas.getContext("2d").drawImage($scope.video, 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; |
||||
safeApply($scope); |
||||
}; |
||||
|
||||
}]; |
||||
|
||||
var link = function($scope, $element) { |
||||
$scope.video = $element.find("video").get(0); |
||||
$scope.canvas = $element.find("canvas").get(0); |
||||
}; |
||||
|
||||
return { |
||||
scope: true, |
||||
restrict: 'E', |
||||
replace: true, |
||||
template: template, |
||||
controller: controller, |
||||
link: link |
||||
}; |
||||
|
||||
}]; |
||||
|
||||
}); |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
<div class="buddyPicture"> |
||||
<img class="picture" ng-show="user.buddyPicture" ng-src="{{user.buddyPicture}}" alt="" /> |
||||
<div class="collapse showTakePicture" collapse="!showTakePicture"> |
||||
<div class="countdownPicture" ng-show="countdown.num"> |
||||
<span ng-bind="countdown.num"></span> |
||||
</div> |
||||
<video 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-takePicture" 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> |
||||
</div> |
||||
</div> |
||||
<a class="btn btn-small btn-success" ng-show="!showTakePicture" ng-disabled="!showTakePictureReady" ng-click="initPicture()"> {{_('Take picture')}}</a> |
||||
<span ng-show="!showTakePictureReady"> |
||||
<i class="fa fa-spinner fa-spin"></i> {{_('Waiting for camera')}} |
||||
</span> |
||||
</div> |
||||
Loading…
Reference in new issue