Custom UI for jitsi meet

Thats what i tried.
In this README https://github.com/jitsi/jitsi-meet/ the link in the android Mobile app section sends me to this page: https://github.com/jitsi/jitsi-meet/blob/master/doc/mobile.md then i followed the instructions for Android devices and tried following the steps here https://github.com/jitsi/jitsi-meet/tree/master/android to build and use own SDK artifacts/binaries

You need to follow the readme you were following before: https://github.com/jitsi/jitsi-meet/blob/master/android/README.md

Where did you stop and what problems did you get?

I tried to follow the steps under “Build and use your own SDK artifacts/binaries” but I didn’t do much yet because i didn’t understand the first instruction:

$ (cd …; npm install)

What do i have to do prior to that?
Do i have to clone this repository: https://github.com/jitsi/jitsi-meet/ and then follow these steps inside that project? Or where do i have to hit npm install?

Yes, you have to clone the main repository and run the instructions from within it.

Okay so what i did so far:
cloned the main repository:

git clone https://github.com/jitsi/jitsi-meet.git

Then i copied these directories from the project in a separate folder (/tmp/repo/):

node_modules/react-native/android/com

and

node_modules/jsc-android/dist/org

Then, following the tutorial i changed

“file:${rootProject.projectDir}/…/…/jitsi-maven-repository/releases”
to
“file:/tmp/repo”

in the build.gradle (Module:sdk) and in the build.gradle (Project:jitsi-meet) - is that correct? Because in the README it says i have to change the android/sdk/build.gradle and android/build.gradle file and i am not sure if those are the ones meant by the README.
(By the way why do i have to adjust the gradle files in the cloned repo when i am not gonna need it for my project?)

After that i made a new Android Studio Project and added

maven { url “file:/tmp/repo” }

to my build.gradle (Project:MyProject)
and

implementation (‘org.jitsi.react:jitsi-meet-sdk:+’) { transitive = true }

to my build.gradle (Module:app)
When i try to sync gradle i get the following error:
grafik
Maybe the path to the /tmp/repo/ folder is incorrect?

Yes, that’s correct.

You want the SDK in your project, right? This will help you build your own version of it, which embeds the code in this repo, that’s why you need it.

Before that, have you actually build the SDK? The assembleRelease publish part.

You are right, i didn’t do that yet. However now i followed every step and still get the same error. Do you have any idea why that is the case or should i tell you what i did step by step?

Well, if you skip steps but don’t tell me, I won’t be able to help you.

Yeah sure but i followed everything now :S

These are the steps i did (basically all that is in the README in the section “Build and use your own SDK artifacts/binaries” if i didn’t misunderstand something):

  1. git clone https://github.com/jitsi/jitsi-meet.git
  2. Navigate to the newly added jitsi-meet folder and execute npm install
  3. Create a new local Repository (/tmp/repo) inside the android subfolder
  4. Navigate to the android subfolder
  5. Copy the react native and JavaScriptCore dependency via
    cp -r …/node_modules/react-native/android/com ./tmp/repo/
    and p -r …/node_modules/jsc-android/dist/org ./tmp/repo/
  6. Changed “file:${rootProject.projectDir}/…/…/jitsi-maven-repository/releases” in the build.gradle (Module:sdk) and build.gradle (Project:jitsi-meet) to “file:/tmp/repo”
  7. Execute ./gradlew clean in the android folder
    Execute ./gradlew :react-native-webrtc:assembleRelease
    Execute ./gradlew :react-native-webrtc:publish
    Execute ./gradlew :sdk:assembleRelease
    Execute ./gradlew :sdk:publish
  8. Create a new android Project
  9. Copy the /tmp/repo folder into this project
  10. Add maven { url “file:/tmp/repo” } in the build.gradle (Project:MyProject)
  11. Add implementation (‘org.jitsi.react:jitsi-meet-sdk:+’) { transitive = true } to the build.gradle (Module:app)
  12. Gradle sync project
    –> Error Message:
    grafik

Any ideas what i might have done wrong? Would be awesome if you could have a look again @saghul

Better create it outside of the jitsi-meet directory. Also, it doesn’t need to be a git repository.

There are more dependencies, you are better off doing ./gradlew clean assembleRelease publish as mentioned later in the README.

This is not needed.

Note that /tmp is wiped with every reboot, so you may want to put your resulting files somewhere more permanent.

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.

1 Like

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.

1 Like

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.