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

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

pull/40/head
Evan Theurer 11 years ago
parent
b907999f81
commit
80121696ea
3 changed files with 39 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

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

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

7
static/partials/buddypicture.html
Unescape View File

@ -3,9 +3,10 @@
<div class="collapse showTakePicture" collapse="!showTakePicture"> <div class="collapse showTakePicture" collapse="!showTakePicture">
<div class="videoPicture"> <div class="videoPicture">
<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div> <div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
<video id="prim" ng-show="!previewPicture" autoplay="autoplay" width="200"></video> <video ng-show="!previewPicture" autoplay="autoplay" width="200"></video>
<video id="sec" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" autoplay="autoplay" width="200"></video> <canvas id="pic" style="display:none" width="46" height="46"></canvas>
<canvas 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-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> <a class="btn btn-xs btn-success btn-retakePicture" ng-disabled="waitingForPermission" ng-show="previewPicture" ng-click="retakePicture()"> {{_('Retake')}}</a>
</div> </div>

Write Preview
Loading…
Cancel
Save