[camera][web] Torch not working on mobile browsers

[Mikkelet]

Steps to reproduce

1. Implement a simple camera app with a preview (camera: ^0.11.0+2)
2. enable flash using CameraController.setFlashMode(FlashMode.always)
3. Build the app for WEB
4. deploy your app to a server (or use self-signed certs to use camera locally)
5. Notice how flash does not turn on

Expected results

Torch turns on when setFlashMode is set to always

Actual results

Torch does not turn on

Code sample

Code sample

import 'package:flutter/material.dart';

class CameraScreen extends StatefulWidget {
  const CameraScreen({super.key});

  @override
  State<CameraScreen> createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  late CameraController controller;
  bool isInitialised = false;

  Future<void> initialiseCamera() async {
    final cameras = await availableCameras();
    controller = CameraController(cameras.last, ResolutionPreset.max, enableAudio: false);
    if (!mounted) return;
    try {
      await controller.initialize();
      setState(() {
        isInitialised = true;
      });
    } catch (e) {
      if (e is CameraException) {
        switch (e.code) {
          case 'CameraAccessDenied':
            break;
          default:
            break;
        }
      }
    }
  }

  void enableFlash() {
    if (isInitialised) {
          controller.setFlashMode(FlashMode.always);
    }
  }

  @override
  void initState() {
    initialiseCamera();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Builder(builder: (context) {
              if (!isInitialised) {
                return const CircularProgressIndicator();
              }
              return AspectRatio(
                  aspectRatio: 9 / 16, child: CameraPreview(controller));
            }),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ElevatedButton(
                onPressed: enableFlash,
                child: const Text("Flash"),
            ),
          ),
        ],
      ),
    );
  }
}

Website example

WEBSITE EXAMPLE

I posted above code to a firebase app:

https://camerafinder-3bbd8.web.app/

Try opening it on your android phone

Logs

Logs

Localhost

TypeError: true: type 'bool' is not a subtype of type 'JSArray<Object?>?'

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:3     throw_
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39               _failedAsCheck
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1395:3                            _generalNullableAsCheckImplementation
dart-sdk/lib/_internal/js_shared/lib/js_util_patch.dart 81:5                    getProperty
packages/camera_web/src/camera_service.dart.js 854:64                           [_setTorchMode]
packages/camera_web/src/camera_service.dart.js 846:26                           setFlashMode
packages/camera_web/src/camera_web.dart.js 695:42                               <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3              _asyncStartSync
packages/camera_web/src/camera_web.dart.js 712:20                               setFlashMode
packages/camera/src/camera_preview.dart.js 1329:80                              <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3              _asyncStartSync
packages/camera/src/camera_preview.dart.js 1363:20                              setFlashMode
packages/vision_check_flutter/camera_screen.dart.js 456:56                      <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23             <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3              _asyncStartSync
packages/vision_check_flutter/camera_screen.dart.js 463:20                      enableTorch
packages/vision_check_flutter/camera_screen.dart.js 524:28                      <fn>
packages/flutter/src/material/time.dart.js 82994:35                             handleTap
packages/flutter/src/gestures/recognizer.dart.js 271:18                         invokeCallback
packages/flutter/src/gestures/tap.dart.js 474:20                                handleTapUp
packages/flutter/src/gestures/tap.dart.js 247:12                                [_checkUp]
packages/flutter/src/gestures/tap.dart.js 194:23                                handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart.js 568:16                         handleEvent
packages/flutter/src/gestures/pointer_router.dart.js 76:9                       [_dispatch]
packages/flutter/src/gestures/pointer_router.dart.js 102:26                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:7         forEach
packages/flutter/src/gestures/pointer_router.dart.js 100:29                     [_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart.js 95:37                      route
packages/flutter/src/gestures/binding.dart.js 428:26                            handleEvent
packages/flutter/src/gestures/binding.dart.js 416:24                            dispatchEvent
packages/flutter/src/widgets/unique_widget.dart.js 119315:13                    dispatchEvent
packages/flutter/src/gestures/binding.dart.js 389:14                            [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart.js 360:43                            handlePointerEvent
packages/flutter/src/gestures/binding.dart.js 349:14                            [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart.js 324:40                            [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1423:5                              invoke1
lib/_engine/engine/platform_dispatcher.dart 336:5                               invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 405:30                                  [_sendToFramework]
lib/_engine/engine/pointer_binding.dart 225:7                                   onPointerData
lib/_engine/engine/pointer_binding.dart 1047:20                                 <fn>
lib/_engine/engine/pointer_binding.dart 948:7                                   <fn>
lib/_engine/engine/pointer_binding.dart 541:9                                   loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/patch/js_allow_interop_patch.dart 212:27  _callDartFunctionFast1

Web server (https://camerafinder-3bbd8.web.app/)

NoSuchMethodError: method not found: 'gt' (J.aZ(...).gt is not a function)

TypeError: J.aZ(...).gt is not a function
    at Object.c8 (main.dart.js:190:22)
    at b2.gt (main.dart.js:24920:16)
    at b2.gJ (main.dart.js:27173:15)
    at Object.fS (main.dart.js:184:22)
    at main.dart.js:29899:10
    at a01.a (main.dart.js:4328:63)
    at a01.$2 (main.dart.js:25985:14)
    at Object.J (main.dart.js:4314:10)
    at IC.G7 (main.dart.js:29906:10)
    at IC.nc (main.dart.js:29884:21)

Flutter Doctor output

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.27.1, on macOS 14.6.1 23G93 darwin-arm64, locale en-DK)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.1.3)
[✓] VS Code (version 1.95.0)
[✓] Connected device (4 available)            
[✓] Network resources

• No issues found!