Custom UI for jitsi meet


#1

Hello everyone,
i am currently trying to develop a mobile video conference app for android devices.
I have added Jitsi Meet to my project by following the tutorial on https://github.com/jitsi/jitsi-meet/tree/master/android and it works perfectly.
However i want to customize the existing user interface so the app works better for the intended purpose. To be a bit more exact i want to make a new activity (and new UI) for joining conferences and i want to remove a couple of buttons and options that are available in the conference itself + add own buttons with different functionality.
To be honest i don’t really have an idea how to start on that and couldn’t find anything. Can anyone tell me how to get started on that?


#2

That repo contains the entire source code for both the web and mobile apps. You will want to start hacking in the react/ subfirectory.

If you want to change buttons you will need need to edit the Toolbox component.


#3

Thanks for your answer!
So from my understanding by following the tutorial on https://github.com/jitsi/jitsi-meet/blob/master/android/README.md i added a remote dependency by writing

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

in the build.gradle (Module:app) file. Gradle then searches that remote dependency by looking in the build.gradle (Project:MyProject) file and finds it because this was added as a repository:

maven { url "https://github.com/jitsi/jitsi-maven-repository/raw/master/releases" }

And the code for jitsi-meet is in excactly that github repo. Is that correct so far?

However i don’t find the react subdirectory that you were talking about when i am looking through the files on this github page. (By the way, the files from that repository aren’t saved in my local project right?)

What do i have to do so i can access this react subdirectory in my project and hopefully adjust the needed files to my needs? Do i have to follow the steps under “Build and use your own SDK artifacts/binaries” to do that?


#4

The maven releases repo is where we release the built artifacts. The source is here: https://github.com/jitsi/jitsi-meet

The necessary dependencies will be downloaded automatically.

Yes, you’ll need to follow those steps.


#5

So again, just to be sure if i want to add or remove buttons from the UI in the videoconference I can’t do it with the pre-build SDK artifacts/binaries?! I have to follow the instructions on how to build and use my own SDK artifacts/binaries so that i have the Maven repository local, inside my project and can hack inside the files!?

Also: I didn’t find any listener-methods that i could use when for example the mute-button gets pressed. Are there listeners available that i didn’t see?


#6

Correct, that’s what you need to do in order to alter the buttons.

As for listener methods, there is currently no method for that, you haven’t missed it.


#8

I created a project by following the the tutorial that is linked in your documentation (https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies)
This is what i get when i hit npm install inside the Project:


This is the package.json from my Project:
grafik
How can i procceed here?


#9

You don’t need to do any of that. You need to execute the commands in the README from the jitsi-meet repo, and sometimes from the android subdirectory. Follow the instructions closely and you should be able to build the SDK in no time!


#10

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


#11

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?


#12

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?


#13

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


#14

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?


#15

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.


#16

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?


#17

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


#18

Yeah sure but i followed everything now :S


#19

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

#20

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


#21

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.