[IMPROV] Mobile WEB camera selection should be better

Author: AlexDochioiu

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.0.10
+
+- Improved back camera selection for WEB on mobile
+
 ## 2.0.9+1
 
 - Fix a bad import causing mobile builds to fail

lib/src/web/flutter_qr_web.dart

@@ -118,14 +118,49 @@ class _WebQrViewState extends State<WebQrView> {
     }
 
     try {
-      var constraints = UserMediaOptions(
-          video: VideoOptions(
-        facingMode: (facing == CameraFacing.front ? 'user' : 'environment'),
-      ));
-      // dart style, not working properly:
-      // var stream =
-      //     await html.window.navigator.mediaDevices.getUserMedia(constraints);
-      // straight JS:
+      final UserMediaOptions constraints;
+      switch (facing) {
+        case CameraFacing.front:
+          constraints = UserMediaOptions(
+            video: VideoOptions(facingMode: 'user'),
+          );
+          break;
+        case CameraFacing.unknown:
+        // fall through
+        case CameraFacing.back:
+          final List<web.MediaDeviceInfo> devices =
+              (await enumerateDevices().toDart).toDart;
+
+          final List<web.MediaDeviceInfo> backCameras = devices
+              .where(
+                (device) =>
+                    device.kind == 'videoinput' &&
+                    device.label.toLowerCase().contains('back'),
+              )
+              .toList();
+
+          // attempt to find a main/primary camera. If none, use last back camera entry if it exists
+          final web.MediaDeviceInfo? idealCameraMediaInfo = backCameras
+                  .where(
+                    (camera) =>
+                        camera.label.toLowerCase().contains('main') ||
+                        camera.label.toLowerCase().contains('primary'),
+                  )
+                  .lastOrNull ??
+              backCameras.lastOrNull;
+
+          constraints = UserMediaOptions(
+            video: idealCameraMediaInfo != null
+                ? VideoOptions(
+                    deviceId:
+                        DeviceIdOptions(exact: idealCameraMediaInfo.deviceId),
+                  )
+                : VideoOptions(
+                    facingMode: "environment",
+                  ),
+          );
+      }
+
       if (_controller == null) {
         _controller = QRViewControllerWeb(this);
         widget.onPlatformViewCreated(_controller!);

lib/src/web/media.dart

@@ -10,6 +10,9 @@ import 'package:web/web.dart' as web;
 @JS('getUserMedia')
 external JSPromise<web.MediaStream> getUserMedia(UserMediaOptions constraints);
 
+@JS('enumerateDevices')
+external JSPromise<JSArray<web.MediaDeviceInfo>> enumerateDevices();
+
 @JS()
 extension type UserMediaOptions._(JSObject _) implements JSObject {
   external VideoOptions? get video;

pubspec.yaml

@@ -1,6 +1,6 @@
 name: qr_code_scanner_plus
 description: QR code scanner that can be embedded inside flutter. It uses zxing in Android and MTBBarcode scanner in iOS.
-version: 2.0.9+1
+version: 2.0.10
 homepage: https://vespr.xyz
 repository: https://github.com/vespr-wallet/qr_code_scanner_plus