camera: CameraPreview displays landscape images on an mobile web when it is held in a portrait position.

[wjkoh]

Steps to reproduce

The following steps were replicated on Flutter Web, iPhone 15, iOS 17.2.1, and Mobile Safari.

1. Hold an iPhone 15 in a portrait position (with the front-facing camera up and the charging port down).
2. Open iOS Mobile Safari.
3. Navigate to https://camera-preview-bug.web.app/.
4. Tap on the front-facing camera icon on the bottom left.

Expected results

It is expected that CameraPreview would display portrait images, similar to the iOS camera app.

Actual results

However, CameraPreview currently shows cropped landscape images instead.

Interestingly, when accessing the website with the phone already in a landscape position, the camera preview functions correctly. It even displays valid portrait images when the phone is rotated to a portrait position.

Code sample

Code sample

The official camera example from https://github.com/flutter/packages/tree/main/packages/camera/camera/example was used for the website without any modifications.

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.16.8, on macOS 14.2.1 23C71 darwin-arm64, locale en-US)
    • Flutter version 3.16.8 on channel stable at /opt/homebrew/Caskroom/flutter/3.16.4/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (4 weeks ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 121.0.6167.160

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

[danagbemava-nc]

Reproducible using the plugin example app (and site hosted above).

This is not specific to iOS as I see a similar behavior on android (chrome). This might be related to how the CameraPreview widget is setup. I see that the _wrapInRotatedBox method does not apply to the web.

  Widget _wrapInRotatedBox({required Widget child}) {
    if (kIsWeb || defaultTargetPlatform != TargetPlatform.android) {
      return child;
    }

    return RotatedBox(
      quarterTurns: _getQuarterTurns(),
      child: child,
    );
  }

Labeling for further insight from the team.

flutter doctor -v

[!] Flutter (Channel stable, 3.16.9, on macOS 14.3 23D56 darwin-arm64, locale en-GB)
    • Flutter version 3.16.9 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter_beta/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter_beta/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (3 weeks ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.10072.19

[✓] VS Code (version 1.86.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.82.0

[✓] Connected device (4 available)
    • Pixel 7 (mobile) • 28291FDH2001SA            • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)   • 00008020-001875E83A38002E • ios            • iOS 17.3 21D50
    • macOS (desktop)  • macos                     • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)     • chrome                    • web-javascript • Google Chrome 121.0.6167.160
    ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.20.0-4.0.pre.92, on macOS 14.3 23D56 darwin-arm64, locale en-GB)
    • Flutter version 3.20.0-4.0.pre.92 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter_beta/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter_beta/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e1752040a8 (9 hours ago), 2024-02-11 21:36:14 -0500
    • Engine revision 4f119619df
    • Dart version 3.4.0 (build 3.4.0-131.0.dev)
    • DevTools version 2.33.0-dev.6
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.10072.19

[✓] VS Code (version 1.86.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.82.0

[✓] Connected device (5 available)
    • Pixel 7 (mobile)                • 28291FDH2001SA            • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E • ios            • iOS 17.3 21D50
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 121.0.6167.160
    ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[ditman]

@wjkoh, @danagbemava-nc do you think this might be a duplicate of #112280 ?

[wjkoh]

@wjkoh, @danagbemava-nc do you think this might be a duplicate of #112280 ?

I don't think so because the behavior changes depending on the device orientation, not the window is full size or not.

[kristoffer-zliide]

@wjkoh: Can you see if this version is better: https://zliide.github.io/camera-web-mobile-orientation/

[wjkoh]

@wjkoh: Can you see if this version is better: https://zliide.github.io/camera-web-mobile-orientation/

Yes, your version works perfectly on my phone. Thanks for the fix!