...
|
...
|
@@ -52,6 +52,11 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr |
52
|
52
|
let canvas = null;
|
53
|
53
|
let photoCamera = null;
|
54
|
54
|
let dataKeyType = "";
|
|
55
|
+ let width = 640;
|
|
56
|
+ let height = 480;
|
|
57
|
+
|
|
58
|
+ const DEFAULT_IMAGE_TYPE = 'image/jpeg';
|
|
59
|
+ const DEFAULT_IMAGE_QUALITY = 0.92;
|
55
|
60
|
|
56
|
61
|
vm.getStream = getStream;
|
57
|
62
|
vm.createPhoto = createPhoto;
|
...
|
...
|
@@ -79,6 +84,8 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr |
79
|
84
|
vm.isEntityDetected = true;
|
80
|
85
|
}
|
81
|
86
|
}
|
|
87
|
+ width = vm.ctx.settings.maxWidth ? vm.ctx.settings.maxWidth : 640;
|
|
88
|
+ height = vm.ctx.settings.maxHeight ? vm.ctx.settings.maxWidth : 480;
|
82
|
89
|
if (datasource.dataKeys.length) {
|
83
|
90
|
$scope.currentKey = datasource.dataKeys[0].name;
|
84
|
91
|
dataKeyType = datasource.dataKeys[0].type;
|
...
|
...
|
@@ -93,6 +100,24 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr |
93
|
100
|
}
|
94
|
101
|
});
|
95
|
102
|
|
|
103
|
+ function getVideoAspectRatio() {
|
|
104
|
+ if (videoElement.videoWidth && videoElement.videoWidth > 0 &&
|
|
105
|
+ videoElement.videoHeight && videoElement.videoHeight > 0) {
|
|
106
|
+ return videoElement.videoWidth / videoElement.videoHeight;
|
|
107
|
+ }
|
|
108
|
+ return width / height;
|
|
109
|
+ }
|
|
110
|
+
|
|
111
|
+ vm.videoWidth = function() {
|
|
112
|
+ const videoRatio = getVideoAspectRatio();
|
|
113
|
+ return Math.min(width, height * videoRatio);
|
|
114
|
+ }
|
|
115
|
+
|
|
116
|
+ vm.videoHeight = function() {
|
|
117
|
+ const videoRatio = getVideoAspectRatio();
|
|
118
|
+ return Math.min(height, width / videoRatio);
|
|
119
|
+ }
|
|
120
|
+
|
96
|
121
|
function hasGetUserMedia() {
|
97
|
122
|
return !!($window.navigator.mediaDevices && $window.navigator.mediaDevices.getUserMedia);
|
98
|
123
|
}
|
...
|
...
|
@@ -157,10 +182,12 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr |
157
|
182
|
}
|
158
|
183
|
|
159
|
184
|
function createPhoto() {
|
160
|
|
- canvas.width = videoElement.videoWidth;
|
161
|
|
- canvas.height = videoElement.videoHeight;
|
162
|
|
- canvas.getContext('2d').drawImage(videoElement, 0, 0);
|
163
|
|
- vm.previewPhoto = canvas.toDataURL('image/png');
|
|
185
|
+ canvas.width = vm.videoWidth();
|
|
186
|
+ canvas.height = vm.videoHeight();
|
|
187
|
+ canvas.getContext('2d').drawImage(videoElement, 0, 0, vm.videoWidth(), vm.videoHeight());
|
|
188
|
+ const mimeType = vm.ctx.settings.imageFormat ? vm.ctx.settings.imageFormat : DEFAULT_IMAGE_TYPE;
|
|
189
|
+ const quality = vm.ctx.settings.imageQuality ? vm.ctx.settings.imageQuality : DEFAULT_IMAGE_QUALITY;
|
|
190
|
+ vm.previewPhoto = canvas.toDataURL(mimeType, quality);
|
164
|
191
|
vm.isPreviewPhoto = true;
|
165
|
192
|
}
|
166
|
193
|
|
...
|
...
|
|