[TIMOB-26882] iOS: Front Camera Preview looks 'zoomed' on iPhone X
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | None |
Status | Closed |
Resolution | Not Our Bug |
Resolution Date | 2019-08-02T13:58:01.000+0000 |
Affected Version/s | Release 7.5.1 |
Fix Version/s | n/a |
Components | iOS |
Labels | engSchedule |
Reporter | Fazlul Haque |
Assignee | Jan Vennemann |
Created | 2019-03-06T18:51:35.000+0000 |
Updated | 2019-08-02T13:58:02.000+0000 |
Description
Hello,
When using a CUSTOM OVERLAY on an app on the X iPhone series and It came to attention that the camera preview looks like 'zoomed'. The actual picture that you take has more area that the one you previewed.
*Test Code:*
var window = Ti.UI.createWindow({
backgroundColor : '#FFF'
});
var recording = false;
const overlay = Ti.UI.createView();
const shutterButton = Ti.UI.createButton({
width : 100,
height : 100,
text : 'Record',
bottom : 10
});
shutterButton.addEventListener('click', function(){
recording && Ti.Media.stopVideoCapture();
!recording && Ti.Media.startVideoCapture();
recording = !recording;
shutterButton.text = recording ? 'Stop' : 'Record';
});
overlay.add(shutterButton);
// create button, register the modified click callback, add button to window
function addButton(title, clickCallback) {
var button = Ti.UI.createButton({
title : title,
width : '300',
height : '50'
});
button.addEventListener('click', function() {
Ti.Media.showCamera({
mediaType : Ti.Media.MEDIA_TYPE_VIDEO,
overlay: overlay, // <- THIS IS THE IMPORTANT PART
showControls:false
});
clickCallback();
Ti.Media.vibrate();
});
window.add(button);
}
// camera with front specified after switching to back
// checks if switch function actually works, opposed to it being the default
addButton('Front Camera Test', function() {
Ti.Media.switchCamera(Ti.Media.CAMERA_BACK);
Ti.Media.switchCamera(Ti.Media.CAMERA_FRONT);
});
window.open();
*Test Environment:*
Appcelerator Command-Line Interface, version 7.0.9
Operating System
Name = Mac OS X
Version = 10.14
Architecture = 64bit
# CPUs = 4
Memory = 8589934592
Node.js
Node.js Version = 8.9.1
npm Version = 5.5.1
Titanium CLI
CLI Version = 5.1.1
Titanium SDK
SDK Version = 7.5.1.GA,7.5.0.GA
*Steps to reproduce:*
Use the above test code and click on "Front Camera Test" button.
NOTE: I have tested it on iPhone 5s and got similar zoomed on front camera.
Thanks
Attachments
File | Date | Size |
---|---|---|
Image_from_iOS_(1).png | 2019-03-12T14:35:44.000+0000 | 4273139 |
Image_from_iOS.png | 2019-03-12T14:35:51.000+0000 | 5016931 |
Results after using new code.jpg | 2019-03-13T13:47:04.000+0000 | 69478 |
This is default behavior. If you use an overlay you need to specify a [transform](https://docs.appcelerator.com/platform/latest/#!/api/CameraOptionsType-property-transform) to adjust the camera preview view yourself. For example to just show the camera in its default 4:3 format centered on the screen you can use the following code:
If no
transform
is specified we will calculate a transform to fill the entire screen.The transform in my example only consists of a translate operation to make the preview view centered vertically. Since the camera ratio and screen ratio is different there are only those two solutions. Either keep the camera view at 4:3 ratio and have empty space at the top/bottom (see the iOS camera app), or zoom in and have the preview view fill the entire screen, which results in the actual photo having more area than the preview shows (see our default overlay view). I cannot give a general recommendation here since it depends on what they want and how their camera interface should look like. They can either go for our default option which scales the preview view to fill the entire screen or provide a custom transformation matrix to position/scale the view to fit their needs.
The scale is calculated based on the screen height so that it perfectly fits on the X-axis. See the transform we use [here](https://github.com/appcelerator/titanium_mobile/blob/c78a18100d528999cb505d24b93215978a013618/iphone/Classes/MediaModule.m#L1686). If you want to double check, switch between the default camera app and an app with our overlay view while holding the phone steady. The top and bottom edges of the preview views show exactly the same content. There is now overflowing on the X-axis. The aspect ratio of the camera changes based on phone orientation. In landscape it is 4:3 and in portrait 3:4 respectively. By default you always refer to the aspect ratio in landscape orientation (same as for the screen that is specified as 19.5:9 which is obviously the landscape orientation aspect ratio).
Sorry, i just noticed you are using video media type. The default resolution of videos is different so you need to adjust the transform. Simply change the aspect ratio in my above code example to
const cameraAspectRatio = 16.0 / 9.0;
. Our standard overlay only accounts for photos which are taken in 4:3 format.It sure is possible that the front camera has a different aspect ratio. Please refer to the iPhone device specs to see what it actually is. I don't know them all out of my head. The math stays the same you just have to use the correct aspect ratio. The empty space at the bottom is most likely because you only scale the view but not translate it to the center.
Closing due to no recent activity / feedback.