Access the camera on flutter webview

Question

I have web Page to Show user camera, how I can access the camera on the flutter webview?

I try to do that with this URL "https://webrtc.github.io/samples/src/content/getusermedia/gum/" but return getUserMedia error: NotAllowedError

Answer 1

You can try my plugin flutter_inappwebview.

To request permissions about the camera and microphone, you can use the permission_handler plugin.

Also, it has the androidOnPermissionRequest event for Android, that is an event fired when the WebView is requesting permission to access the specified resources (that is the Android native WebChromeClient.onPermissionRequest event).

An example of using WebRTC that works on Android:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Permission.camera.request();
  await Permission.microphone.request();

  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                      initialUrl: "https://appr.tc/r/158489234",
                      initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          mediaPlaybackRequiresUserGesture: false,
                          debuggingEnabled: true,
                        ),
                      ),
                      onWebViewCreated: (InAppWebViewController controller) {
                        _webViewController = controller;
                      },
                      androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                        return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
                      }
                  ),
                ),
              ),
            ]))
    );
  }
}

This example uses the room 158489234 on https://appr.tc/, that is a video chat demo app based on WebRTC (https://github.com/webrtc/apprtc). To get it work, you need to set the option mediaPlaybackRequiresUserGesture to false.

Also, you need to add these permissions in the AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />

Answer 2

To access the camera in a WebView you should take care of the following:

1. Grant camera access before opnening the webview (This can be done through permission_handler package)
2. Properly initialize you WebViewController, be sure to await for all the async methods like await controller.setJavaScriptMode(JavaScriptMode.unrestricted);
3. For IOS you must also provide some platform specific parameters using the WebKitWebViewControllerCreationParams class of the webview_flutter_wkwebview package (See the example below)
4. Grant onPermissionRequest to controller (See the example below)

Your controller should look similar to this, and you may use a FutureBuilder to initialize it before launching your WebView:

Future<WebViewController> _getController() async {
late final PlatformWebViewControllerCreationParams params;
params = WebViewPlatform.instance is WebKitWebViewPlatform
    ? WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true, mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{})
    : const PlatformWebViewControllerCreationParams();

final controller = WebViewController.fromPlatformCreationParams(
  params,
  onPermissionRequest: (request) {
    request.grant();
  },
);
await controller.setJavaScriptMode(JavaScriptMode.unrestricted);
await controller.loadRequest(Uri.parse( "Your url" ));

return controller;
}