Preview not resized and displayed correctly when orientation changes

[anth0]

Describe the bug Camera preview is not resized and displayed correctly when changing device's orientation.

To Reproduce Steps to reproduce the behavior:

1. Start the camera with the device in portrait
2. Rotate the device to landscape

Expected behavior Displayed preview should be resized according to landscape as it would be if the camera was started with the device in landscape.

Screenshots Current portrait Current when changed to landscape Current when started in landscape

Smartphone (please complete the following information):

• Device: Pixel 3 XL
• OS: Android
• Version: API R

Additional context Add any other context about the problem here.

[gbrits]

Same thing happens on my iPhone XS. Have you tried window.screen.orientation.lock('landscape'); ?

[anth0]

For iOS there is the rotateWhenOrientationChanged property that can be set on the CameraPreviewOptions on the plugin. This seems to work fine for iOS but there is no similar property for Android.

I don't want to lock the orientation in my app as I want users to be able to take pictures either in portrait or landscape.

[gbrits]

In my case, I want the orientation not to change out of landscope mode - does rotateWhenOrientationChanged set to false (that's its default right?) make a difference?

[anth0]

/** Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) */ rotateWhenOrientationChanged?: boolean;

So you should try setting it to false manually. Also, if your app should always be used in landscape then I'd suggest blocking orientations natively within xcode for the whole app.

[gbrits]

Thanks for that, and yes I have locked it to landscape, but it was loading initially as portrait & then switching to landscape, and the switch is customer-visible. But I will test it now with the rotateWhenOrientationChanged boolean applied & see if it fixed it up.

[ryaa]

This is a known limitation. Setting rotateWhenOrientationChanged prop to false should help until this is fixed.

[gbrits]

Turns out that removing these settings:

    // width: window.screen.width,
    // height: window.screen.height,

made the following difference on my iPhone:

Before: https://ibb.co/h19gtX8 After: https://ibb.co/h19gtX8

[gbrits]

So perhaps the calculation on window screen width / height is inaccurate against orientation.

[anth0]

@gbrits I don't set width and height and have a correct behaviour on iOS. Here are my properties:

private static cameraPreviewOptions: CameraPreviewOptions = { position: 'rear', toBack: true, rotateWhenOrientationChanged: true, enableHighResolution: true, parent: 'cameraPreview', className: 'cameraPreview' };

private static captureOptions: CameraPreviewPictureOptions = { quality: 100, width: 2500, height: 5000 };

@ryaa you say it's a known limitation but are you referring to gbrits' issue or mine with Android?

[gbrits]

Hey @anth0 that's precisely what I did, removed those settings. The issue I was encountering was as a result of having those two settings set

[gbrits]

Hey while we're all here & talking -- is there any way to force the torch on?

[ryaa]

@ryaa you say it's a known limitation but are you referring to gbrits' issue or mine with Android?

I refer to the problem with the preview when the orientation is changed.

[ryaa]

Hey while we're all here & talking -- is there any way to force the torch on?

yes. use this method https://github.com/capacitor-community/camera-preview#setflashmodeoptions with 'torch' value as the param

[ryaa]

This PR should fix it https://github.com/capacitor-community/camera-preview/pull/238

I would appreciate if someone could test this and my other fixes (https://github.com/capacitor-community/camera-preview/issues/228 and https://github.com/capacitor-community/camera-preview/issues/232) installing from here npm install ryaa/camera-preview#chore/test-latest-fixes-as-of-20-july-2022

[orest]

@ryaa I can not get to npm install ryaa/camera-preview#chore/test-latest-fixes-as-of-20-july-2022

[ryaa]

ryaa/camera-preview#chore/test-latest-fixes-as-of-20-july-2022

Can you please try ryaa/camera-preview#chore/my-latest-fixes-as-of-21-july-2022 It includes fixes for iOS (https://github.com/capacitor-community/camera-preview/issues/232) and Android (this ticket). Thank you.

[orest]

fix for issue 232 looks good. Tested both iOS and Android. Thank you very much for the fix.