🐛 Preview looks stretched on Android #2583
Comments
|
We've also noticed this when running on Android emulator. On the emulator the preview is stretched and also the co-ordinates (when using the barcode scanner) is off in x. Only have one real Android device and there the preview is not stretched. |
|
Same here. I have a stretched and zoomed preview on Android that makes it unusable. On Android: On iOS |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
I'm experiencing the same issue. I upgraded to version 3.9.0 hoping to address this problem: #2519 Previously, the stretching was vertical, but now it is horizontal. |
|
Sorry, I would like to help more with Kotlin, but I don't have any idea. I've tried changing the resizeMode prop from 'cover' to 'contain,' and this is the result (picture). I don't know why I have these measurements (the container has 600 height x 300 width). Are these the default preview measurements? Anyway, the preview still shows a stretched capture. Samsung Galaxy J6+ EDIT: So @mrousavy this is not supported in this release? 
|
|
Hello. I've looked into the |
|
@bruno-centanaro can you submit a PR? I can take a look and others can test this. |
This is just the default value. It will be updated later by the |
|
Sorry, I messed up, as for my first message, it was containerAspectRatio instead of contentAspectRatio and not vice-versa. Nevertheless now that i get the intended use I think that's correct |
Interesting - I think this PR fixes that: #2588 |
|
I believe that the aspect ratio calculation is correct, are you sure that swapping the aspect ratios is right? Can you just quickly post your diff or what exactly you changed so I can take a look now? Otherwise a PR after work is also much appreciated. Before and after screenshots are all I need |
|
That PR does cause the onMeasure to re-run, but it is strange because the preview is still stretched. This are the logs without my aspect ratio change
I'm not sure if swapping the aspect ratio's is the correct way to do it, it works on my phone. This is the code private fun getSize(contentSize: Size, containerSize: Size, resizeMode: ResizeMode): Size {
val contentAspectRatio = contentSize.width.toDouble() / contentSize.height
val containerAspectRatio = containerSize.width.toDouble() / containerSize.height
val widthOverHeight = when (resizeMode) {
ResizeMode.COVER -> contentAspectRatio > containerAspectRatio
ResizeMode.CONTAIN -> contentAspectRatio < containerAspectRatio
}
Log.i(TAG, "Content Aspect Ratio: $contentAspectRatio, Container Aspect Ratio: $containerAspectRatio widthOverHeight: $widthOverHeight ($resizeMode)")
return if (widthOverHeight) {
// Scale by width to cover height
val scaledWidth = containerSize.height * containerAspectRatio
Size(scaledWidth.roundToInt(), containerSize.height)
} else {
val scaledHeight = if (containerAspectRatio.isNaN()) containerSize.width / contentAspectRatio else containerSize.width / containerAspectRatio
Log.i(TAG, "Scaled Height: $scaledHeight, containerSize: $containerSize, contentAspectRatio: $contentAspectRatio")
Size(containerSize.width, scaledHeight.roundToInt())
}
} |
|
Uhm well this code: val scaledWidth = containerSize.height * contentAspectRatio
val scaledWidth = containerSize.height * containerAspectRatio
Size(scaledWidth.roundToInt(), containerSize.height)Effectively does nothing, it's the same as containerSize(1080 / 1920 * 1080 = 1920, so both width and height always stay the same values as before) And then the second part: val scaledHeight = if (containerAspectRatio.isNaN()) containerSize.width / contentAspectRatio else containerSize.width / containerAspectRatio
|
|
Yes, to be honest the widthOverHeight I did not test it as its false for me |
|
I tried this PR #2588, but the preview is still stretched. |
|
For me, we were using two aspect ratio, 4:3 and 16:9, 16:9 doesn't show any stretching issue, but I do notice issue in case of 4:3. Tested on oneplus Nord, back camera |
|
there is update for this, i am still get this issue, sometime when i reload after save, the preview is normally, when go back to previous page and open camera again, this happen again |
|
|
|
I have the same issue with landscape stretching, and this is what helped me (since 3.7.1). The issue still persists on 3.9.0. I think division operator here is not correct, it should be multiplication. |
|
The operators there are correct I think. For anyone who has issues and is sure the aspect ratio of the camera container is the same as the resolution's one this works for me index ba3c94b..cc19356 100644
--- a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/PreviewView.kt
+++ b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/PreviewView.kt
@@ -94,6 +94,10 @@ class PreviewView(context: Context, callback: SurfaceHolder.Callback) :
val contentAspectRatio = contentSize.width.toDouble() / contentSize.height
val containerAspectRatio = containerSize.width.toDouble() / containerSize.height
+ if (!(contentAspectRatio > 0 && containerAspectRatio > 0)) {
+ return contentSize
+ }
+
val widthOverHeight = when (resizeMode) {
ResizeMode.COVER -> contentAspectRatio > containerAspectRatio
ResizeMode.CONTAIN -> contentAspectRatio < containerAspectRatio
@@ -101,11 +105,11 @@ class PreviewView(context: Context, callback: SurfaceHolder.Callback) :
return if (widthOverHeight) {
// Scale by width to cover height
- val scaledWidth = containerSize.height * contentAspectRatio
+ val scaledWidth = containerSize.height * containerAspectRatio
Size(scaledWidth.roundToInt(), containerSize.height)
} else {
// Scale by height to cover width
- val scaledHeight = containerSize.width / contentAspectRatio
+ val scaledHeight = containerSize.width / containerAspectRatio
Size(containerSize.width, scaledHeight.roundToInt())
}
}Please make sure the aspect ratio's are the same otherwise I don't think that will work |
Tested this patch, this resolves the issue we were having with 4:3 aspect ratio. |
Tried this on a Samsung Galaxy (A04e) but the preview remains stretched and zoomed. Samsung Galaxy (A04e) iPhone 14 Pro |
|
It seems as your container aspect ratio might not be the same as the video preview (set on the format prop) |
I believe it is the same. Here is how I set it up: |
|
The aspect ratio of the preview is the same as video, not the picture one, also the fact that you use an aspect ratio in the format does not necessarily mean it is supported by the camera, maybe try console logging the format to check |
This seems to have sorted the issue for me, was occurring on a Fairphone 4 when my camera preview was not the full size of my screen |
Here is what I've tried: Is this the correct/ideal way to set the format wrt to width and height? Logging the format to the console : No idea why the photo and video dimensions are not the same. When I manually reset the width or height on the camera once it's mounted, the preview renders correctly: But it never renders correctly on the initial mount. Tried it with @swamywiz's batch and without (same behaviour). |
|
Hey folks, I have been keeping up with the past few updates but i cant seem to get the preview to be the same as the capture result (works fine on IOS, testing with Samsung A14 device) My preview is either 1:1 Square or 4:3 so it is dynamic but no matter what the zoom is always slightly zoomed in compared to the result. I am using v 3.9.1 currently to test. trim.10AEA28A-0997-44EC-BBB2-9802E37FED75.MOV |
|
Hi, guys, are you going to fix this issue with stretched preview in this version? without that this version is basically useless. I believe that the JS hacks are not the solution and the problem should be solved on the native side. Thanks for your commitment. |
|
I downgraded the version to 2.16.8, which solved all the stretch issues and also supported landscape mode. |
|
I am seeing this since updating from |
|
Guys, I found out something insteresting. You can test if you want. You simply use Dimensions.get instead of 'absoluteFill': <Camera Now I reload the screen and the error persist. But when I change some value for 'width' or 'height'. Before: Does someone knows the solution? diff --git a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraDeviceDetails.kt b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/core/CameraDeviceDetails.kt |
I tried, got the error:
|
|
After hours testing, the version that worked for me is: "react-native-vision-camera": "3.8", |
|
The only workaround I am able to accomplish right now is store the started state and apply the width and height once it has started. If you're keeping the |
|
Hey everybody! I just released a new V4 beta (v4.0.0-beta.7) where I fixed a bunch of issues! 💪🚀 Can you test that and see if that fixes the issue for you? 😅 You might need to increase the |
|
On my samsung tab I have still some stretching / zoom issues It depends on the ratio of the preview:
I am forcing aspect ratio for camera format But I have no more rotated pictures with front camera |
|
On my redmi I have no issue with ratio 1, only 0.625 returns me a zoomed-in captured image |
Hi @mrousavy, On the good news side, the android preview stretching that I saw on 3.9.1 looks seems resolved for me on the new beta build. As 4.0.0 is a major version update, is there anything I may be missing as far as an api change from 3.9.1 that I might need to know? I'm assuming not, if it's working properly on iOS I can provide more code, but the basic usage I have is the following: |
I was about to test it in this version, but i got this error if I use |
|
Anyone here using Expo with Android SDK (34)? |
Same here |
|
@iagoandrei @maxxcs sent a fix for the one thing i'm really confuse is that this thread is about a "Preview stretched", the issue you guys reported is only reproduced on my side when i take a picture and orientation is other than the default value. you should be able to validate the stretching thing for the preview without take a picture or any other action, what i'm missing here? is the preview ok for you? |
|
Hey @programminPete - I just fixed that code scanning bug in latest V4 beta! :) Anyways - great to hear that V4 now works perfectly! If you appreciate my work, please consider 💖 sponsoring me on GitHub 💖 so I can keep maintaining this library, fixing bugs and building new features! :) |
|
Sorry, late to this - Im completely buried in other issues right now. Can I ask are you aware of / have fixed, the issue that I brought up in this thread above, where the field of view of the Preview screen is more narrow than the field of view of the resulting image? Its not stretching of the preview image, but more like clipping 10% of the width of either side |
|
Morning @mrousavy . Seems to be working now, thanks! |
|
Thanks @programminPete! much appreciated! :) |
This is the best way to solve this issue at the moment. |
Can you please apply the fix to the current stable release as well? With all due respect, this is a serious annoying situation and should be fixed in the current stable major version; not a beta one! |
|
@n-ii-ma I get your frustration, however do realise that this is basically a hobby project. We are incredibly lucky that we can use such a library and therefore have a very good camera experience with so little effort. There is so much what goes into building and maintaining a project like this, and @mrousavy is basically doing it by himself and for free for the most of us (which is kind of insane if you ask me, pls don't make this project private @mrousavy 😅😂). I think you should adjust your expectations according to that perspective, which is also mentioned in the You do mention a good point that it can be frustrating for new people coming to the project, since this issue might be a bit hard to find. Maybe a solution for now could be to add a "Known issues" section to the "Troubleshooting" docs so that user might find this issue more easily. Maybe you could do a proposal to add such a thing? |
|
Thanks for the nice words @Dingenis @n-ii-ma with all due respect, I'm assuming you didn't check out the actual change/commit and the diff, but basically the entire architecture is rebuilt from scratch. I use a completely different Camera engine now under the hood.
The whole point of the beta version is to update and improve the library. That's why it's the latest beta. If you want the fix, get the beta. On main it is still broken as you experienced, because I just fixed it in the beta. Also, if you really want a fix for the current stable you could pay me to fix it for you. I am no longer on V3 myself, I am on V4 already with my apps. |
After all the attempts to fix on Android, this is the only one that worked. On v4.0.1 |
|
I had similar problems with "torch" as well, but this only happened after the stack navigation, I believe that the real problem lies in this "process" and not in the vision-camera. |
|
side question related to this issue: are the scan event coordinates normalized to the react coordinate system in 4.0 @mrousavy? |
and others
What's happening?
The preview looks stretched on Android.
I figured out that it becomes ok when I change the height of the container in which the Camera renders. Here are a screenshot and logs after changing the height in debug mode.
It reproduces in the example app as well. To reproduce that, I needed to tap the QR-icon. Here is a screenshot.
Investigating the problem I found out that
onMeasureinPrevieView.ktmethod doesn't call after changing the surface size (you can see this in logs). Maybe this is a problem but I'm not sure as I don't have great experience in android development.Reproduceable Code
Relevant log output
Camera Device
{ "formats": [], "sensorOrientation": "landscape-left", "hardwareLevel": "limited", "maxZoom": 10, "minZoom": 1, "maxExposure": 9, "supportsLowLightBoost": false, "neutralZoom": 1, "physicalDevices": [ "telephoto-camera" ], "supportsFocus": true, "supportsRawCapture": false, "isMultiCam": false, "minFocusDistance": 0, "minExposure": -9, "name": "BACK (0)", "hasFlash": false, "hasTorch": false, "position": "back", "id": "0" }Device
Android Emulator (Pixel 7 Pro API 33), OnePlus 10R (CPH2411 Android 13))
VisionCamera Version
3.9.0
Can you reproduce this issue in the VisionCamera Example app?
Yes, I can reproduce the same issue in the Example app here
Additional information
The text was updated successfully, but these errors were encountered: