Custom UI for jitsi meet

Thanks a lot for the answer.
These are the steps i have done:

  1. Create a new folder /jitsi-local-sdk/repo outside the jitsi-meet directory
    These are the folders inside it: grafik
  2. Changed the path inside the build.gradle (Module:sdk) and build.gradle (Project:jitsi-meet) to “file:/jitsi-local-sdk/repo”
  3. Execute ./gradlew clean assembleRelease inside /jitsi-meet/android
  4. Change the maven url inside my Projects build.gradle (Project:MyProject) to maven { url “file:/jitsi-local-sdk/repo” }
  5. Sync gradle inside android studio

Unfortunately i am still getting the same error.

By the way I am still unsure how the gradle file finds that directory with the local SDK since it is not a absolute path.

What’s the absolute path to jitsi-local-sdk/repo ?

The absolute path to the jitsi-local-sdk/repo where i copied the said files is
C:\Users\Nexxon\AndroidProjects\CloneJitsiMeet\jitsi-local-sdk\repo

But i think by following the README another jitsi-local-sdk folder got created inside the jitsi meet project: C:\Users\Nexxon\AndroidProjects\CloneJitsiMeet\jitsi-meet\android\sdk\jitsi-local-sdk\repo
In this folder there are several subdirectories
C:\Users\Nexxon\AndroidProjects\CloneJitsiMeet\jitsi-meet\android\sdk\jitsi-local-sdk\repo\org\jitsi\react\jitsi-meet-sdk and from my understanding this is the one where the gradle file should search with this line:
implementation (‘org.jitsi.react:jitsi-meet-sdk:+’) { transitive = true } right?

By the way the third path contains these files:
grafik

Oh, I think I have some bad news. We don’t support building on Windows. The command which bundles the code will fail.

If you run everything in a Ubuntu VM it shoulw work just fine and then you can use those artifacts from wherever you need.

The path must be specified as aboslute, but as I said, Linux or macOS only.

Hi saghul,
I tried all of this and i was successful in building the app. But my concern is that i want to make Buttons in Native Code and On the click of that button i want to run the neccessary function. For eg: I want to make a new Audio Mute Button and on clicking that button the audio should mute/unmute. How can i achieve this .??
Waiting for your reply.
Thank You.

Hi @Mayur_Bhandari

I assume your mute button example is just a example, since we already have such functionality.

Now, if you want new buttons, you are going to have to writee them in JavaScript. The SDK is built with React Native, so all (well, most) logic is written in JS.

Here is where the toolbar with the main buttons is: https://github.com/jitsi/jitsi-meet/blob/master/react/features/toolbox/components/native/Toolbox.js#L238

1 Like

Hi Saghul,
What if i dont want the mute button provided by you guys and instead decide to make a new button which might act as mute/unmute button. I want a native button to be able to do it. How do i do that…??

Thank you for your reply.

You are free to do whatever you want, of course, the source code is available. But what you want is just not possible. Since the entire app is (mostly) built in JS, yoiu wouldn’t have acess to thee Toolbox view to add your native button as a child.

If you can explain your actual problem with more details I might be able to point you in the right direction though.

I want to use Jitsi Videobridge as a backend and Want to build a client which will work on that backend. But i want to build my own custom jitsi frontend where any one can change the UI, can the control the button positions, can show/hide buttons according to one’s need, buttons control can be easily modified in terms of dynamic css, etc.

Then just go for it, there is not much advice I can give you there. You can use the REST API to talk to the JVB and to the entire app natively by using the WebRTC APIs directly. It won’t be a walk in the park though.

Hi saghul,
Can i expose the javascript function to native android/ios which are responsible for the functionality of the buttons. (HANGUP, AUDIO/VIDEO MUTE).

Yes. Hangup is already exposed in the form of the leave() function on the JitsiMeetView. Audio and video mute are not currently exposed but they could be.

I tried using lib-jitsi-meet in React Js project and it worked perfectly can i use lib-jitsi-meet in react native project. Do you have any headers from where i should start building.??

You keep jumpiong from one thing to another. I no longer know what you are trying to accomplish.

Yes, using lib-jitsi-meet is possible, the problem is, of course, that you have to do the UI yourself. This how Jitsi Meet itself is implemented, so the best resource to start is https://github.com/jitsi/jitsi-meet

My end goal is to have custom gui. I have tried different things but cannot get it done.
1: I tried fiddling the jitsi meet code and make native button which could work as required. Cannot get it done.
2: I tried using lib-jitsi-meet but im having problem installing lib-jitsi-meet npm package. Stuck here.
3: Also tried follwing this (https://github.com/dgeorgiev06/jitsi-funky) repo which does work on lib-jitsi-meet but it is not working.

You could do this in JS, since the app is in JS. Also, what are these requirements you talk about?

What problem specifically? Note that this approach requires you do the ENTIRE UI. It’s a big departure from wanting to change a button as you mentioned in step 1.

I don’t know about that proje t, it’s not maintained by us.

I want to make ALL the buttons (mute/umute/hangup) in native and then be able to make those button working. Instead of using the buttons provided in jitsi meet. Which means exposing all the functions just like hangup function is exposed.

The error i am getting is: Can’t find variable: _filename in strophe.js

Why? What do you want to acomplish? As I said doing buttons in native would be really hard because the toolbox and everything else is in JS. What do you want to do with the buttons? Exposing the required functions is really the least of your worries, trust me.

You’ll need to apply a few polyfills, look at all the files called “polyfill*” in the Jitsi Meet repository.

Can u elaborate a bit on how to expose the function. I am trying to integrate video calling in my ap and then provide my app as an sdk. So my clients can change the UI and call those specific functions.
Thank You saghul, you have been so helpful.

[modules/xmpp/strophe.util.js] <Object.i.Strophe.log>: Strophe: TypeError: At least peerconnection or wsUrl must be given.

What does this error means.??