mirror of
https://gitee.com/shuto/cordova-plugin-camera.git
synced 2025-04-21 12:26:21 +08:00
CB-9349 Focus control and nice UI
Removed old comment, move style text. close #106
This commit is contained in:
parent
0264e56162
commit
c50757c245
@ -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);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user