{ "id": "173094", "key": "TIMOB-26882", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "11", "description": "Is not a bug in our product", "name": "Not Our Bug" }, "resolutiondate": "2019-08-02T13:58:01.000+0000", "created": "2019-03-06T18:51:35.000+0000", "priority": { "name": "None", "id": "6" }, "labels": [ "engSchedule" ], "versions": [ { "id": "20429", "name": "Release 7.5.1", "archived": false, "released": true, "releaseDate": "2019-02-26" } ], "issuelinks": [], "assignee": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "updated": "2019-08-02T13:58:02.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "Hello,\r\n\r\nWhen 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.\r\n\r\n*Test Code:*\r\n{code}\r\nvar window = Ti.UI.createWindow({\r\n\tbackgroundColor : '#FFF'\r\n});\r\n\r\nvar recording = false;\r\nconst overlay = Ti.UI.createView();\r\nconst shutterButton = Ti.UI.createButton({\r\n\twidth : 100,\r\n\theight : 100,\r\n\ttext : 'Record',\r\n\tbottom : 10\r\n});\r\nshutterButton.addEventListener('click', function(){\r\n\trecording && Ti.Media.stopVideoCapture();\r\n\t!recording && Ti.Media.startVideoCapture();\r\n\trecording = !recording;\r\n\tshutterButton.text = recording ? 'Stop' : 'Record';\r\n});\r\noverlay.add(shutterButton);\r\n\r\n// create button, register the modified click callback, add button to window\r\nfunction addButton(title, clickCallback) {\r\n\tvar button = Ti.UI.createButton({\r\n\t\ttitle : title,\r\n\t\twidth : '300',\r\n\t\theight : '50'\r\n\t});\r\n\r\n\tbutton.addEventListener('click', function() {\r\n\t\tTi.Media.showCamera({\r\n\t\tmediaType : Ti.Media.MEDIA_TYPE_VIDEO,\r\n\t\toverlay: overlay, // <- THIS IS THE IMPORTANT PART\r\n\t\tshowControls:false\r\n\t});\r\n\tclickCallback();\r\n\tTi.Media.vibrate();\r\n});\r\n\r\nwindow.add(button);\r\n}\r\n\r\n// camera with front specified after switching to back\r\n// checks if switch function actually works, opposed to it being the default\r\naddButton('Front Camera Test', function() {\r\n\tTi.Media.switchCamera(Ti.Media.CAMERA_BACK);\r\n\tTi.Media.switchCamera(Ti.Media.CAMERA_FRONT);\r\n});\r\n\r\nwindow.open();\r\n{code}\r\n\r\n*Test Environment:*\r\nAppcelerator Command-Line Interface, version 7.0.9\r\nOperating System\r\n Name = Mac OS X\r\n Version = 10.14\r\n Architecture = 64bit\r\n # CPUs = 4\r\n Memory = 8589934592\r\nNode.js\r\n Node.js Version = 8.9.1\r\n npm Version = 5.5.1\r\nTitanium CLI\r\n CLI Version = 5.1.1\r\nTitanium SDK\r\n SDK Version = 7.5.1.GA,7.5.0.GA\r\n\r\n*Steps to reproduce:*\r\nUse the above test code and click on \"Front Camera Test\" button.\r\n\r\nNOTE: I have tested it on iPhone 5s and got similar zoomed on front camera.\r\n\r\nThanks\r\n", "attachment": [ { "id": "66248", "filename": "Image_from_iOS_(1).png", "author": { "name": "fhaque", "key": "fhaque", "displayName": "Fazlul Haque", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-03-12T14:35:44.000+0000", "size": 4273139, "mimeType": "image/png" }, { "id": "66249", "filename": "Image_from_iOS.png", "author": { "name": "fhaque", "key": "fhaque", "displayName": "Fazlul Haque", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-03-12T14:35:51.000+0000", "size": 5016931, "mimeType": "image/png" }, { "id": "66251", "filename": "Results after using new code.jpg", "author": { "name": "fhaque", "key": "fhaque", "displayName": "Fazlul Haque", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-03-13T13:47:04.000+0000", "size": 69478, "mimeType": "image/jpeg" } ], "flagged": false, "summary": "iOS: Front Camera Preview looks 'zoomed' on iPhone X", "creator": { "name": "fhaque", "key": "fhaque", "displayName": "Fazlul Haque", "active": false, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "fhaque", "key": "fhaque", "displayName": "Fazlul Haque", "active": false, "timeZone": "America/Los_Angeles" }, "environment": "iOS Camera, iPhone X, Overlay", "closedSprints": [ { "id": 1123, "state": "closed", "name": "2019 Sprint 7", "startDate": "2019-03-18T17:27:25.993Z", "endDate": "2019-03-30T17:27:00.000Z", "completeDate": "2019-03-29T18:02:37.441Z", "originBoardId": 114 } ], "comment": { "comments": [ { "id": "446615", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "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.\r\n\r\nFor example to just show the camera in its default 4:3 format centered on the screen you can use the following code:\r\n{code:js}\r\nconst cameraAspectRatio = 4.0 / 3.0;\r\nconst cameraViewHeight = Ti.Platform.displayCaps.platformWidth * cameraAspectRatio;\r\nlet transform = Ti.UI.create2DMatrix();\r\ntransform = transform.translate(0, (Ti.Platform.displayCaps.platformHeight - cameraViewHeight) / 2.0);\r\nTi.Media.showCamera({\r\n mediaType : Ti.Media.MEDIA_TYPE_PHOTO,\r\n overlay,\r\n transform,\r\n showControls: false,\r\n autohide: false\r\n});\r\n{code} \r\n\r\nIf no {{transform}} is specified we will calculate a transform to fill the entire screen.", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-03-07T15:57:18.000+0000", "updated": "2019-03-07T16:15:36.000+0000" }, { "id": "446714", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "The transform in my example only consists of a translate operation to make the preview view centered vertically.\r\n\r\nSince 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).\r\n\r\nI 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.", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-03-11T13:10:44.000+0000", "updated": "2019-03-11T13:10:44.000+0000" }, { "id": "446759", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "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].\r\n\r\nIf 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.\r\n\r\nThe 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).", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-03-12T10:14:25.000+0000", "updated": "2019-03-12T10:14:25.000+0000" }, { "id": "446775", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "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;}}.\r\n\r\nOur standard overlay only accounts for photos which are taken in 4:3 format.", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-03-12T17:44:28.000+0000", "updated": "2019-03-12T17:44:28.000+0000" }, { "id": "446813", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "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.\r\n\r\nThe empty space at the bottom is most likely because you only scale the view but not translate it to the center.", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-03-13T23:02:59.000+0000", "updated": "2019-03-13T23:02:59.000+0000" }, { "id": "450239", "author": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "body": "Closing due to no recent activity / feedback.", "updateAuthor": { "name": "jvennemann", "key": "jvennemann", "displayName": "Jan Vennemann", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-08-02T13:58:01.000+0000", "updated": "2019-08-02T13:58:01.000+0000" } ], "maxResults": 16, "total": 16, "startAt": 0 } } }