[TIMOB-14764] Android: Camera preview not full screen width when using overlay

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2014-05-28T16:05:13.000+0000
Affected Version/s	Release 3.2.0
Fix Version/s	Release 3.3.0
Components	Android
Labels	android, module_media, qe-closed-3.3.0, qe-testadded
Reporter	Alex Bernier
Assignee	Pedro Enrique
Created	2013-08-06T01:26:53.000+0000
Updated	2014-07-26T04:55:16.000+0000

Description

*Problem* When using an overlay with showCamera, the preview (where you see what the camera sees) doesn't stretch to the whole width of the screen. There is a ~5-10dp black bar on the left and right side of the preview screen. The overlay view, however, does takes up the entire width of the screen. *Test case* Notice the red bar will be the entire width of the screen and the preview will stop short on the left and right.

var win = Ti.UI.createWindow({
	backgroundColor : "#FFF"
});

var overlay = Ti.UI.createView({
	backgroundColor : "transparent",
	height : Ti.UI.FILL,
	width : Ti.UI.FILL
});

overlay.add(Ti.UI.createView({
	backgroundColor : "red",
	height : 20,
	width : Ti.UI.FILL
}));

win.addEventListener('click', function() {
	Titanium.Media.showCamera({
		overlay : overlay,
		saveToPhotoGallery : false,
		allowEditing : false,
		mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
		showControls : false,
		autohide : false
	});
});

win.open();

Comments

Alex Bernier 2013-08-06

This dupe ticket can be closed, apologies: TC-2697
Daniel Sefton 2013-08-06

Keeping this one open, closed TC-2697.

Michael Gangolf 2013-10-19

Tested on 3.2.0.v20131018154951 with the following code (front and back camera):

   /* jshint undef: true, unused: true */
   /* global Ti: false */
   
   Ti.UI.backgroundColor = "#fff";
   var win = Ti.UI.createWindow({  
           title:'Test',
           backgroundColor:'#fff',
           exitOnClose: true,
           orientationModes: [Ti.UI.PORTRAIT]
       }),
       logLabel = Ti.UI.createLabel({
           bottom: "8dp", left: "8dp", right: "8dp", height: "96dp",
           backgroundColor: "black", color: "white",
           font: {fontSize: "10sp"},
           verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP
       }),
       log = function(s, clearFirst) {
           var current = logLabel.text;
           if (current && !clearFirst) {
               current += "\n";
           } else {
               current = "";
           }
           current += s;
           logLabel.text = current;
       },
       showCamera,
       overlay,
       takePicture,
       switchCamera,
       close,
       currentCamera = Ti.Media.CAMERA_REAR;
   
   logLabel.addEventListener("dblclick", function() {logLabel.text = "";});
   
   win.add(logLabel);
   
   overlay = Ti.UI.createView({
       width: Ti.UI.FILL,
       height: Ti.UI.FILL
   });
   
   takePicture = Ti.UI.createButton({
       title: "Snap",
       width: Ti.UI.SIZE,
       height: "48dp",
       right: "16dp",
       bottom: "16dp"
   });
   
   switchCamera = Ti.UI.createButton({
       title: "Switch",
       width: Ti.UI.SIZE,
       height: "48dp",
       right: "16dp",
       top: "16dp"
   });
   
   close = Ti.UI.createButton({
       title: "Close",
       width: Ti.UI.SIZE,
       height: "48dp",
       left: "16dp",
       bottom: "16dp"
   });
   
   overlay.add(takePicture);
   overlay.add(switchCamera);
   overlay.add(close);
   
   takePicture.addEventListener("click", function() {
       Ti.Media.takePicture();
   });
   
   switchCamera.addEventListener("click", function() {
       if (currentCamera === Ti.Media.CAMERA_REAR) {
           currentCamera = Ti.Media.CAMERA_FRONT;
       } else {
           currentCamera = Ti.Media.CAMERA_REAR;
       }
       Ti.Media.switchCamera(currentCamera);
   });
   
   close.addEventListener("click", function() {
       Ti.Media.hideCamera();
   });
   
   win.add(showCamera = Ti.UI.createButton({
       title: "Show Camera",
       width: Ti.UI.SIZE
   }));
   
   showCamera.addEventListener("click", function() {
       Ti.Media.showCamera({
           cancel: function() {
               log("Cancelled");
           },
           error: function(e){
               log("Error - " + e.error);
           },
           success: function(e) {
               log("Media type: " + e.mediaType);
               log("Media size: " + e.media.length);
           },
           saveToPhotoGallery: true,
           showControls: false,
           overlay: overlay
       });
   });
   
   win.addEventListener("open", function() {
       var cameras = Ti.Media.availableCameras,
           i=0, camera;
   
       if (!Ti.Media.isCameraSupported) {
           log("No supported camera on this device");
           return;
       }
   
       if (!cameras || !cameras.length) {
           log("No cameras");
       } else {
           log(cameras.length + " cameras available");
           for (; i<cameras.length; i++) {
               camera = cameras[i];
               switch(camera) {
                   case Ti.Media.CAMERA_FRONT:
                       log("FRONT CAMERA");
                       break;
                   case Ti.Media.CAMERA_REAR:
                       log("REAR CAMERA");
                       break;
                   default:
                       log("(unknown camera)");
               }
           }
       }
   });
   
   
   win.open();

black border still visible in both cameras and saved images is stretched

Sunila 2013-10-21

Make sure that we use the entire screen so that there is a better chance of screen matching the camera aspect ratio. Also fixed the logic in finding the optimal preview size by looking for the supported camera size with closest aspect ratio match. https://github.com/appcelerator/titanium_mobile/pull/4815
Pedro Enrique 2013-11-06

PR Merged into master
Pragya Rastogi 2014-04-21

Verified the fix with: OSX: 10.9.2 Xcode: 5.1.1 Appcelerator Studio: 3.2.3.201404162038 SDK: 3.3.0.v20140418162516 acs:1.0.14 alloy:1.3.1 npm:1.3.2 titanium:3.2.3-beta2 titanium-code-processor:1.1.1-alpha Device: Galaxy Nexus 4.1.1

JSON Source