Microphone and camera don't work from a webview

[t-mish]

NWJS Version : 0.51.2
Operating System : Windows 7/10, Mac Catalina, Ubuntu 20.04

Expected behavior

When you use a webview inside your app and when the inner application (from webview) asks for the media (micro, webcam) permissions, you handle this 'permissionrequest' event and allow the webview to work with required media.

Microphone and video just work. Or at least it shows pop up for user to choose if he wants to allow this permissions.

Actual behavior

When you use a webview inside your app and when the inner application (from webview) asks for the media (micro, webcam) permissions, you handle this 'permissionrequest' event and allow the webview to work with required media.

Microphone and video still don't work.

How to reproduce

frameless-window.zip

1. Run the application above
2. Check if your micro is connected.
3. Click 'test micro'

Also

• Everything works fine when you run the application with 'disable-features=nw2'. So it blocks Remove nw1 mode #7230
• Everything works fine when web-application is running right from nwjs. Then it shows pop up like this
  
• I think it relates to When webpage tries to access cam or microphone it asks for user permission #7229
• You may find it useful https://developer.chrome.com/docs/extensions/reference/webviewTag/

[mkazlauskas]

Getting the same issue with 0.52.2 on both Windows and Linux

[Sunvas]

Any updates?

If I run this code inside webview:
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).catch( e=>console.error(e) );

I always get the error DOMException: Failed due to shutdown, even though permissionrequest was allowed.

[krneticz]

I confirm that this is still an issue in nwjs 0.66. @rogerwang +1 for this to be resolved. Thanks!

[hthetiot]

Simply add the following event handler on webview element to handle permissions.

webviewEl.addEventListener('permissionrequest', function permissionRequest(e) {
   //alert("success");
    e.request.allow();
});

Note: Tested on nwjs 0.69.1

[shikhak]

It still doesn't work. Do we have any workaround?

'nw.Window.open('index.html', options, (win) => {
win.menu = null; // remove or clear the menubar
this.nativeWindow = win;
this.domWindow = win["window"];
this.document = this.domWindow["document"];

          this.domWindow.onload = () => {
             
              this.divId = "ovrlay-" + this.overlayId;
              this.webviewId = "ovrlay-" + this.overlayId;
              this.svgId = "ovrlaysvg-" + this.overlayId;
              this.svgClipPathId = "ovrlayclip-" + this.overlayId;

              // Create the HTML5 elements that construe the BCR overlay.
              /** @type {HTMLDivElement} */
              this.div = this.document['createElement']("div");
              this.div['id'] = this.divId;
              this.updateDivStyle();

              this.nativeWindow.setResizable(false);
             
              this.webview = this.document['createElement']("webview");
             this.webview['id'] = this.webviewId;
      this.webview['style'] = "width: 100%; height: 100%;";
      this.webview['src'] = "https://www.webcamtests.com";
      this.webview['partition'] = this.userName.concat(this.serverName);'

In essence I am trying to open plain index.html first and then loading the url in webview.

[shikhak]

Simply add the following event handler on webview element to handle permissions.

webviewEl.addEventListener('permissionrequest', function permissionRequest(e) {
   //alert("success");
    e.request.allow();
});

Note: Tested on nwjs 0.69.1

I am testing this on nwjs 77 but it still doesn't work

@hthetiot @rogerwang

[shikhak]

With the "disable-features=nw2" flag it's working fine. It would be great if someone could point me to the source code where Webview handles the permission request. We have made several other changes in the code to accommodate out requirements. If I can get the contact person for this feature then that would help as well. @rogerwang