mobile_scanner icon indicating copy to clipboard operation
mobile_scanner copied to clipboard

Camera not working after deploying - Flutter web on mobile browser

Open miraklecode opened this issue 2 years ago • 6 comments

Hi, thank you for your great work, I've tried to the deploy the example on Firebase Hosting and the camera is not working, neither on desktop browser nor mobile, which I'm more interested. thank you

[edited] thought safari console I was able to catch this error: NoSuchMethodError: method not found: 'getUserMedia' (a.getUserMedia is not a function. (In 'a.getUserMedia(b,A.dm(c,1),A.dm(d,1))', 'a.getUserMedia' is undefined))

miraklecode avatar Mar 13 '22 05:03 miraklecode

Have you tried to add jsQR as a script tag?

Antoni-Czaplicki avatar Mar 15 '22 06:03 Antoni-Czaplicki

I've tried here my index.html It is working when I run the debug locally on my desktop, is not working after being deployed (in order to test it on a mobile phone, iPhone with Safari) thank you

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="example">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>example</title>
  <link rel="manifest" href="manifest.json">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js"></script>
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

miraklecode avatar Mar 15 '22 08:03 miraklecode

Facing same issue. Not working in safari. Any update on the above issue?

quseappdeveloper avatar Apr 10 '22 04:04 quseappdeveloper

share full index.html file

maulikchak avatar Aug 19 '22 13:08 maulikchak

any update ?

maulikchak avatar Oct 03 '22 05:10 maulikchak

hey @juliansteenbakker @teolemon @miraklecode @quseappdeveloper I fixed this problem the issue is not in this package but the real one is firebase I made little changes in firebase initialization and it's worked fine Android/iOS/MacBook/desktop/iPhone all browser like safari/chrome/brave/opera

so, @juliansteenbakker you can remove this from bugs list

maulikchak avatar Oct 11 '22 05:10 maulikchak

@maulikchak What did u do, I have a similar problem with a static file server. The cam also won't get registered

MB175 avatar Dec 01 '22 22:12 MB175

@MB175 i made changes in my firebase initialization and now it's worked

maulikchak avatar Dec 02 '22 04:12 maulikchak