WebView WebRTC

[Tororosso7]

I am trying to show video call in webview. It requires additional permission.

[lejard-h]

what do you mean ? additional permission on the webview or the app ? (Android manifest)

[Tororosso7]

Webview : I am getting the following error . chromium(12367): [ERROR:web_contents_delegate.cc(179)] WebContentsDelegate::CheckMediaAccessPermission: Not supported. W/cr_media(12367): Requires MODIFY_AUDIO_SETTINGS and RECORD_AUDIO. No audio device will be available for recording.

[lejard-h]

add this to your Android manifest.

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

[Tororosso7]

I have added still getting the same error.

[lejard-h]

I see, probably related to https://stackoverflow.com/questions/38917751/webview-webrtc-not-working

[Tororosso7]

Yes..

[Soda-Flavour]

Hello. I'm also testing webRTC. The camera work on the code received on November 11. (The WebviewScaffold class has this.permissions = "*") It does not work with version 0.3.9+1

[pichillilorenzo]

You can try my plugin flutter_inappbrowser (EDIT: it has been renamed to flutter_inappwebview).

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

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 {
  await PermissionHandler().requestPermissions([PermissionGroup.camera, PermissionGroup.microphone]);
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewPage()
    );
  }
}

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

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @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",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                    inAppWebViewOptions: InAppWebViewOptions(
                      mediaPlaybackRequiresUserGesture: false,
                      debuggingEnabled: true,
                    ),
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {

                  },
                  onLoadStop: (InAppWebViewController controller, String url) {

                  },
                  onPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                    print(origin);
                    print(resources);
                    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 and implement (for Android) the onPermissionRequest event.

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" />

[Soda-Flavour]

You can try my plugin flutter_inappbrowser.

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

An example of using WebRTC that works on Android:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  await PermissionHandler().requestPermissions([PermissionGroup.camera, PermissionGroup.microphone]);
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewPage()
    );
  }
}

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

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @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",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                    inAppWebViewOptions: InAppWebViewOptions(
                      mediaPlaybackRequiresUserGesture: false,
                      debuggingEnabled: true,
                    ),
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {

                  },
                  onLoadStop: (InAppWebViewController controller, String url) {

                  },
                  onPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                    print(origin);
                    print(resources);
                    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 and implement (for Android) the onPermissionRequest event.

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" />

Thank you for your answer. From Android to our code, it worked without any problems.

But the iPhone didn't open the camera. I've added these lists to the Info.plist file.

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

Is there anything else I need to set up?

[pichillilorenzo]

@Dopble2k I opened an issue about that with some explanations and useful links: https://github.com/pichillilorenzo/flutter_inappwebview/issues/200. You can follow that issue. The problem is that iOS WKWebView doesn't support WebRTC natively.

However, just to inform you, my plugin has been renamed to flutter_inappwebview.

[luqmantuke]

Solved My Problem. To anyone who is still struggling. it's because webview doesn't support file attribute. So use this package Flutter WebView Pro

[JackdawForever]

I have the same problem while developing for android。The solution is as follows 1、Open the android project 2、turn up flutter_webview_plugin , open WebviewManager.java 3、Find webView.setWebChromeClient(new WebChromeClient() {} ， Add the following code

   @Override
            public void onPermissionRequest(PermissionRequest request) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    request.grant(request.getResources());
                }
            }

The test works, hope it helps

[EmmanuelAdeiza]

I am having an issue using @pichillilorenzo your plugin (for using camera and microphone, camera works alright on both platforms). It works like a charm on IOS but I have spent the last few days trying to get it to work on Android.

My permissions are intact too in the manifest file.

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.VIBRATE" /> <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.MICROPHONE" /> <uses-permission android:name="android.permission.VIDEO_CAPTURE" /> <uses-permission android:name="android.permission.AUDIO_CAPTURE" /> <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/> <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA"/> <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE"/>

Please I need help as to what I might be doing wrong or it will be nice if someone can point me to a version that worked for them.

The issue is actually with microphone permissions. because i tested for camera (with https://webcamtests.com/ ) and it worked well on both. You can test with this url https://www.loom.com/webcam-mic-test

Please this is kind of urgent.