Screenshare issue in Custom Electron App using Jitsi Meet Iframe APIs

I am working on Video Conferencing App using Jitsi Meet iframe APIS.Everything is working fine on web but i am facing Screenshare issues in MACOS electron app.

I implemented Jitsi meet electron utils for screenshare purpose but facing some errors related to screencapturepermissions.

Errors facing in Console
Logger.js:154 2021-06-26T06:25:11.838Z [features/desktop-picker] Called JitsiMeetElectron.obtainDesktopStreams but it is not defined
o @ Logger.js:154
(anonymous) @ functions.js:40
e.length.thumbnailSize @ functions.js:23
_updateSources @ DesktopPicker.js:408
_startPolling @ DesktopPicker.js:381
componentDidMount @ DesktopPicker.js:178
vl @ react-dom.production.min.js:251
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vr @ react-dom.production.min.js:120
yl @ react-dom.production.min.js:244
il @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vr @ react-dom.production.min.js:120
Kr @ react-dom.production.min.js:121
Gr @ react-dom.production.min.js:120
ol @ react-dom.production.min.js:224
notify @ Subscription.js:23
t.notifyNestedSubs @ Subscription.js:65
n.notifySubscribers @ Provider.js:59
t.handleChangeWrapper @ Subscription.js:70
g @ redux.js:220
(anonymous) @ index.js:14
(anonymous) @ middleware.js:29
(anonymous) @ middleware.js:32
(anonymous) @ middleware.js:31
(anonymous) @ middleware.web.js:31
(anonymous) @ middleware.any.js:22
(anonymous) @ middleware.js:67
(anonymous) @ middleware.js:43
(anonymous) @ middleware.js:61
(anonymous) @ middleware.js:83
(anonymous) @ middleware.js:71
(anonymous) @ middleware.js:78
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:106
(anonymous) @ middleware.js:38
(anonymous) @ middleware.js:33
(anonymous) @ middleware.web.js:24
(anonymous) @ middleware.any.js:93
(anonymous) @ middleware.js:77
(anonymous) @ middleware.web.js:20
(anonymous) @ middleware.js:44
(anonymous) @ middleware.js:25
(anonymous) @ middleware.js:16
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:23
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:148
(anonymous) @ middleware.js:16
(anonymous) @ middleware.js:36
(anonymous) @ middleware.js:33
(anonymous) @ middleware.js:177
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:24
(anonymous) @ middleware.js:27
(anonymous) @ middleware.web.js:20
(anonymous) @ middleware.js:42
(anonymous) @ middleware.js:149
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:60
(anonymous) @ middleware.js:44
(anonymous) @ middleware.js:49
(anonymous) @ middleware.js:28
(anonymous) @ middleware.js:12
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:35
(anonymous) @ middleware.web.js:42
(anonymous) @ middleware.any.js:102
(anonymous) @ middleware.js:106
(anonymous) @ middleware.js:19
(anonymous) @ middleware.web.js:33
(anonymous) @ middleware.js:91
(anonymous) @ middleware.js:103
(anonymous) @ middleware.js:24
(anonymous) @ middleware.js:20
(anonymous) @ middleware.js:15
(anonymous) @ middleware.js:23
(anonymous) @ middleware.js:20
(anonymous) @ middleware.js:25
(anonymous) @ middleware.js:74
(anonymous) @ middleware.js:63
(anonymous) @ middleware.js:198
(anonymous) @ middleware.web.js:109
openDesktopPicker @ conference.js:169
obtainScreenOnElectron @ ScreenObtainer.js:120
(anonymous) @ RTCUtils.js:978
_newGetDesktopMedia @ RTCUtils.js:977
(anonymous) @ RTCUtils.js:1243
newObtainAudioAndVideoPermissions @ RTCUtils.js:1356
obtainAudioAndVideoPermissions @ RTC.js:242
createLocalTracks @ JitsiMeetJS.js:360
(anonymous) @ functions.js:116
Promise.then (async)
h @ functions.js:112
_createDesktopTrack @ conference.js:1655
_switchToScreenSharing @ conference.js:1852
toggleScreenSharing @ conference.js:1621
toggle-share-screen @ API.js:551
(anonymous) @ API.js:410
(anonymous) @ Transport.js:128
emit @ Transport.js:127
_onMessageReceived @ Transport.js:98
(anonymous) @ PostMessageTransportBackend.js:43
u @ postis.js:55
postMessage (async)
send @ external_api.js:3
send @ external_api.js:3
sendEvent @ external_api.js:3
executeCommand @ external_api.js:3
(anonymous) @ VM346:1
Show 63 more frames
Content.js:160 @atlaskit/modal-dialog: Deprecation warning - Use of the footer prop in ModalDialog is deprecated. Please compose your ModalDialog using the ‘components’ prop instead
value @ Content.js:160
vl @ react-dom.production.min.js:251
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vr @ react-dom.production.min.js:120
yl @ react-dom.production.min.js:244
il @ react-dom.production.min.js:223
(anonymous) @ react-dom.production.min.js:121
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vr @ react-dom.production.min.js:120
Kr @ react-dom.production.min.js:121
Gr @ react-dom.production.min.js:120
ol @ react-dom.production.min.js:224
notify @ Subscription.js:23
t.notifyNestedSubs @ Subscription.js:65
n.notifySubscribers @ Provider.js:59
t.handleChangeWrapper @ Subscription.js:70
g @ redux.js:220
(anonymous) @ index.js:14
(anonymous) @ middleware.js:29
(anonymous) @ middleware.js:32
(anonymous) @ middleware.js:31
(anonymous) @ middleware.web.js:31
(anonymous) @ middleware.any.js:22
(anonymous) @ middleware.js:67
(anonymous) @ middleware.js:43
(anonymous) @ middleware.js:61
(anonymous) @ middleware.js:83
(anonymous) @ middleware.js:71
(anonymous) @ middleware.js:78
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:106
(anonymous) @ middleware.js:38
(anonymous) @ middleware.js:33
(anonymous) @ middleware.web.js:24
(anonymous) @ middleware.any.js:93
(anonymous) @ middleware.js:77
(anonymous) @ middleware.web.js:20
(anonymous) @ middleware.js:44
(anonymous) @ middleware.js:25
(anonymous) @ middleware.js:16
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:23
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:148
(anonymous) @ middleware.js:16
(anonymous) @ middleware.js:36
(anonymous) @ middleware.js:33
(anonymous) @ middleware.js:177
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:24
(anonymous) @ middleware.js:27
(anonymous) @ middleware.web.js:20
(anonymous) @ middleware.js:42
(anonymous) @ middleware.js:149
(anonymous) @ middleware.js:21
(anonymous) @ middleware.js:60
(anonymous) @ middleware.js:44
(anonymous) @ middleware.js:49
(anonymous) @ middleware.js:28
(anonymous) @ middleware.js:12
(anonymous) @ middleware.js:39
(anonymous) @ middleware.js:35
(anonymous) @ middleware.web.js:42
(anonymous) @ middleware.any.js:102
(anonymous) @ middleware.js:106
(anonymous) @ middleware.js:19
(anonymous) @ middleware.web.js:33
(anonymous) @ middleware.js:91
(anonymous) @ middleware.js:103
(anonymous) @ middleware.js:24
(anonymous) @ middleware.js:20
(anonymous) @ middleware.js:15
(anonymous) @ middleware.js:23
(anonymous) @ middleware.js:20
(anonymous) @ middleware.js:25
(anonymous) @ middleware.js:74
(anonymous) @ middleware.js:63
(anonymous) @ middleware.js:198
(anonymous) @ middleware.web.js:109
openDesktopPicker @ conference.js:169
obtainScreenOnElectron @ ScreenObtainer.js:120
(anonymous) @ RTCUtils.js:978
_newGetDesktopMedia @ RTCUtils.js:977
(anonymous) @ RTCUtils.js:1243
newObtainAudioAndVideoPermissions @ RTCUtils.js:1356
obtainAudioAndVideoPermissions @ RTC.js:242
createLocalTracks @ JitsiMeetJS.js:360
(anonymous) @ functions.js:116
Promise.then (async)
h @ functions.js:112
_createDesktopTrack @ conference.js:1655
_switchToScreenSharing @ conference.js:1852
toggleScreenSharing @ conference.js:1621
toggle-share-screen @ API.js:551
(anonymous) @ API.js:410
(anonymous) @ Transport.js:128
emit @ Transport.js:127
_onMessageReceived @ Transport.js:98
(anonymous) @ PostMessageTransportBackend.js:43
u @ postis.js:55
postMessage (async)
send @ external_api.js:3
send @ external_api.js:3
sendEvent @ external_api.js:3
executeCommand @ external_api.js:3
(anonymous) @ VM346:1
Show 58 more frames
Logger.js:154 2021-06-26T06:25:11.901Z [JitsiMeetJS.js] <Object.getGlobalOnErrorHandler>: UnhandledError: Called JitsiMeetElectron.obtainDesktopStreams but it is not defined Script: null Line: null Column: null StackTrace: Error: Called JitsiMeetElectron.obtainDesktopStreams but it is not defined

Error facing on Launching APP
Uncaught Exception:
Error: Cannot find module ‘./build/Release/screencapturepermissions’

Screenshot 2021-06-26 at 11.55.22 AM

Currently i am using:

“electron”: “12.0.11”,
“electron-builder”: “22.10.5”,
“electron-rebuild”: “^2.3.5”
“jitsi-meet-electron-utils”: “github:jitsi/jitsi-meet-electron-utils#v2.0.16”, //Also tried using Local package of same
“node-abi”: “^2.30.0”,

Seems you haven’t initialized the electron utils part for screensharing

How i can initialize electron utils for same.As per mind i did everything mentions in docs i.e in main process as well as rederer.
Please help as i am stuck here from last few days

Hello, Im also struggling to get screensharing to work on electron, did you manage to fix your Issue ?

Thank you

Hi,

Does anyone have any sample code or any suggestion for this? I am facing the same problem.

The sample code is here: GitHub - jitsi/jitsi-meet-electron: Jitsi Meet desktop application powered by

Hello, i have used this but i am still facing the same issue

Any update for this issue because I have the same issue

Do you have the issue when running jitsi-meet-electron?

How can I run jitsi-meet-electron because I created the meeting using external API by ‘meet.jit.si’ domain

Check it out and follow the build and run process to run it. It also uses meet.jit.si and external API.
If it works there you can use it as a guide on how to set it up in your electron app.

this problem you had because you use electron and you load jitsi meet in window.loadURL()

that’s why it doesn’t work,
I’ve searched a lot and I haven’t found a solution, I think it’s better to make a jitsi meet iframe and integrate it in electron or go through electron jitsi meet directly without loading a url

you can do like this window.loadFile(test.html)

and in test.html you create iframe api jitsi meet

this.api = new JitsiMeetExternalAPI(this.domain, this.options);

let jitsiMeetUrl = location.href.split(‘#’)[0] + ‘index.html#/jitsi-meet/’ + roomName;

		let newWindow = new BrowserWindow({
			height: this.height,
			width: 1046,
			minWidth: 552,
			minHeight: this.height,
			frame: false,
			center: true,
			transparent: false,
			autoHideMenuBar: true,
			webPreferences: {
				nodeIntegration: true,
				contextIsolation: false,
				preload: jitsiMeetUrl,
    			enableRemoteModule: true
			},
		});
		newWindow.loadURL(jitsiMeetUrl);

I added the above code in my project ionic/angular to display jitsi meet in a new window and then build the electron, jitsi opens in a new window but share screen not working

Have you integrated the jitsi-meet-electron-sdk as described GitHub - jitsi/jitsi-meet-electron-sdk: Jitsi Meet SDK for Electron?

Yes I integrated with ‘@jitsi/electron-sdk’ and added the following code in electron/index.js

app.commandLine.appendSwitch(‘disable-site-isolation-trials’);

initPopupsConfigurationMain(mainWindow);
setupAlwaysOnTopMain(mainWindow, null, windowOpenHandler);
setupPowerMonitorMain(mainWindow);
setupScreenSharingMain(mainWindow, “ULTATEL_HUB”, pkgJson.build.appId);
if (ENABLE_REMOTE_CONTROL) {
new RemoteControlMain(mainWindow); // eslint-disable-line no-new
}

and it fix this error but still screen sharing not working

2022-08-31T16:21:18.865Z [JitsiMeetJS.js] <Object.getGlobalOnErrorHandler>: UnhandledError: Called JitsiMeetElectron.obtainDesktopStreams but it is not defined Script: null Line: null Column: null StackTrace: Error: Called JitsiMeetElectron.obtainDesktopStreams but it is not defined

Are you calling setupScreenSharingRender as pointed in the docs, so it can attach the screensharing handler in the iframe where jitsi-meet is loaded?

I added it but have an issue with electron 12.0.2 when added electron jitsi meet SDK

Make sure you are using electron version > 16.0

How can “setupScreenSharingRender(api)” in electron app that I created the api from ionic/angular project then generate electron app

Try downloading and running GitHub - jitsi/jitsi-meet-electron: Jitsi Meet desktop application powered by