The camera overlaps the entire screen on some mobile devices

[fatimafpitx]

Describe the bug
When using CameraPreview, on certain mobile devices (Samsumg Galaxy A53 5G, Con Android 14, One Plus nord, Android 14), the component, despite being configured to occupy only half the screen, overlaps and covers the entire screen. The buttons underneath still function—pressing them either takes a photo or closes the camera—but they are not visible.

It is worth noting that the camera displays correctly on the web, but when generating an APK, its appearance changes depending on the mobile model.

Additionally, it doesn't seem to respond to the CSS styles applied to the div containing the camera, and also is important to notice that CameraPreview runs inside a Modal.

To Reproduce
Steps to reproduce the behavior:
On the previously mentioned models where this error occurs, the camera is executed using the CameraPreview.start method with the configuration shown in the screenshot. You'll notice that the screen overlaps the rest of the elements in the Modal.

Expected behavior
The camera should occupy the full width of the screen and half of its height, without overlapping the buttons.

Screenshots
Configuration:

How it displays on the devices where it fails:

How it displays on the devices where it works:

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version Windows 11 Version 24H2

Smartphone (please complete the following information):

• Device: Samsung Galaxy A53 5G
• OS: Android 14
• OS Customization Layer: One UI 6.1

Additional context

I’m attaching the code where the CameraPreview is executed:

import React, { useEffect, FC, useState } from "react";
import Button from "@amiga-fwk-web/components-action/button";
import Modal from "@amiga-fwk-web/components-surfaces/modal";
import useIntl from "@amiga-fwk-web/components-intl/use-intl";
import { useNotifications } from "@amiga-fwk-web/components-feedback/notifications-provider";
import Loader from "@amiga-fwk-web/components-feedback/loader";
import { formatDateYYYYMMDDHHMMSS } from "@/shared/utils/Utils";
import { CameraPreview } from "@capacitor-community/camera-preview";
import {
CustomImg,
FormNewCommentOtdetailValues,
initialFormNewCommentOtdetailValues,
} from "@/shared/models/Interfaces";
import { useNetwork } from "../network-provider/network-provider";
import "./modal-camera.css";

interface ModalCameraProps {
isOpen: boolean;
onCloseModal: () => void;
onTakePicture: (image: CustomImg) => void; // Callback para enviar la imagen
}

export const ModalCamera: FC = ({ isOpen, onCloseModal, onTakePicture }) => {
const intl = useIntl();
const notifications = useNotifications();
const [formValues] = useState(initialFormNewCommentOtdetailValues);
const { networkConnected } = useNetwork();
const [loadingCamera, setLoadingCamera] = useState(false);
const [isCameraActive, setIsCameraActive] = useState(false);

useEffect(() => {
const startCamera = async () => {
if (!isCameraActive) {
setLoadingCamera(true);
await CameraPreview.start({
parent: "cameraPreview",
position: "rear",
width: window.innerWidth,
height: window.innerHeight,
paddingBottom: 16,
});
setIsCameraActive(true);
setLoadingCamera(false);
}
};
const stopCamera = async () => {
if (isCameraActive) {
await CameraPreview.stop();
setIsCameraActive(false);
setLoadingCamera(false);
}
};

if (isOpen) {
  localStorage.setItem("hidePin", "true");
  startCamera();
} else {
  stopCamera();
}
return () => {
  stopCamera(); // Asegura que la cámara se detiene al desmontarse el componente
  localStorage.setItem("hidePin", "false");
};

}, [isCameraActive, isOpen, notifications, onCloseModal]);

const takePicture = async () => {
if (formValues.imagesUploaded.length >= 4) {
notifications.info(intl.formatMessage({ id: "app.otDetail.maxImages" }), {
action: { text: "OK", onClick: () => null },
});
return;
}

if (!networkConnected()) {
  notifications.info(intl.formatMessage({ id: "app.otDetail.errorNetwork" }), {
    action: { text: "OK", onClick: () => null },
  });
  return;
}

try {
  const image = await CameraPreview.capture({ quality: 50, width: 1000 });
  const base64 = image.value;

  if (base64) {
    const newImg: CustomImg = {
      base64,
      extension: ".jpg",
      customName: formatDateYYYYMMDDHHMMSS(new Date()),
    };
    onTakePicture(newImg);
    onCloseModal();
  }
} catch (error) {
  notifications.info(intl.formatMessage({ id: "app.otDetail.errorCapturingImage" }), {
    action: { text: "OK", onClick: () => null },
  });
}

};

return (

{loadingCamera && (

)}

<Button
className="button"
data-testid="btn-take-picture"
kind="primary"
fullWidth
label={intl.formatMessage({ id: "app.otDetail.takePicture" })}
onClick={takePicture}
/>
<Button
className="button"
data-testid="btn-close-camera"
kind="primary"
fullWidth
label={intl.formatMessage({ id: "app.otDetail.closeCamera" })}
onClick={() => {
onCloseModal();
}}
/>

);
};

export default ModalCamera;

And also the css:
.modal-camera {
justify-content: flex-start;
align-items: center;
height: 100%;
}

/* #cameraPreview {
width: 100%;
height: 50vh;
} */

.modal-camera .button-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 50vh;
gap: 16px;
}

.modal-camera .loader-container {
display: flex;
justify-content: center;
margin-top: 64px;
min-height: 380px;
}

[Nakira]

I have the same issue but cannot really understand.

When I set manual width and height and manual x and y. I get the preview to respect the dimensions and position.

When I set some precalculated values it goes full screen.

I suspect there is something wrong whenever the numbers are not integers.

I'm still digging , will update my comment with my findings if I find any 😁

[Nakira]

Ok I did some digging 👍

The code uses integers for width, height, x, y, and paddingBottom. Therefore, you cannot directly use float values like 19.5 for these parameters.

Here's how the values are handled in the code:

Android: The CameraPreview.java plugin's startCamera method retrieves width, height, x and y as integers from the PluginCall. These integer values are then converted to density-independent pixels (DIP) using TypedValue.applyDimension(). Finally, the setRect method in CameraActivity.java receives these integer values.

// android/src/main/java/com/ahm/capacitor/camera/preview/CameraPreview.java bridge .getActivity() .runOnUiThread( new Runnable() { @Override public void run() { DisplayMetrics metrics = getBridge().getActivity().getResources().getDisplayMetrics(); // offset int computedX = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, x, metrics); int computedY = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, y, metrics);

// size
                    int computedWidth;
                    int computedHeight;

                    if (width != 0) {
                        computedWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width, metrics);
                    } else {
                        Display defaultDisplay = getBridge().getActivity().getWindowManager().getDefaultDisplay();
                        final Point size = new Point();
                        defaultDisplay.getSize(size);

                        computedWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, size.x, metrics);
                    }

                    if (height != 0) {
                        computedHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, height, metrics);
                    } else {
                        Display defaultDisplay = getBridge().getActivity().getWindowManager().getDefaultDisplay();
                        final Point size = new Point();
                        defaultDisplay.getSize(size);

                        computedHeight =
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, size.y, metrics) - computedPaddingBottom;
                    }

                    fragment.setRect(computedX, computedY, computedWidth, computedHeight);

iOS: Similarly, the Plugin.swift file retrieves width, height, x, y, and paddingBottom as integers. These are then converted to CGFloat values, which can represent floating-point numbers, but they are initialized from integers.

// ios/Plugin/Plugin.swift @objc public class CameraPreview: CAPPlugin { ... // swiftlint:disable identifier_name var x: CGFloat? var y: CGFloat? // swiftlint:enable identifier_name var width: CGFloat? var height: CGFloat? var paddingBottom: CGFloat? ... @objc func start(_ call: CAPPluginCall) { ... self.width = CGFloat(call.getInt("width")!) self.height = CGFloat(call.getInt("height")!) self.x = call.getInt("x") != nil ? CGFloat(call.getInt("x")!)/UIScreen.main.scale: 0 self.y = call.getInt("y") != nil ? CGFloat(call.getInt("y")!)/UIScreen.main.scale: 0 if call.getInt("paddingBottom") != nil { self.paddingBottom = CGFloat(call.getInt("paddingBottom")!) } 

Explanation

While CGFloat in Swift can hold floating-point values, the plugin is designed to receive integer values from the JavaScript/TypeScript code.

Recommendation

Round to Nearest Integer: If you need fractional pixel precision, consider rounding your float values to the nearest integer before passing them to the CameraPreview.start() method. Alternative Approach (if needed): If fractional pixels are required, you would need to modify the native Android and iOS code to accept and handle float/double values for these parameters. This would involve changing the data types in the plugin's .java and .swift files and ensuring that the layout calculations correctly use these floating-point values. This is not a trivial change...

Credits to talktogithub, testing this right now with rounded values

If someone can confirm....

I will submit a PR for documentation if that's the case.
And if a motivated one want to add a PR to manage floating values , you would be my hero. I may this guy but I need to finish my project first...

[Nakira]

Yes that's it... You need to round your computes. Just tested. i can handle integer values for now :-)

[Nakira]

#382

[luizpbello]

i try this in my code, and doesn't work