Skip to content

[Camera web] Camera doesn't work at all in Firefox on Android #115892

@leoshusar

Description

@leoshusar

Steps to Reproduce

  1. Run the provided code sample in Fenix (Firefox for Android) also hosted here if you need for triage, because camera access needs HTTPS
  2. Click Initialize

Expected results: Camera should be initialized

Actual results: Throws CameraException: cameraAbort

Flutter camera library opens all cameras to retrieve it's information and then closes all streams. However there is Fenix bug that often throws an error when switching cameras. You can see this Fenix issue, it's already opened since last December and not yet fixed.

I modified the camera library and just added print here:

...
try {
  final Map<String, dynamic> constraints = options.toJson();
  return await mediaDevices.getUserMedia(constraints);
} on html.DomException catch (e) {
  print('DomException: $e'); //my added print
  switch (e.name) {
...

and sure, it prints the same error message - AbortError: Starting videoinput failed.
Video here (please ignore those backend errors, I'm not routing debug WS through test domain):

2022-11-22.15-48-32.mp4

and I have all permissions allowed:
image

Also see here the camera fail rate - considering I cannot switch even like 3 times in a row, it sure will fail while opening and closing 5 streams:

2022-11-22.15-56-58.mp4

I was wondering why nobody reported this yet, I can think of these possible causes:

  • Firefox mobile has just 0.5 % market share, so nobody found it yet
  • it doesn't happen on phones with less cameras

Now the question is - what to do? Is there anything that can be done in the camera library? Sure it should really be fixed in Firefox, but considering that issue hasn't got any attention since it was opened and it completely breaks Flutter apps on some higher end devices (although not many people are affected), I thought I will at least inform you here that this issue exists. Feel free to close this if there is nothing you can do about.

Code sample
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CameraController? _cameraController;
  final _statusTextController = TextEditingController();
  final _errorTextController = TextEditingController();
  final _stackTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () async {
                  _errorTextController.text = '';
                  try {
                    _statusTextController.text = 'getting cameras';
                    final cameras = await availableCameras();
                    _statusTextController.text = 'creating controller';
                    _cameraController = CameraController(cameras[0], ResolutionPreset.max);
                    _statusTextController.text = 'initializing controller';
                    await _cameraController!.initialize();
                    _statusTextController.text = 'controller initialized';
                  } catch (e, s) {
                    _errorTextController.text = e.toString();
                    _stackTextController.text = s.toString();
                  }
                },
                child: const Text('Initialize'),
              ),
              ElevatedButton(
                onPressed: () async {
                  _errorTextController.text = '';
                  _stackTextController.text = '';
                  _statusTextController.text = 'disposing controller';
                  await _cameraController?.dispose();
                  _statusTextController.text = 'controller disposed';
                },
                child: const Text('Release'),
              ),
              TextField(
                maxLines: null,
                controller: _statusTextController,
              ),
              TextField(
                maxLines: null,
                controller: _errorTextController,
              ),
              TextField(
                maxLines: null,
                controller: _stackTextController,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Logs
flutter doctor -v
[✓] Flutter (Channel stable, 3.3.8, on Microsoft Windows [Version 10.0.22621.819], locale en-GB)
    • Flutter version 3.3.8 on channel stable at C:\Users\husar\AppData\Local\Flutter\SDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (13 days ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\husar\AppData\Local\Android\sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.5.0 Preview 1.0)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Preview
    • Visual Studio Community 2022 version 17.5.33103.201
    • The current Visual Studio installation is a pre-release version. It may not be supported by Flutter yet.
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.2
    • 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

[✓] VS Code, 64-bit edition (version 1.73.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.52.0

[✓] Connected device (4 available)
    • SM S908B (mobile) • R3CT30E9HQF • android-arm64  • Android 13 (API 33)
    • Windows (desktop) • windows     • windows-x64    • Microsoft Windows [Version 10.0.22621.819]
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 107.0.5304.107
    • Edge (web)        • edge        • web-javascript • Microsoft Edge 107.0.1418.42

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
Firefox debugging

You need to have enabled USB debugging. Then in Firefox on Android hit settings and scroll down, there is Remote debugging via USB. Enable it.
Now open Firefox on PC and open about:debugging.
Enable USB devices (I already have it enabled):

image

and on the left side hit refresh devices - your phone will appear. Connect to it, click on the phone and here you have tabs you can inspect:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listbrowser: firefoxonly manifests in Firefoxc: crashStack traces logged to the consolep: cameraThe camera pluginpackageflutter/packages repository. See also p: labels.platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions