12
Views
1
Comments
[Camera Plugin] Camera Orientation PWA iPad
camera-plugin
Mobile icon
Forge asset by OutSystems
Application Type
Mobile

When using the camera with a PWA on iPad (app added to home screen) and rotated to landscape mode, the styling and orientation is incorrect.

Referencing  "added to home screen", here is an example (youtube):

Add website shortcut to home screen

 The orientation works correctly in all other configurations I can identify:

  • Use it within a browser window in landscape mode, not added to home screen.
  • Use it in portrait mode, added to home screen or browser window.

The below screenshot is directly from the camera plugin demo app, but it affects all my apps that include the camera plugin.

Finally, no matter the orientation or use (browser or added to home screen) on iPad, you get no option to cancel the photo.

This seems like a bug, but am i missing something?


2025-01-31 03-15-38
Irfan Ahamed Abdul Shukoor

Hi @Scott Wolber ,


Camera pluging PWA are sometimes buggy.

They wont automatically rotate. You can try to use JS  to change the orientation.


function fixCameraOrientation() {

const videoEl = document.querySelector("video");

 if (!videoEl) return;

    const angle = screen.orientation?.angle || window.orientation || 0;

    videoEl.style.transformOrigin = "center center";

    switch (angle) {

        case 90:

            videoEl.style.transform = "rotate(90deg)";

            break;

        case -90:

        case 270:

            videoEl.style.transform = "rotate(-90deg)";

            break;

        default:

            videoEl.style.transform = "rotate(0deg)";

            break;

    }

}

fixCameraOrientation();

window.addEventListener("orientationchange", fixCameraOrientation);


Use this in the onready of the screen where the plugin is present or after the camera starts.

Hope it helps.

Thank You

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.