pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Optimized take buddy picture.

pull/49/head
Simon Eisenmann 11 years ago
parent
1bf456f9c5
commit
5752cba0fe
3 changed files with 86 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      src/styles/components/_buddypicture.scss
  2. 42
      static/js/directives/buddypicture.js
  3. 23
      static/partials/buddypicture.html

47
src/styles/components/_buddypicture.scss
Unescape View File

@ -25,7 +25,29 @@ @@ -25,7 +25,29 @@
margin-bottom: 5px;
}
.videoPicture {
position: relative;
margin-bottom: 4px;
.videoPictureVideo {
background-color: black;
overflow: hidden;
position: relative;
}
video {
object-fit: cover;
}
}
.videoFlash {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
background-color:white;
border: 1px dotted $bordercolor;
visibility: hidden;
z-index: 5;
}
.videoFlash.flash {
visibility: visible;
}
.preview {
left: 0;
@ -37,20 +59,33 @@ @@ -37,20 +59,33 @@
}
.showTakePicture {
.btn {
margin: 5px 0px;
}
}
.btn-takePicture,
.btn-retakePicture {
left: 85px;
left: 0px;
right: 0px;
position: absolute;
top: 110px;
top: 50%;
margin:0 auto;
max-width:40%;
}
.btn-retakePicture {
visibility:hidden;
}
.videoPictureVideo:hover .btn-retakePicture {
visibility:visible;
}
.countdownPicture {
color: $componentbg;
font-size: 45px;
left: 90px;
left: 0px;
right: 0px;
position: absolute;
top: 55px;
top: 75px;
margin:0 auto;
text-align: center;
text-shadow: 0 0 5px black;
opacity:0.8;
}
}

42
static/js/directives/buddypicture.js
Unescape View File

@ -49,31 +49,49 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -49,31 +49,49 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
}
}, delayTotal/start*num);
};
for(var i = 1; i <= start; i++) {
for (var i = 1; i <= start; i++) {
decrementNum(i);
}
};
var getCanvasAspectRatio = function() {
var writeVideoToCanvas = function(canvas) {
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);
console.warn("Unable to compute aspectRat§io", aspectRatio);
aspectRatio = 1.3333333333333333;
}
return aspectRatio;
};
var height = canvas.height;
var width = canvas.width;
var x = 0;
var y = 0;
if (aspectRatio >= 1) {
x = (width - (width * aspectRatio)) / 2;
width = width * aspectRatio;
} else {
y = (height - (height * (1/aspectRatio))) / 2;
height = height * aspectRatio;
}
canvas.getContext("2d").drawImage($scope.video, x, y, width, height);
}
var writePreviewPic = function() {
$scope.canvasPrev.getContext("2d").drawImage($scope.video, 0, 0, $scope.video.width, $scope.video.width/getCanvasAspectRatio());
writeVideoToCanvas($scope.canvasPrev);
$scope.preview = $scope.canvasPrev.toDataURL("image/jpeg");
};
var makePicture = function(stream, cntFrom, delayTotal) {
takePictureCountDown(cntFrom, delayTotal);
$timeout(function() {
$scope.flash.addClass("flash");
$timeout(function() {
$scope.flash.removeClass("flash");
}, 70);
videoStop(stream, $scope.video);
writePreviewPic();
$scope.previewPicture = true;
@ -142,10 +160,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -142,10 +160,9 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
};
$scope.setAsProfilePicture = function() {
var x = (46 * getCanvasAspectRatio() - 46) / -2;
$scope.canvasPic.getContext("2d").drawImage($scope.video, x, 0, 46 * getCanvasAspectRatio(), 46);
writeVideoToCanvas($scope.canvasPic);
$scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg");
console.info("Image size", $scope.user.buddyPicture.length);
//console.info("Image size", $scope.user.buddyPicture.length);
$scope.cancelPicture();
safeApply($scope);
};
@ -153,9 +170,12 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($, @@ -153,9 +170,12 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
}];
var link = function($scope, $element) {
$scope.video = $element.find("video").get(0);
$scope.canvasPic = $element.find("canvas#pic").get(0);
$scope.canvasPrev = $element.find("canvas#prev").get(0);
$scope.flash = $element.find(".videoFlash");
$scope.canvasPic = $element.find("canvas.videoPic").get(0);
$scope.canvasPrev = $element.find("canvas.videoPrev").get(0);
};
return {

23
static/partials/buddypicture.html
Unescape View File

@ -2,16 +2,21 @@ @@ -2,16 +2,21 @@
<img class="picture" ng-show="user.buddyPicture" ng-src="{{user.buddyPicture}}" alt="" />
<div class="collapse showTakePicture" collapse="!showTakePicture">
<div class="videoPicture">
<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
<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 class="videoPictureVideo" style="width:200px; height: 200px">
<div class="videoFlash"></div>
<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
<video ng-show="!previewPicture" autoplay="autoplay" width="200" height="200"></video>
<canvas class="videoPic" style="display:none" width="46" height="46"></canvas>
<canvas class="videoPrev" style="display:none" width="200" height="200"></canvas>
<img class="preview" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" ng-src="{{preview}}" width="200" width="200" alt="" />
<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown || waitingForPermission" ng-show="!previewPicture && !countingDown" 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>
</div>
<div>
<a class="btn btn-small btn-default" ng-click="cancelPicture()"> {{_('Cancel')}}</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-default" ng-click="cancelPicture()"> {{_('Cancel')}}</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="waitingForPermission" ng-click="initPicture()"> {{_('Take picture')}}</a>
<span ng-show="waitingForPermission">

Write Preview
Loading…
Cancel
Save