[AC-1189] Android camera stretched with overlay
| GitHub Issue | n/a |
|---|
| Type | Bug |
|---|
| Priority | n/a |
|---|
| Status | Closed |
|---|
| Resolution | Cannot Reproduce |
|---|
| Resolution Date | 2015-01-26T21:31:57.000+0000 |
|---|
| Affected Version/s | n/a |
|---|
| Fix Version/s | n/a |
|---|
| Components | n/a |
|---|
| Labels | TCSupportTriage, android, camera, overlay |
|---|
| Reporter | Luca Colombo |
|---|
| Assignee | Mauro Parra-Miranda |
|---|
| Created | 2015-01-18T18:05:22.000+0000 |
|---|
| Updated | 2016-03-08T07:37:33.000+0000 |
|---|
Description
When I open camera (using Ti.Media.showCamera()) on Android using a custom overlay, the preview is stretched in height.
After I take the picture and use it inside an ImageView, it shows correctly.
This problem affects only Samsung Galaxy S4 Mini (GT-I9195) with both Android 4.2.2 and 4.4.2, whilst other devices work good (tested on Galaxy S2, S4, Nexus 4, Nexus 5).
I attach a screenshot of the problem: what you see in the image was a perfectly circular bowl.
Here is the code:
function openCamera() {
var transform = Ti.UI.create2DMatrix();
// transform is iOS only, ignored on Android
transform = transform.scale(1);
var overlay = getCameraOverlay(); // code is below
Titanium.Media.showCamera({
success : function(event) {
var image = event.media;
if (OS_ANDROID) {
var cropRect = event.cropRect;
Titanium.API.info('PHOTO CAMERA SUCCESS type: ' + image.mimeType + ' cropRect.x ' + cropRect.x + ' cropRect.y ' + cropRect.y + ' cropRect.height ' + cropRect.height + ' cropRect.width ' + cropRect.width);
// set image view
Ti.API.debug('Our type was: ' + event.mediaType);
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
cropFromCamera(image, cropRect.height, cropRect.width);
}
} else {
// ios
cropFromCamera(image, null, null);
}
},
cancel : function() {},
error : function(error) {},
saveToPhotoGallery : false,
overlay : overlay,
transform : transform,
autorotate : false,
// allowEditing and mediaTypes are iOS-only settings
allowEditing : false,
showControls : false,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
}
function getCameraOverlay() {
var displayWidth = Ti.Platform.displayCaps.platformWidth;
var displayHeight = Ti.Platform.displayCaps.platformHeight;
var camera = "rear";
var viewsHeight = (displayHeight - displayWidth) / 2;
var photoViewDim = displayWidth;
if (OS_ANDROID) {
var viewsHeight = viewsHeight + "px";
var photoViewDim = displayWidth + "px";
}
// setup overlay
var overlay = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
backgroundColor : "transparent",
layout : "vertical"
});
var header = Ti.UI.createView({
width : Ti.UI.FILL,
height : viewsHeight,
top : 0,
backgroundGradient : Alloy.Globals.gradientBackgroundHorizontal,
layout : "vertical"
});
var backClickableView = Ti.UI.createView({
width : "55dp",
height : "35dp",
backgroundColor : "transparent",
left : 0,
zIndex : 1,
top : "3dp"
});
var backArrow = Ti.UI.createImageView({
image : "/img/elements/back.png",
width : "10dp",
height : "auto",
left : "5dp",
touchEnabled : false
});
var appLogo = Ti.UI.createView({
left : "20dp",
// 31x35 fits the image
width : "31dp",
height : "35dp",
backgroundImage : "/img/logo_white_little.png",
touchEnabled : false
});
backClickableView.add(backArrow);
backClickableView.add(appLogo);
backClickableView.addEventListener('click', function() {
Titanium.Media.hideCamera();
});
backClickableView.addEventListener('touchstart', function() {
backClickableView.setOpacity(0.5);
backClickableView.setBackgroundColor("white");
});
backClickableView.addEventListener('touchend', function() {
backClickableView.setOpacity(1);
backClickableView.setBackgroundColor("transparent");
});
header.add(backClickableView);
var photoView = Ti.UI.createView({
width : photoViewDim,
height : photoViewDim,
backgroundColor : "transparent",
touchEnabled : false
});
var optionBar = Ti.UI.createView({
top : "3dp",
width : Ti.UI.FILL,
height : Ti.UI.FILL,
bottom : 0,
backgroundColor : "black"
});
var switchCameraBtn = Ti.UI.createButton({
width : "37dp",
height : "37dp",
backgroundImage : "/img/btn/switch_camera.png"
});
switchCameraBtn.addEventListener('click', function() {
if (camera == "rear") {
Titanium.Media.switchCamera(Titanium.Media.CAMERA_FRONT);
camera = "front";
} else {
Titanium.Media.switchCamera(Titanium.Media.CAMERA_REAR);
camera = "rear";
}
});
var startFlashImage = "/img/btn/flash_auto.png";
switch(Titanium.Media.cameraFlashMode) {
case Titanium.Media.CAMERA_FLASH_OFF:
Titanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_AUTO);
startFlashImage = "/img/btn/flash_off.png";
break;
case Titanium.Media.CAMERA_FLASH_ON:
Titanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_OFF);
startFlashImage = "/img/btn/flash_on.png";
break;
default:
break;
}
var flashBtn = Ti.UI.createButton({
width : "35dp",
height : "35dp",
backgroundImage : startFlashImage,
right : "10dp"
});
flashBtn.addEventListener('click', function() {
switch(Titanium.Media.cameraFlashMode) {
case Titanium.Media.CAMERA_FLASH_AUTO:
Titanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_ON);
flashBtn.backgroundImage = "/img/btn/flash_on.png";
break;
case Titanium.Media.CAMERA_FLASH_OFF:
Titanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_AUTO);
flashBtn.backgroundImage = "/img/btn/flash_auto.png";
break;
case Titanium.Media.CAMERA_FLASH_ON:
Titanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_OFF);
flashBtn.backgroundImage = "/img/btn/flash_off.png";
break;
}
});
optionBar.add(switchCameraBtn);
optionBar.add(flashBtn);
var takePictureView = Ti.UI.createView({
width : Ti.UI.FILL,
height : viewsHeight,
backgroundColor : "black"
});
takePictureView.addEventListener('click', function() {
Titanium.Media.takePicture();
});
var takePictureBtn = Ti.UI.createImageView({
width : "auto",
height : Ti.UI.FILL,
image : "/img/btn/camera_icon_white.png",
top : "10dp",
bottom : "10dp",
touchEnabled : false
});
takePictureView.add(takePictureBtn);
header.add(optionBar);
overlay.add(header);
overlay.add(photoView);
overlay.add(takePictureView);
return overlay;
}
Attachments
Hello, We have tested this issue on Galaxy S3. It works as expected. Camera preview is not stretched in height. Samsung Galaxy S4 Mini (GT-I9195) is not available here. Please test it with specific devices. *Testing Environment:* Titanium SDK: 3.5.0 Titanium CLI: 3.4.1 Android Device: Galaxy S3, OS X Version: 10.9.5, Appcelerator Studio: 3.4.1 *Test Code*
var win = Titanium.UI.createWindow({ backgroundColor : '#fff', layout : 'vertical' }); var OpenCamera = Ti.UI.createButton({ backgroundColor : '#ff0000', title : 'Open Camera', color : '#fff', width : Ti.UI.SIZE, height : Ti.UI.SIZE, top : 10 }); OpenCamera.addEventListener('click', function() { fireUpTheCamera(); }); win.add(OpenCamera); var anImageView = Ti.UI.createImageView({ width : Ti.UI.FILL, height : Ti.UI.FILL, top : 10, autorotate : true, }); win.add(anImageView); var overlay = Ti.UI.createView({ width : 50, height : 50, }); // Create an ImageView. var overlayImg = Ti.UI.createImageView({ image : '/appicon.png', width : Ti.UI.SIZE, height : Ti.UI.SIZE, autorotate : true, }); overlayImg.addEventListener('click', function() { Ti.Media.takePicture(); }); overlay.add(overlayImg); function fireUpTheCamera() { Titanium.Media.showCamera({ success : function(event) { var cropRect = event.cropRect; var image = event.media; Ti.API.debug('Our type was: ' + event.mediaType); if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) { anImageView.image = image; //new_upload_profile_picture_update(anImageView.image); } else { alert("got the wrong type back =" + event.mediaType); } }, cancel : function() { }, error : function(error) { // create alert var a = Titanium.UI.createAlertDialog({ title : 'Camera' }); // set message if (error.code == Titanium.Media.NO_CAMERA) { a.setMessage('Please run this test on device'); } else { a.setMessage('Unexpected error: ' + error.code); } // show alert a.show(); }, saveToPhotoGallery : true, allowEditing : false, overlay : overlay, mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO] }); } win.open();