unable to load camera in webview_flutter

I am using webview_flutter: ^0.3.15+1 for in-app browser in flutter here and want to open this URL check here which have a camera but it's not opening as expected nor camera is loaded on that webpage

Code for webView Page :

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';

class ExamWebView extends StatefulWidget {
  final PageController controller;
  final int destination;

  const ExamWebView({Key key, this.controller, Key index, this.destination})
      : super(key: key);
  @override
  _ExamWebViewState createState() => _ExamWebViewState();
}

class _ExamWebViewState extends State<ExamWebView> {
  Completer<WebViewController> _controller = Completer<WebViewController>();
  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: '_Toaster',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text("Exam"),
          ),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebView(
                initialUrl:
                    "https://therealtechwiz.github.io/project/facerecognition",
                gestureRecognizers: Set()
                  ..add(
                    Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer(),
                    ),
                  ),
                // Factory<VerticalDragGestureRecognizer>(
                //  () => VerticalDragGestureRecognizer()..onUpdate = (_) {},
                // ),
                initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy
                    .require_user_action_for_all_media_types,
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _controller.complete(webViewController);
                },
                javascriptChannels: <JavascriptChannel>[
                  _toasterJavascriptChannel(context),
                ].toSet(),
              ),
            )
          ],
        ));
  }
}

Added these Permissions in android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
 <uses-feature android:name="android.hardware.camera" />
 <uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.INTERNET"/>

response in terminal:

D/EgretLoader(23485): EgretLoader(Context context)
D/EgretLoader(23485): The context is not activity
W/ContentCatcher(23485): Failed to notify a WebView
I/chromium(23485): [INFO:CONSOLE(79)] "[object DOMException] please use the fiddle instead", source: https://therealtechwiz.github.io/project/facerecognition/script.js (79)
I/chromium(23485): [INFO:CONSOLE(1)] "Uncaught (in promise) Error: failed to fetch: (404) , from url: https://therealtechwiz.github.io/models/face_recognition_model-weights_manifest.json", source: https://therealtechwiz.github.io/project/facerecognition/face-api.min.js (1)
W/Choreographer(23485): Frame time is 0.077364 ms in the future!  Check that graphics HAL is generating vsync timestamps using the correct timebase.

Getting this output :

output Expected: can be seen here

flutter doctor -v output:

`[√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Version 10.0.18363.1440], locale en-US)
• Flutter version 2.0.2 at C:\flutter
• Framework revision 8962f6d (3 days ago), 2021-03-11 13:22:20 -0800
• Engine revision 5d8bf81
• Dart version 2.12.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\Tarun jain\AppData\Local\Android\sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.

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

[√] Android Studio (version 4.1.0)
• 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 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.54.2)
• VS Code at C:\Users\Tarun jain\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.20.0

[√] Connected device (3 available)
• Redmi Note 9 Pro (mobile) • e8e60b33 • android-arm64 • Android 11 (API 30)
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.82
• Edge (web) • edge • web-javascript • Microsoft Edge 89.0.774.50

• No issues found!`

@tarunjain3

I am using webview_flutter: ^0.3.15+1

@tarunjain3
are you experiencing the issue after updating webview_flutter to the latest version 2.0.2

@iapicca

@iapicca,
yes i have tried webview_flutter with latest vesion version as well that is webview_flutter: ^2.0.2 ..still getting the same issue

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.2, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.0.2 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 8962f6dc68 (4 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.54.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.82

! Doctor found issues in 1 category.

Camera access requires permissions on the web; we'll need to figure out how to manage permission granting for web views in a generic way, as this will affect more than just camera.

@tarunjain3

Hi @tarunjain3
Thanks for filing the issue, I verified this on the latest stable and the master channel with webview_flutter: ^2.1.2 and the issue is still reproducible

code sample

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: ExamWebView());
  }
}

class ExamWebView extends StatefulWidget {
  const ExamWebView({Key? key}) : super(key: key);
  @override
  _ExamWebViewState createState() => _ExamWebViewState();
}

class _ExamWebViewState extends State<ExamWebView> {
  Completer<WebViewController> _controller = Completer<WebViewController>();
  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: '_Toaster',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text("Exam"),
          ),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebView(
                initialUrl:
                    "https://therealtechwiz.github.io/project/facerecognition",
                gestureRecognizers: Set()
                  ..add(
                    Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer(),
                    ),
                  ),
                // Factory<VerticalDragGestureRecognizer>(
                //  () => VerticalDragGestureRecognizer()..onUpdate = (_) {},
                // ),
                initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy
                    .require_user_action_for_all_media_types,
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _controller.complete(webViewController);
                },
                javascriptChannels: <JavascriptChannel>[
                  _toasterJavascriptChannel(context),
                ].toSet(),
              ),
            )
          ],
        ));
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.5.3 at /Users/flo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (10 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.11.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.10+0-b96-7281165)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (5 available)
    • SM G975U (mobile)          • R58M95MA95E                          • android-arm64  • Android 11 (API 30)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0
      (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-12.0.pre.459, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.459 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9cf1897e70 (3 hours ago), 2021-10-25 00:23:05 -0400
    • Engine revision c80cc613a8
    • Dart version 2.15.0 (build 2.15.0-248.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.10+0-b96-7281165)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (5 available)
    • SM G975U (mobile)          • R58M95MA95E                          • android-arm64  • Android 11 (API 30)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

Thank you

[webview_flutter] Adds support to receive permission requests (#3543)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[webview_flutter] Adds support to receive permission requests (flutte…

Navigation Menu

Repository navigation

unable to load camera in webview_flutter #78147

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

unable to load camera in webview_flutter #78147

Description

Activity

iapicca commented on Mar 14, 2021

tarunjain3 commented on Mar 15, 2021

darshankawar commented on Mar 15, 2021

stuartmorgan-g commented on Mar 18, 2021

mamuseferha commented on Oct 25, 2021

lugael commented on Dec 7, 2022

github-actions commented on May 8, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions