[webRTC / macOS] onPermissionRequest not called on HeadlessInAppWebView

[touficzayed]

• I have read the Get Started - Installation section
• I have read and done the Get Started - Setup Android section
• I have read and done the Get Started - Setup iOS section
• I have read and done the Get Started - Setup macOS section
• I have already searched for the same problem
• I have read and done the Get Started - Setup WebRTC on macOS section

Environment

Technology	Version
Flutter version	3.3.4
Plugin version	6.0.0-beta.8
Android version
iOS version	16.0
macOS version.	12.5.1.
Xcode version	14.0.1

Device information:

MacBook Air x86 with macOS Monterey 12.5.1

Description

Expected behavior:
Using HeadlessInAppWebView when I call the javascript snippet:
navigator.mediaDevices.getUserMedia({audio:true}).then((e)=>console.log(e)).catch((e)=>console.log(e))

whether inside a loded page, or by calling headlessWebView.webViewController.evaluateJavascript in my dart code, then I expect to enter the then or the catch clause of my javascript promise.

Current behavior:

instead I get the message:

JavaScript execution returned a result of an unsupported type

I have tested the same code on an iPhone simulator and it is working as intended.

Steps to reproduce

1. In the example app edit the code for class headless_inapp_webview.screen.dart
2. In the initState method add the onPermissionRequest callback

onPermissionRequest: (controller, request) async {
        return PermissionResponse(
            resources: request.resources,
            action: PermissionResponseAction.GRANT);
      },

3. Replace the javascript code in the button that evaluate javascript code by this:

await 
headlessWebView?.webViewController.evaluateJavascript(
                        source:
                            """navigator.mediaDevices.getUserMedia({audio:true}).then((e)=>console.log(e)).catch((e)=>console.log(e));""");

4. Here is a sample of the class

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

import 'main.dart';

class HeadlessInAppWebViewExampleScreen extends StatefulWidget {
  @override
  _HeadlessInAppWebViewExampleScreenState createState() =>
      new _HeadlessInAppWebViewExampleScreenState();
}

class _HeadlessInAppWebViewExampleScreenState
    extends State<HeadlessInAppWebViewExampleScreen> {
  HeadlessInAppWebView? headlessWebView;
  String url = "";

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

    var url = !kIsWeb
        ? Uri.parse("https://flutter.dev")
        : Uri.parse("http://localhost:${Uri.base.port}/page.html");

    headlessWebView = new HeadlessInAppWebView(
      initialUrlRequest: URLRequest(url: url),
      initialSettings: InAppWebViewSettings(),
      onWebViewCreated: (controller) {
        print('HeadlessInAppWebView created!');
      },
      onConsoleMessage: (controller, consoleMessage) {
        print("CONSOLE MESSAGE: " + consoleMessage.message);
      },
      onLoadStart: (controller, url) async {
        setState(() {
          this.url = url.toString();
        });
      },
      onLoadStop: (controller, url) async {
        setState(() {
          this.url = url.toString();
        });
      },
      onUpdateVisitedHistory: (controller, url, isReload) {
        setState(() {
          this.url = url.toString();
        });
      },
      onPermissionRequest: (controller, request) async {
        print(request);
        return PermissionResponse(
            resources: request.resources,
            action: PermissionResponseAction.GRANT);
      },
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text(
          "HeadlessInAppWebView",
        )),
        drawer: myDrawer(context: context),
        body: SafeArea(
            child: Column(children: <Widget>[
          Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
                "CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
          ),
          Center(
            child: ElevatedButton(
                onPressed: () async {
                  await headlessWebView?.dispose();
                  await headlessWebView?.run();
                },
                child: Text("Run HeadlessInAppWebView")),
          ),
          Container(
            height: 10,
          ),
          Center(
            child: ElevatedButton(
                onPressed: () async {
                  if (headlessWebView?.isRunning() ?? false) {
                    await headlessWebView?.webViewController.evaluateJavascript(
                        source:
                            """navigator.mediaDevices.getUserMedia({audio:true}).then((e)=>console.log(e)).catch((e)=>console.log(e));""");
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      content: Text(
                          'HeadlessInAppWebView is not running. Click on "Run HeadlessInAppWebView"!'),
                    ));
                  }
                },
                child: Text("Send console.log message")),
          ),
          Container(
            height: 10,
          ),
          Center(
            child: ElevatedButton(
                onPressed: () {
                  headlessWebView?.dispose();
                  setState(() {
                    this.url = "";
                  });
                },
                child: Text("Dispose HeadlessInAppWebView")),
          )
        ])));
  }
}

5. Launch the example app in macOS
6. In vscode, set a breakpoint inside the onPermissionRequest callback
7. go to the headlessInAppWebView screen (left menu), launch the url, then click the button 'Send console.log message'
8. The breakpoint in the onPermissionRequest callback is never reached
9. Check the debug logs on vscode, you should see the message JavaScript execution returned a result of an unsupported type
10. Now launch the example app in an iOS simulator and retry
11. The breakpoint in the onPermissionRequest callback is reached
12. If you check the debug logs you can verify that the getUserMedia call has been processed as it should

Thank you for your support, and thank you for this awesome plugin, the fact that it supports more platforms than just android and iOS is great.

[github-actions]

👋 @touficzayed

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[pichillilorenzo]

Released new version 6.0.0-beta.11