getDisplayMedia with Chrome 72 throwing Not Allowed

[iclems]

• Output of node_modules/.bin/electron --version: v5.0.0-nightly.20190107
• Operating System (Platform and Version): macOS Mojave 10.14.2 (18C54)
• Output of node_modules/.bin/electron --version on last known working Electron version (if applicable): never

Expected Behavior
Using navigator.mediaDevices.getDisplayMedia({ video: true }), a native screen picker should appear.

Actual behavior
The following error is thrown: NotAllowedError: Permission denied

Screenshots
Expected dialog

[codebytere]

@iclems this is probably related to: #16508

[MarshallOfSound]

Using navigator.mediaDevices.getDisplayMedia({ video: true }), a native screen picker should appear.

This behavior isn't expected for Electron's case. If we were to implement the plumbing required for this to work we would implement it similar to select-bluetooth-device where we emit all possible options and then the app is responsible for the "choosing" part, whether that is through a UI or just choosing a specific device by default 🤷‍♂️

[iclems]

Interesting. I understand the previous perspective on this feature but it is now part of the WebRTC standards and no longer a Chrome-specific capability implemented through extensions. It sounds strange to have an official W3C "stable" API that needs to be rebuilt via private SDKs. Certainly makes sense in the short-term, but I would assume the long-term path should be: the official API works, but developers can build a custom UI instead if they like?

[iclems]

FYI even with 5.0.0-beta.3 which includes the fix this is still not working throwing NotAllowedError: Permission denied.

[codebytere]

@brenca ☝️

[iclems]

@brenca @sofianguy @codebytere could you reopen and make sure this isn't marked as fixed in the release notes as I just tested again in beta 5 and it is still throwing NotAllowedError: Permission denied. I'm happy to help fix it but I'm not an expert in the native binding behind it

[MarshallOfSound]

Haven't confirmed but re-opening, @brenca can you double check this? Feel free to close again if the fix has indeed been applied successfully

[connetcom]

Hi any update on this or is there an alternative place to track status? I am on Chrome 73.0.3683.90 on Android 8.0.0. and the same exception not allowed is thrown.

Thanks

[nornagon]

Hi @connetcom, Electron doesn't run on Android so we can't possibly be responsible for whatever issue you're running into. You might have better luck at https://crbug.com.

[connetcom]

Thanks for the link and sorry i had somehow shifted into the wrong thread as i was looking at a bunch of stuff at the same time and did not realize that i was on electron.

[juniiorlima]

• Output of node_modules/.bin/electron --version: v5.0.0-nightly.20190107
• Operating System (Platform and Version): macOS Mojave 10.14.2 (18C54)
• Output of node_modules/.bin/electron --version on last known working Electron version (if applicable): never

Expected Behavior
Using navigator.mediaDevices.getDisplayMedia({ video: true }), a native screen picker should appear.

Actual behavior
The following error is thrown: NotAllowedError: Permission denied

Screenshots
Expected dialog

Solution:

https://electronjs.org/docs/api/desktop-capturer
https://qiita.com/gtk2k/items/ac08ddeeaf74f3126f81

[iclems]

I agree the above mentioned link states a correct workaround but it uses the long supported DesktopCapture. The topic here is about supporting a now standard WebRTC API.

[angeloaruta]

Is there any update for this? Would be great to be able to use the new WebRTC API for screensharing.

[codyherzog-zz]

@WesselKroos

Awesome! Thanks so much.

[MurzNN]

Also here https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture is example of custom screen picker

[pawhtiobo]

For a noob like me, how do I make those changes that @WesselKroos sugests?

ty

[CapOM]

I think the issue is that the picker view (screenshot in this issue description) used in the standard w3c getDisplayMedia is implemented in chromium/src/chrome/browser/ui/views
(see https://source.chromium.org/chromium/chromium/src/+/master:chrome/browser/ui/views/desktop_capture/desktop_media_picker_views.h;l=20?q=desktopmediapickerviews&ss=chromium%2Fchromium%2Fsrc&originalUrl=https:%2F%2Fcs.chromium.org%2F ) and anything in chromium/src/chrome is not shipped into electron (except a view bits https://github.com/electron/electron/tree/master/chromium_src/chrome/browser )

[MeirionHughes]

@WesselKroos kudos. I had to butcher your code to inject it into 3rd party iframe... but I got it working. Cheers.

[mehulpangtey]

@WesselKroos I think you should wrap it in an npm package.

[tanphamanhh]

in electron 9.2.0, I'm using desktopCapture.getSource(..) to get desktop source, but when I'm using it on my video conferencing application, the other participent voice is recorded to screen sharing audio too (chrome 84 does not). I'm currently stuck with how can I remove that voices from screen audio stream.

const constraints = {
    audio: arg.audio //boolean audio or not
        ? {
                mandatory: {
                    chromeMediaSource: 'desktop',
                }
          }
        : false,
    video: {
        mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: arg.sourceId //source id from select window before
        }
    }
};
//navigator.mediaDevices.getDisplayMedia
navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
        console.log(stream.getAudioTracks());
        ElectronCaptureMedia.pendingSelectSourceHandle.success(stream);
    })
    .catch((err) => {
        console.log(err);
        ElectronCaptureMedia.pendingSelectSourceHandle.error(err);
    });

[jsheffers]

Has anyone successfully used the polyfill mentioned above with contextIsolation enabled? I don't think this is possible because you have to pass it through the contextBridge which doesn't seem to be allowing the stream through. Does anyone have a workaround for this?

[diamond-darrell]

Has anyone successfully used the polyfill mentioned above with contextIsolation enabled? I don't think this is possible because you have to pass it through the contextBridge which doesn't seem to be allowing the stream through. Does anyone have a workaround for this?

hey, regarding contextBridge and not allowing streams, is there any reference in the electron docs about it? I've run into the same problem upon upgrading my electron app and am trying to resolve it.

Following https://www.electronjs.org/docs/latest/api/desktop-capturer I get TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type 'MediaStream'. error instead of not allowed, which is something I guess

upd: I managed to solve (bypass?) this issue by not returning a media stream from my render but returning a source id and requesting user media on the web app side instead. Probably it’s the intended behavior right now, dunno, hopefully this info will help someone