Search code examples
javascriptwebviewelectronwebrtcelectron-forge

Webview in Electron does not allow to share screen?

I am trying to create an Electron app which runs webview of Google meet. Everything works fine but when I try to share screen it show error "browser does not support share screen".

Is there any possible way to share screen in webview in Electron?

This is my main.js file

const { app, BrowserWindow, desktopCapturer } = require('electron')
    
let mainWindow
    
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            webviewTag: true
        }
    })

    mainWindow.loadFile('index.html')

    mainWindow.on('closed', function () {
        mainWindow = null
    })

    mainWindow.webContents.on('did-finish-load', function() {
      
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

This is my html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <webview
          autosize="on"
          src="https://meet.google.com/"
          id="webview"
          data-home="https://meet.google.com/"
          style="width: 100%; height: 100vh;"
        ></webview>
    </body>
</html>

Some people suggest to use the desktopCapturer module of Electron but how can I use it in webview?

Solution

  • use desktopCapturer to share the screen in the load URL add this code in app.whenReady(). this will automatically screen the first available screen

    session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
    desktopCapturer.getSources({types: ['screen']}).then((sources) => {
        callback({video: sources[0]});
     });
 });

    but if you want to select a particular screen you need to implement your own desktop picker dialog desktopCapturer in Electron. for that instead of passing sources[0] in callback emit an electron event which show all the available screen and then return your particular source id and pass it to callback({video: sources[id]});

    it may be not work in the case of google meet screen sharing because Google(security) does not allow this but it works in my case when I have to load bigbluebutton video conferencing web app in electron through load URL