How to use DesktopPicker on Electron

Hi all,
I am trying to open jitsi-meet in an electron window. I saw lib-jitsi-meet has the method that will be used to obtain the screen sharing stream based on the browser type. If the browser environment is electron, it opens DesktopPicker. I have already got screen stream Ids in electron and passed them to DesktopPicker. I give the value to desktopSharingSources.
In this statement

“this.state.types = DesktopPicker._getValidTypes(this.props.desktopSharingSources)”,

all the objects in array were deleted.

static _getValidTypes(types = ) {
return types.filter(
type => VALID_TYPES.includes(type));
}

I have no idea how to build the array that fits this filter, or can someone help me how to do desktop sharing in an electron window with jitsi-meet
Thanks

Have you looked at https://github.com/jitsi/jitsi-meet-electron? It’s jitsi-meet wrapped in electron. It was originally a sample app with some electron features, but most of the jitsi-meet electron features got moved to https://github.com/jitsi/jitsi-meet-electron-utils, which jitsi-meet-electron uses, and jitsi-meet-electron was recently built out further.

The jitsi-meet-electron should give you some examples. Specifically look here: https://github.com/jitsi/jitsi-meet-electron/blob/141b57e679ae2c7c733f6bcf9c295f657d7acbd3/app/features/conference/components/Conference.js#L264. That sets up a global on for jitsi-meet’s desktop picker to find and use for interacting with electron to get available sources.

The types array you’re talking about is what’s used to ask electron what screenshare sources to get information from, which is defined here https://github.com/jitsi/jitsi-meet/blob/4da8c626f78be18436752311e1f05f2661f499d8/config.js#L153. The static method is enforcing screen and window only; I guess the idea there is people can deploy their own frontend and change those values as needed.

I have got all the desktop stream ids and something strange has happened at following method (DesktopPicker.js)
/**
* Obtains the desktop sources and updates state with them.
*
* @private
* @returns {void}
/
_updateSources() {
const { types } = this.state;
if (types.length > 0) {
obtainDesktopSources(
this.state.types,
{ thumbnailSize: THUMBNAIL_SIZE }
)
.then(sources => {
const selectedSource = this._getSelectedSource(sources);
// TODO: Maybe check if we have stopped the timer and unmounted
// the component.
this.setState({ //error happened at here and directly went to .catch()
sources,
selectedSource
});
})
.catch(() => { alert(‘error’)/
ignore */ });
}
}
error happened at this.setState() and directly went to .catch()
do you have any idea what’s going on here?

No, I don’t have any idea. You should log the error (console.error or whatever you like) passed into catch instead of ignoring it to see the details or remove the catch to let the error propagate so you can get the details logged.

Hi

In the browser the Screen sharing is working fine with even providing the Extension ID.

When trying to share screen inside Custom Electron App, I see the pop up screen , but nothing happens.
When i check the error , i see Desktop Picker not defined.

Not sure where to define and what to define.

Please help

Prem

Are you using https://github.com/jitsi/jitsi-meet-electron-utils?
https://github.com/jitsi/jitsi-meet-electron-utils#screen-sharing

No I am not using Electron Utilts

My structure
in The Electron App i am calling https://employee.domain.com
Once the user login to the portal
In one of the menu, I am calling Jitsi meet Api by passing the room id.

I am new to Electron App

So you need to use the electron utils in your app, look at the documentation how to enable screen-sharing (my second link).

@premanandmanimaran21
Did you try following the readme: https://github.com/jitsi/jitsi-meet-electron-utils
You also have an example how that is done in electron, check code of https://github.com/jitsi/jitsi-meet-electron
You need to add a dependency in your package.json and make few calls to initialise the stuff you need and that’s it, check jitsi-meet-electron code for an example.

Please do no hijack random threads with your question.