[web] Camera sometimes doesn't start on Chrome

Steps to Reproduce

To reproduce the bug, just call the method "availableCameras()" from camera plugin using Chrome Browser

Expected results:

The expected result is the method running without throwing exceptions and returning a List of CameraDescription

Actual results:
Only in Chrome, an exception is thrown and printed in the browser console.

CameraException(cameraNotReadable, The camera is not readable due to a hardware error that prevented access to the device.)

Notes:
My camera plugin version is 0.10.0
My chrome version is 104.0.5112.79 (Official Version) 64 bits
I am using Linux Mint 20.3 "Una" 5.15.0-46-generic
I tested my app in Firefox and it works fine.
I tested it on other site (https://webcamtests.com/) using Chrome and my camera worked normally.

I found an issue from January 2022 (#97016). In this issue, someone posted a link to test the camera using flutter https://cameraweb.netlify.app/#/.

Accessing this link from Chrome, the same exception occurs.
Accessing from Firefox, it works normally.

I debug the availableCameras method line by line and when I debug it this way, the code works, but only if I go line by line.
For me it's like some part of the code is running without waiting for something to finish before continuing, because if I debug line by line calmly, it works.

Code sample

_availableCameras = await availableCameras();
cameraController = CameraController(
  _availableCameras!.first,
  ResolutionPreset.medium,
  imageFormatGroup: ImageFormatGroup.jpeg,
);

Logs

CameraException(cameraNotReadable, The camera is not readable due to a hardware error that prevented access to the device.)

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49  throw_
packages/camera_web/src/camera_web.dart 194:7                                 availableCameras
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 60:31            <fn>
dart-sdk/lib/async/zone.dart 1690:54                                          runBinary
dart-sdk/lib/async/future_impl.dart 162:22                                    handleError
dart-sdk/lib/async/future_impl.dart 778:46                                    handleError
dart-sdk/lib/async/future_impl.dart 799:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 574:5                                     [_completeError]
dart-sdk/lib/async/future_impl.dart 665:7                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

❯ flutter analyze
Analyzing my_app...                                               
No issues found! (ran in 4.3s)

flutter doctor -v 
[✓] Flutter (Channel stable, 3.0.5, on Linux Mint 20.3 5.15.0-46-generic, locale
    pt_BR.UTF-8)
    • Flutter version 3.0.5 at /mnt/Arquivos/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /mnt/Arquivos/Android/Sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /mnt/Arquivos/Android/Sdk
    • Java binary at: /mnt/Arquivos/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2021.2)
    • Android Studio at /mnt/Arquivos/android-studio
    • Flutter plugin version 67.1.2
    • Dart plugin version 212.5744
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.2)
    • IntelliJ at /mnt/Arquivos/idea-IC-212.5457.46
    • Flutter plugin version 69.0.5
    • Dart plugin version 222.3345.108

[✓] VS Code (version 1.70.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • sdk gphone x86 64 arm64 (mobile) • emulator-5554 • android-x64    • Android 11 (API 30) (emulator)
    • Linux (desktop)                  • linux         • linux-x64      • Linux Mint 20.3 5.15.0-46-generic
    • Chrome (web)                     • chrome        • web-javascript • Google Chrome 104.0.5112.79

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

• No issues found!

@Alvarocda

Hi @Alvarocda, can you provide the complete code sample that you are using? I tested the code sample from the camera package and everything works as expected.

@danagbemava-nc

Hi @danagbemava-nc

I created a gist with my code with problem
https://gist.github.com/Alvarocda/40c64333cbd93d33158a0d62ae133bec

My webcam model: Microsoft® LifeCam Cinema(TM)

I did some tests with the availableCameras method.

I put several Future.delayeds of 1 second each after each line of the availableCameras method and the camera started to work 100% of the time.

The feeling I have is that it seems that an 'await' is missing inside the availableCameras method, because when I put the Future.delayed it works.

I also made tests on 2 other computers with the same camera, one with linux and the other with Windows.
On the computer with Linux, the same problem happened, on the computer with Windows the camera worked normally.

@Alvarocda

Hi @Alvarocda, your sample contains some classes that are not available to us so we cannot run the code. Kindly provide a complete runnable sample so that we can investigate this.

Can you also try the example that comes with the camera package to see whether or not you still reproduce this issue?

@danagbemava-nc

Hi @danagbemava-nc, I updated the Gist code.

I also tested my gist code along with the example that comes with the camera package, it worked normally.

Possible duplicate of #100257

@Alvarocda

I also tested my gist code along with the example that comes with the camera package, it worked normally.

Hi @Alvarocda, it seems like everything is working properly. Is there anything else for us to do here?

Possible duplicate of #100257

I think it's not the same problem, as now I can't even see the camera image.

And as I said, I tested it on 3 different computers, 2 with linux and 1 with Windows using this link: https://cameraweb.netlify.app/#/.

On both computers using Linux the problem happens.

I faced the same issue when I tried to display the camera preview on chrome or edge.

pubspec.yaml

  camera: ^0.10.5+3
  camera_web: ^0.3.2+1

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.10.6, on Microsoft Windows [Version 10.0.22621.2215], locale th-TH)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.6.2)
[√] Android Studio (version 2022.3)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

code

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late CameraController _controller;
  bool isInitialized = false;

  Future<void> _initializeController() async {
    // Get the available cameras
    List<CameraDescription> cameras = await availableCameras();

    // Select the first camera
    _controller = CameraController(cameras[0], ResolutionPreset.high);

    // Initialize the controller
    await _controller.initialize();

    isInitialized = true;
    setState(() {});
  }

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

  @override
  void dispose() {
    // Dispose the controllers when the app is disposed
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!isInitialized) return const MaterialApp(home: Scaffold(body: Center(child: CircularProgressIndicator())));

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                height: 100,
                width: 100,
                child: CameraPreview(_controller),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

error

Error: CameraException(cameraNotReadable, The camera is not readable due to a hardware error that prevented access to the device.)
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49  throw_
packages/camera_web/src/camera_web.dart 191:7                                 availableCameras
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 60:31            <fn>
dart-sdk/lib/async/zone.dart 1666:54                                          runBinary
dart-sdk/lib/async/future_impl.dart 162:22                                    handleError
dart-sdk/lib/async/future_impl.dart 796:46                                    handleError
dart-sdk/lib/async/future_impl.dart 817:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 592:5                                     [_completeError]
dart-sdk/lib/async/future_impl.dart 683:7                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 177:15           <fn>

Facing the same issue currently running flutter run -d web-server and accessing through Chrome.

I was using web-server because Chrome was blocking my camera with -d Chrome (#109766).

I have no other applications using my camera based on the fact my web cam light isn't on. However, it only started happening after my Mac used my iPhone camera instead of my web cam, and now that I turned that setting off, it's now showing there's no camera.

Occasionally, it does ask for permission to use my camera, but the camera controller doesn't initialize and doesn't turn the web camera on.

I have the same problem

platform: Chrome on iOS
flutter version: 3.16.9
camera: ^0.10.5+9

Any new updates as still reproducible ?

camera_web 0.3.5
camera 0.11.0+2
Flutter 3.24.5 • channel stable
platform: Chrome on windows

+1

camera: ^0.11.0+2
- didn't add camera_web as it says it's endorsed.
Flutter 3.24.3 - Channel stable on Windows 10
Chrome 131.0.6778.140

Full error:

Uncaught (in promise) DartError: CameraException(cameraNotReadable, The camera is not readable due to a hardware error that prevented access to the device.)
    at Object.throw_ [as throw] (errors.dart:296:3)
    at camera_web.CameraPlugin.new.availableCameras (camera_web.dart:197:7)
    at availableCameras.throw (<anonymous>)
    at async_patch.dart:60:31
    at _RootZone.runBinary (zone.dart:1666:54)
    at _FutureListener.thenAwait.handleError (future_impl.dart:178:22)
    at handleError (future_impl.dart:873:46)
    at _Future._propagateToListeners (future_impl.dart:894:13)
    at [_completeError] (future_impl.dart:674:5)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:760:7)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:181:7

For me, it's reproducing 10/10.

I tried with both flutter run -d chrome and flutter run -d web-server without any luck.

No other processes was using the camera at the time.

Are there any working on this issue (or any duplicates of it) ?

It is utterly bad that new models fails in web, but are perfectly well on android native.

This is still very reproducible on chrome mobile on Android. Any updates?

Navigation Menu

Repository navigation

[web] Camera sometimes doesn't start on Chrome #109453

Steps to Reproduce

37 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[web] Camera sometimes doesn't start on Chrome #109453

Description

Steps to Reproduce

Activity

danagbemava-nc commented on Aug 15, 2022

Alvarocda commented on Aug 15, 2022

danagbemava-nc commented on Aug 16, 2022

Alvarocda commented on Aug 16, 2022

maheshj01 commented on Aug 16, 2022

danagbemava-nc commented on Aug 16, 2022

Alvarocda commented on Aug 16, 2022

37 remaining items

SittiphanSittisak commented on Aug 24, 2023

codingiswhyicry commented on Jan 18, 2024

marurur commented on Feb 10, 2024

youssefm15 commented on Dec 2, 2024

CubeDr commented on Dec 15, 2024

CubeDr commented on Dec 15, 2024

RoarGronmo commented on Mar 10, 2025

lexonli commented on May 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions