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: pichillilorenzo/flutter_inappwebview#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