CB-9349 Focus control and nice UI

Removed old comment, move style text. close #106
This commit is contained in:
Gillardo 2015-07-09 12:27:32 +01:00 committed by Murat Sutunc
parent 0264e56162
commit c50757c245

View File

@ -312,6 +312,7 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
saveToPhotoAlbum = args[9], saveToPhotoAlbum = args[9],
cameraDirection = args[11], cameraDirection = args[11],
capturePreview = null, capturePreview = null,
captureTakePhotoButton = null,
captureCancelButton = null, captureCancelButton = null,
capture = null, capture = null,
captureSettings = null, captureSettings = null,
@ -319,17 +320,24 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
sensor = null; sensor = null;
var createCameraUI = function () { var createCameraUI = function () {
// Create fullscreen preview // create style for take and cancel buttons
capturePreview = document.createElement("video"); var buttonStyle = "width:45%;padding: 10px 16px;font-size: 18px;line-height: 1.3333333;color: #333;background-color: #fff;border-color: #ccc; border: 1px solid transparent;border-radius: 6px; display: block; margin: 20px; z-index: 1000;border-color: #adadad;";
// Create fullscreen preview
// z-order style element for capturePreview and captureCancelButton elts // z-order style element for capturePreview and captureCancelButton elts
// is necessary to avoid overriding by another page elements, -1 sometimes is not enough // is necessary to avoid overriding by another page elements, -1 sometimes is not enough
capturePreview.style.cssText = "position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999"; capturePreview = document.createElement("video");
capturePreview.style.cssText = "position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999;";
// Create capture button
captureTakePhotoButton = document.createElement("button");
captureTakePhotoButton.innerText = "Take";
captureTakePhotoButton.style.cssText = buttonStyle + "position: fixed; left: 0; bottom: 0; margin: 20px; z-index: 1000";
// Create cancel button // Create cancel button
captureCancelButton = document.createElement("button"); captureCancelButton = document.createElement("button");
captureCancelButton.innerText = "Cancel"; captureCancelButton.innerText = "Cancel";
captureCancelButton.style.cssText = "position: fixed; right: 0; bottom: 0; display: block; margin: 20px; z-index: 1000"; captureCancelButton.style.cssText = buttonStyle + "position: fixed; right: 0; bottom: 0; margin: 20px; z-index: 1000";
capture = new CaptureNS.MediaCapture(); capture = new CaptureNS.MediaCapture();
@ -360,6 +368,22 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
return capture.initializeAsync(captureSettings); return capture.initializeAsync(captureSettings);
}).then(function () { }).then(function () {
// create focus control if available
var VideoDeviceController = capture.videoDeviceController;
var FocusControl = VideoDeviceController.focusControl;
if (FocusControl.supported == true) {
capturePreview.addEventListener('click', function () {
var preset = Windows.Media.Devices.FocusPreset.autoNormal;
FocusControl.setPresetAsync(preset).done(function () {
});
});
}
// msdn.microsoft.com/en-us/library/windows/apps/hh452807.aspx // msdn.microsoft.com/en-us/library/windows/apps/hh452807.aspx
capturePreview.msZoom = true; capturePreview.msZoom = true;
capturePreview.src = URL.createObjectURL(capture); capturePreview.src = URL.createObjectURL(capture);
@ -370,10 +394,12 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
if (sensor !== null) { if (sensor !== null) {
sensor.addEventListener("orientationchanged", onOrientationChange); sensor.addEventListener("orientationchanged", onOrientationChange);
} }
capturePreview.addEventListener('click', captureAction);
// add click events to take and cancel buttons
captureTakePhotoButton.addEventListener('click', captureAction);
captureCancelButton.addEventListener('click', function () { captureCancelButton.addEventListener('click', function () {
destroyCameraPreview(); destroyCameraPreview();
errorCallback('Cancelled'); errorCallback('no image selected');
}, false); }, false);
// Change default orientation // Change default orientation
@ -393,8 +419,9 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
return; return;
} }
// Insert preview frame and controls into page // add elements to body
document.body.appendChild(capturePreview); document.body.appendChild(capturePreview);
document.body.appendChild(captureTakePhotoButton);
document.body.appendChild(captureCancelButton); document.body.appendChild(captureCancelButton);
if (aspectRatios.indexOf(DEFAULT_ASPECT_RATIO) > -1) { if (aspectRatios.indexOf(DEFAULT_ASPECT_RATIO) > -1) {
@ -415,7 +442,8 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
} }
capturePreview.pause(); capturePreview.pause();
capturePreview.src = null; capturePreview.src = null;
[capturePreview, captureCancelButton].forEach(function(elem) { // remove elements from wrapper
[capturePreview, captureTakePhotoButton, captureCancelButton].forEach(function (elem) {
if (elem /* && elem in document.body.childNodes */) { if (elem /* && elem in document.body.childNodes */) {
document.body.removeChild(elem); document.body.removeChild(elem);
} }
@ -446,33 +474,33 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
var photoStream = new Windows.Storage.Streams.InMemoryRandomAccessStream(); var photoStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
var finalStream = new Windows.Storage.Streams.InMemoryRandomAccessStream(); var finalStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
capture.capturePhotoToStreamAsync(encodingProperties, photoStream) capture.capturePhotoToStreamAsync(encodingProperties, photoStream)
.then(function() { .then(function() {
return Windows.Graphics.Imaging.BitmapDecoder.createAsync(photoStream); return Windows.Graphics.Imaging.BitmapDecoder.createAsync(photoStream);
}) })
.then(function(dec) { .then(function(dec) {
finalStream.size = 0; // BitmapEncoder requires the output stream to be empty finalStream.size = 0; // BitmapEncoder requires the output stream to be empty
return Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(finalStream, dec); return Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(finalStream, dec);
}) })
.then(function(enc) { .then(function(enc) {
// We need to rotate the photo wrt sensor orientation // We need to rotate the photo wrt sensor orientation
enc.bitmapTransform.rotation = orientationToRotation(sensor.getCurrentOrientation()); enc.bitmapTransform.rotation = orientationToRotation(sensor.getCurrentOrientation());
return enc.flushAsync(); return enc.flushAsync();
}) })
.then(function() { .then(function() {
return tempCapturedFile.openAsync(Windows.Storage.FileAccessMode.readWrite); return tempCapturedFile.openAsync(Windows.Storage.FileAccessMode.readWrite);
}) })
.then(function(fileStream) { .then(function(fileStream) {
return Windows.Storage.Streams.RandomAccessStream.copyAsync(finalStream, fileStream); return Windows.Storage.Streams.RandomAccessStream.copyAsync(finalStream, fileStream);
}) })
.done(function() { .done(function() {
photoStream.close(); photoStream.close();
finalStream.close(); finalStream.close();
complete(tempCapturedFile); complete(tempCapturedFile);
}, function() { }, function() {
photoStream.close(); photoStream.close();
finalStream.close(); finalStream.close();
throw new Error("An error has occured while capturing the photo."); throw new Error("An error has occured while capturing the photo.");
}); });
}); });
}) })
.done(function(capturedFile) { .done(function(capturedFile) {
@ -485,8 +513,8 @@ function takePictureFromCameraWP(successCallback, errorCallback, args) {
saveToPhotoAlbum: saveToPhotoAlbum saveToPhotoAlbum: saveToPhotoAlbum
}, successCallback, errorCallback); }, successCallback, errorCallback);
}, function(err) { }, function(err) {
destroyCameraPreview(); destroyCameraPreview();
errorCallback(err); errorCallback(err);
}); });
}; };