Web camera zoomed in resizing browser to full screen

[omartinma]

Steps to Reproduce

1. Open example below.
2. Resize the browser to full screen.

Expected results:

The camera should not be zoomed in

Actual results:

The camera is zoomed in.

Code sample

```dart void main() => runApp(const MaterialApp(home: CameraExample())); class CameraExample extends StatefulWidget { const CameraExample({Key? key}) : super(key: key); @override State createState() => _CameraExampleState(); } class _CameraExampleState extends State { CameraController? _cameraController; bool get isCameraAvailable => (_cameraController?.value.isInitialized) ?? false; @override Widget build(BuildContext context) { return const Scaffold( body: Center(child: CameraView()), ); } } class CameraView extends StatefulWidget { const CameraView({Key? key, this.onCameraReady}) : super(key: key); final void Function(CameraController controller)? onCameraReady; @override State createState() => _CameraViewState(); } class _CameraViewState extends State { late final CameraController? _cameraController; late final Completer? _cameraControllerCompleter; @override void initState() { super.initState(); _initializeCamera(); } @override void dispose() { _cameraController?.dispose(); super.dispose(); } Future _initializeCamera() async { _cameraControllerCompleter = Completer(); try { final cameras = await availableCameras(); _cameraController = CameraController( cameras[0], ResolutionPreset.max, enableAudio: false, ); await _cameraController?.initialize(); widget.onCameraReady?.call(_cameraController!); _cameraControllerCompleter?.complete(); } catch (error) { _cameraControllerCompleter?.completeError(error); } } @override Widget build(BuildContext context) { return FutureBuilder( future: _cameraControllerCompleter?.future, builder: (context, snapshot) { late final Widget camera; if (snapshot.hasError) { final error = snapshot.error; if (error is CameraException) { camera = Text('${error.code} : ${error.description}'); } else { camera = Text('Unknown error: $error'); } } else if (snapshot.connectionState == ConnectionState.done) { camera = _cameraController!.buildPreview(); } else { camera = const CircularProgressIndicator(); } return camera; }, ); } } ```

Logs

``` No errors ``` ``` No issues found! (ran in 1.4s) ``` ``` [✓] Flutter (Channel stable, 3.3.1, on macOS 12.1 21C52 darwin-arm, locale en-ES) • Flutter version 3.3.1 on channel stable at /Users/oscarmartin/fvm/versions/3.3.1 • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4f9d92fbbd (2 weeks ago), 2022-09-06 17:54:53 -0700 • Engine revision 3efdf03e73 • Dart version 2.18.0 • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/oscarmartin/Library/Android/sdk • Platform android-32, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13F100 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2020.3) • Android Studio at /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 11.0.10+0-b96-7249189) [✓] VS Code (version 1.71.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.48.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 12.1 21C52 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

[alestiago]

I believe the forced sizing is due to https://github.com/flutter/plugins/blob/97d48f4cb610b4f1346e38d5a9919de145be20e6/packages/camera/camera_web/lib/src/camera_service.dart#L289.

[darshankawar]

Thanks for the report. Seeing same behavior upon running code sample provided.

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.3.2, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.3.2 on channel stable at /Users/dhs/documents/fluttersdk/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision e3c29ec00c (8 days ago), 2022-09-14 08:46:55 -0500 • Engine revision a4ff2c53d8 • Dart version 2.18.1 • DevTools version 2.15.0 [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. [✓] Flutter (Channel master, 3.4.0-30.0.pre.18, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.4.0-30.0.pre.18 on channel master at /Users/dhs/documents/fluttersdk/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 9f5174f721 (4 hours ago), 2022-09-25 21:14:31 -0400 • Engine revision 1c232b584c • Dart version 2.19.0 (build 2.19.0-240.0.dev) • DevTools version 2.17.0 [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```

[jgoyvaerts]

I don't think this is a bug, this is just the consequence of changing the aspect ratio. No actual zoom is happening, the camera widget is just trying to display the camera full screen (without white/black bars on the side), so it cuts off top and bottom content making the image appear "zoomed".

You can easily resolve this by placing a Container around the camera and giving it constraints (for example, fixed width or height) depending on what aspect ratio you would like the camera to stick to. This will however create empty space around the camera widget when making the screen larger.

Edit: to verify that no zoom is happening, you can easily place something on the left or right edge of your camera view, then resize the window, and you will still see the object you placed there.

[ollyde]

It's happening with me too @omartinma, only on web. Desktop and mobile are fine.

I tried setting the aspect as you said @jgoyvaerts to my camera aspect and making it small be be sure. It's zoomed in.

Desktop working example

Web square 1:1

Web camera aspect ratio, small to make sure

[notsag-dev]

I have the same issue in flutter web when putting the camera preview inside a container with a different aspect ratio. The resulting container isn't overflowing on either axis and still the browser is going full screen.

It's been quite frustrating given that displaying the default camera preview without an outer container displays it with a landscape orientation even when the phone is in portrait orientation, and the resulting picture when taken is portrait too, but the preview displays it landscape.

[flutter-triage-bot[bot]]

This issue is assigned to @ditman but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[Silfalion]

have the same issue as well

[alestiago]

@ditman are you working on this? It seems that is has been assigned to you for some time now 🙌

[flutter-triage-bot[bot]]

This issue was assigned to @ditman but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

[ibtissamwannas]

any update ? I am facing same issue when trying to add the aspect ration to the camera it stretching

[TalebRafiepour]

I have the same issue

[alestiago]

@omartinma I believe we had an issue for this in Holobooth, where we had to dependency override the plugin with the fixed implementation. Do you recall what fixed it?