Browse Source

Move to displaying preview image in video element to img element using canvas.

pull/40/head
Evan Theurer 11 years ago
parent
commit
80121696ea
  1. 9
      src/styles/components/_buddypicture.scss
  2. 56
      static/js/directives/buddypicture.js
  3. 7
      static/partials/buddypicture.html

9
src/styles/components/_buddypicture.scss

@ -27,13 +27,10 @@ @@ -27,13 +27,10 @@
.videoPicture {
position: relative;
}
video#prim {
//nothing
}
video#sec {
.preview {
left: 0;
position: absolute;
top: 0;
left: 0;
&.previewPicture {
position: relative;
}
@ -45,8 +42,8 @@ @@ -45,8 +42,8 @@
}
.btn-takePicture,
.btn-retakePicture {
position: absolute;
left: 85px;
position: absolute;
top: 110px;
}
.countdownPicture {

56
static/js/directives/buddypicture.js

@ -28,9 +28,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -28,9 +28,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
$scope.waitingForPermission = false;
$scope.previewPicture = false;
$scope.countingDown = false;
$scope.videoPrim = null;
$scope.videoSec = null;
$scope.canvas = null;
$scope.video = null;
$scope.canvasPic = null;
$scope.canvasPrev = null;
var localStream = null;
var delayToTakePicture = 3000;
@ -54,19 +54,35 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -54,19 +54,35 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
}
};
var getCanvasAspectRatio = 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;
}
return aspectRatio;
};
var writePreviewPic = function() {
$scope.canvasPrev.getContext("2d").drawImage($scope.video, 0, 0, $scope.video.width, $scope.video.width/getCanvasAspectRatio());
$scope.preview = $scope.canvasPrev.toDataURL("image/jpeg");
};
var makePicture = function(stream, cntFrom, delayTotal) {
takePictureCountDown(cntFrom, delayTotal);
reattachMediaStream($scope.videoSec, $scope.videoPrim);
$timeout(function() {
videoStop(stream, $scope.video);
writePreviewPic();
$scope.previewPicture = true;
videoStop(stream, $scope.videoPrim, $scope.videoSec);
}, delayTotal);
};
var videoStop = function(stream, video1, video2) {
var videoStop = function(stream, video) {
if (stream) {
video1.pause();
video2.pause();
video.pause();
stream.stop();
stream = null;
}
@ -89,7 +105,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -89,7 +105,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
$scope.showTakePicture = true;
localStream = stream;
$scope.waitingForPermission = false;
attachMediaStream($scope.videoPrim, stream);
attachMediaStream($scope.video, stream);
safeApply($scope);
videoAllowed.resolve(true);
}, function(error) {
@ -108,7 +124,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -108,7 +124,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
$scope.cancelPicture = function() {
$scope.showTakePicture = false;
$scope.previewPicture = false;
videoStop(localStream, $scope.videoPrim, $scope.videoSec);
videoStop(localStream, $scope.video);
};
$scope.retakePicture = function() {
@ -126,17 +142,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -126,17 +142,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
};
$scope.setAsProfilePicture = function() {
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!
console.warn("Unable to compute aspectRatio", aspectRatio);
aspectRatio = 1.3333333333333333;
}
var x = (46 * aspectRatio - 46) / -2;
$scope.canvas.getContext("2d").drawImage($scope.videoSec, x, 0, 46 * aspectRatio, 46);
$scope.user.buddyPicture = $scope.canvas.toDataURL("image/jpeg");
var x = (46 * getCanvasAspectRatio() - 46) / -2;
$scope.canvasPic.getContext("2d").drawImage($scope.video, x, 0, 46 * getCanvasAspectRatio(), 46);
$scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg");
console.info("Image size", $scope.user.buddyPicture.length);
$scope.cancelPicture();
safeApply($scope);
@ -145,9 +153,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -145,9 +153,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
}];
var link = function($scope, $element) {
$scope.videoPrim = $element.find("video#prim").get(0);
$scope.videoSec = $element.find("video#sec").get(0);
$scope.canvas = $element.find("canvas").get(0);
$scope.video = $element.find("video").get(0);
$scope.canvasPic = $element.find("canvas#pic").get(0);
$scope.canvasPrev = $element.find("canvas#prev").get(0);
};
return {

7
static/partials/buddypicture.html

@ -3,9 +3,10 @@ @@ -3,9 +3,10 @@
<div class="collapse showTakePicture" collapse="!showTakePicture">
<div class="videoPicture">
<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
<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>
<video ng-show="!previewPicture" autoplay="autoplay" width="200"></video>
<canvas id="pic" style="display:none" width="46" height="46"></canvas>
<canvas id="prev" style="display:none" width="200"></canvas>
<img class="preview" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" ng-src="{{preview}}" width="200" alt="" />
<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>

Loading…
Cancel
Save