React native + lib-jitsi-meet - RTCPeerConnection.js polyfill issue - media tracks not getting added

Firstly, thanks to the entire Jitsi team and the community for such an awesome project.

Description:

Facing issue in integrating lib-jitsi-meet in react native. We are trying to build a react native jitsi meet client from scratch using lib-jitsi-meet. We are able to join the call, send and receive messages. But we are unable to send or receive media tracks. We are getting the following error:

TypeError: undefined is not an object (evaluating 'eventTarget[LISTENERS][type]')

We have drilled down the issue to the polyfill RTCPeerConnection.js. The log for the same is available here. As we can see in the logs, the error stack trace points to a set function in the RTCPeerConnection class.

We have tried to solve this with multiple approaches described below but to no avail.

You can find our repository here. For the purpose of this post, we can consider our self-hosted jitsi-meet to be located at jitsimeet.example.com. We are able to join the same conferences on both browser and jitsi-meet official mobile app without any issues. We are currently trying this only in android(react native app). We weren’t able to run the repo on ios after adding react-native-webrtc and we wanted to deal with it at another time.

We copied the whole polyfills folder from official Jitsi Meet repo and imported it in the index.js.

The first approach we tried is to downgrade react and react-native versions to what were being used in the official jitsi-meet repo which did not solve the issue and had the same log.

The second approach was in the webrtc.js polyfill, we directly used the RTCPeerConnection that was imported from react-native-webrtc. With this, we started seeing the mobile app camera stream on browser at jitsimeet.example.com/test1. On the mobile app, we are seeing an error(screenshot provided below). You can also find the log here.

The third approach we have tried is to rewrite the polyfill RTCPeerConnection.js as a class since we found a comment in RTCPeerConnection.js talking about not using class and extends due to a runtime error. The updated code for that is available at RTCPeerConnection2.js. With this we are getting an error(screenshot provided below). You can also find the log here.

Steps to reproduce:

1. Clone the repo(https://github.com/s-xync/rn-jitsi-poc)
2. npm i and npx react-native run-android
3. Click on Go to class screen button.
4. Check the errors on the screen and the logs in console.

Expected behavior:

Expected media tracks to be sent and received across all conference participants.

Actual behavior:

Media tracks from react native mobile app not being added. Throwing errors in RTCPeerConnection.js polyfill.

Any help on resolving this bug with the polyfill is greatly appreciated.

Thank you for your time.

[rananajam1]

@s-xync can you briefly explain the steps you took for integrating this into React-native app? TIA

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.