Skip to content

Conversation

shiv19
Copy link

@shiv19 shiv19 commented Jul 31, 2025

Summary

This pull request introduces significant enhancements to the Camera plugin, focusing on multi-camera support and landscape mode functionality for both Android and iOS platforms. The changes include new features and UI improvements to improve the user experience when capturing and previewing images using the @capacitor/camera package

Resolves #1616

ℹ️ Disclaimer
This code was generated with the help of GPT-4.1, Gemini 2.5 Pro, Claude 3.7 Sonnet and Claude Sonnet 4, with human guidance and UX review.

Demos

Android - https://github.com/user-attachments/assets/5813e036-065d-49dc-bd1f-2097c657fdc8

iOS - user-attachments/assets/f70930f8-495d-4b65-bb1c-a73479a28218

Example Usage

const options: ImageOptions = {
          quality: 80,
          width: maxWidth,
          height: maxHeight,
          source: CameraSource.CameraMulti,
          resultType: CameraResultType[outputType],
          correctOrientation: true,
          saveToGallery: true,
};
return Camera.getPhoto(options);

Example Response

{
    "photos": [
        {
            "format": "jpeg",
            "exif": {
                "ColorSpace": "65535",
                "ComponentsConfiguration": "???",
                "DateTime": "2025:07:31 12:57:39",
                "DateTimeDigitized": "2025:07:31 12:57:39",
                "DateTimeOriginal": "2025:07:31 12:57:39",
                "ExifVersion": "0210",
                "ExposureTime": "0.01",
                "Flash": "0",
                "FlashpixVersion": "0100",
                "FocalLength": "1000/1000",
                "FNumber": "4.0",
                "ImageLength": "640",
                "ImageWidth": "1280",
                "LightSource": "0",
                "Make": "Google",
                "Model": "sdk_gphone16k_arm64",
                "Orientation": "1",
                "PhotographicSensitivity": "200",
                "ResolutionUnit": "2",
                "SubSecTime": "871",
                "SubSecTimeDigitized": "000",
                "SubSecTimeOriginal": "000",
                "WhiteBalance": "0",
                "XResolution": "72/1",
                "YCbCrPositioning": "1",
                "YResolution": "72/1"
            },
            "path": "file:///data/user/0/<your_app_package_name_here>/cache/1000000027.1753941688084.jpeg",
            "webPath": "http://192.168.1.2:8101/_capacitor_file_/data/user/0/<your_app_package_name_here>/cache/1000000027.1753941688084.jpeg",
            "saved": false
        },
        {
            "format": "jpeg",
            "exif": {
                "ColorSpace": "65535",
                "ComponentsConfiguration": "???",
                "DateTime": "2025:07:31 12:57:45",
                "DateTimeDigitized": "2025:07:31 12:57:45",
                "DateTimeOriginal": "2025:07:31 12:57:45",
                "ExifVersion": "0210",
                "ExposureTime": "0.01",
                "Flash": "0",
                "FlashpixVersion": "0100",
                "FocalLength": "1000/1000",
                "FNumber": "4.0",
                "ImageLength": "640",
                "ImageWidth": "1280",
                "LightSource": "0",
                "Make": "Google",
                "Model": "sdk_gphone16k_arm64",
                "Orientation": "1",
                "PhotographicSensitivity": "200",
                "ResolutionUnit": "2",
                "SubSecTime": "312",
                "SubSecTimeDigitized": "000",
                "SubSecTimeOriginal": "000",
                "WhiteBalance": "0",
                "XResolution": "72/1",
                "YCbCrPositioning": "1",
                "YResolution": "72/1"
            },
            "path": "file:///data/user/0/<your_app_package_name_here>/cache/1000000028.1753941688118.jpeg",
            "webPath": "http://192.168.1.2:8101/_capacitor_file_/data/user/0/<your_app_package_name_here>/cache/1000000028.1753941688118.jpeg",
            "saved": false
        },
        {
            "format": "jpeg",
            "exif": {
                "ColorSpace": "65535",
                "ComponentsConfiguration": "???",
                "DateTime": "2025:07:31 12:57:38",
                "DateTimeDigitized": "2025:07:31 12:57:38",
                "DateTimeOriginal": "2025:07:31 12:57:38",
                "ExifVersion": "0210",
                "ExposureTime": "0.01",
                "Flash": "0",
                "FlashpixVersion": "0100",
                "FocalLength": "1000/1000",
                "FNumber": "4.0",
                "ImageLength": "640",
                "ImageWidth": "1280",
                "LightSource": "0",
                "Make": "Google",
                "Model": "sdk_gphone16k_arm64",
                "Orientation": "1",
                "PhotographicSensitivity": "200",
                "ResolutionUnit": "2",
                "SubSecTime": "329",
                "SubSecTimeDigitized": "000",
                "SubSecTimeOriginal": "000",
                "WhiteBalance": "0",
                "XResolution": "72/1",
                "YCbCrPositioning": "1",
                "YResolution": "72/1"
            },
            "path": "file:///data/user/0/<your_app_package_name_here>/cache/1000000026.1753941688143.jpeg",
            "webPath": "http://192.168.1.2:8101/_capacitor_file_/data/user/0/<your_app_package_name_here>/cache/1000000026.1753941688143.jpeg",
            "saved": false
        }
    ]
}

Changes Included

  • feat(camera): adds multi-camera feature for Android
    • Introduced the ability to use multiple cameras on Android devices.
  • feat(camera): multi shot camera UI improvements with immersive mode support
    • Enhanced the multi-shot camera UI and added immersive mode for a better user experience.
  • feat(camera): iOS multi camera base implementation
    • Added the foundational implementation for multi-camera support on iOS.
  • feat(camera): multi camera image preview support for android
    • Enabled image preview functionality for multi-camera captures on Android.
  • feat(camera): added support for landscape mode multi shot camera on android
    • Implemented landscape mode support for multi-shot camera on Android devices.
  • bugfix(camera): camera preview landscape mode and thumbnail strip bugfix for android
    • Fixed issues related to camera preview and thumbnail strip in landscape mode on Android.
  • feat(camera): landscape mode support for iOS
    • Added landscape mode support for the camera on iOS devices.

Motivation

Sometimes users want to be able to take multiple photos and attach them in the app. The previous UX was jarring and most users instead resort to the phone camera app and then attach files from the gallery, with the multi camera support, users can now take multiple photos without leaving your app.

Testing

  • Verified multi-camera functionality on both Android and iOS devices.
  • Tested landscape mode for camera preview and image capture.
  • Ensured UI improvements and bug fixes work as intended.
  • Mainly tested using S22 Ultra for Android and iPhone 12 for iOS. I recommend testing this further before merging.

Known quirks

  • Android currently saves the images to your camera roll, but iOS doesn't.
  • iOS zooming UX is slightly different from Android, but both support pinch to zoom.
  • When previewing a thumbnail by tapping on it, you can't swipe to the next item in the thumbnail preview list.

Related Issues


Please review the changes and provide feedback or approval for merging into main.

Packed plugin (if anyone wants to try it locally)

capacitor-camera-7.0.1.tgz

@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

The thumbnail bar logic needs optimizations on Android.

@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

Made improvements to image processing on the Android side.
Now we proactively add a processing thumbnail to give the user immediate feedback.
If images are processing when the user clicks done, we wait for the images to finish processing.

@shiv19 shiv19 marked this pull request as draft August 1, 2025 14:37
@shiv19 shiv19 marked this pull request as ready for review August 1, 2025 15:19
@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

Latest iOS Demo: (also updated the link in the PR desc)
https://github.com/user-attachments/assets/f70930f8-495d-4b65-bb1c-a73479a28218

@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

Latest Android Demo: (also updated the link in the PR desc)
https://github.com/user-attachments/assets/5813e036-065d-49dc-bd1f-2097c657fdc8

@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

Latest packed plugin: (also updated the link in the PR desc)
capacitor-camera-7.0.1.tgz

@shiv19
Copy link
Author

shiv19 commented Aug 1, 2025

Works on Android tablet ✅
image

Can't test it on iPad since I don't have one and simulator doesn't simulate camera.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@capacitor/camera take multiple photos via the camera in one session
2 participants