Jitsi Meet + EtherDraw (Live video annotation!)

(Just a fair warning, I’m not a web developer but I’m learning)

I’m trying to incorporate EtherDraw while keeping the video container visible so I can annotate over video and anyone can see the annotations.

I found out I just need to modify 2 CSS styles to get it to work but not sure what to change in the Jitsi-Meet GUI as I’m not familiar with React or much front end development.

<div id="largeVideoElementsContainer" style="opacity: 0; visibility: hidden;">

<div id="largeVideoElementsContainer" style="opacity: 1; visibility: visible;">

How do I go about changing it? I’ve searched the build but I’m confused about what to change so even a push in the right direction or a little more information on how these containers work would be nice!

Thank you,

C10

Are you trying to figure out how to modify some CSS in the Jitsi Meet code base and then re-build it all into a web app? In other words, build your own (very lightly modified) “version” of Jitsi Meet front end?

@canadaduane Correct.

Ok, sounds like you’re up for a fun but challenging dive into the deep end!

The workflow you’re getting in to is quite a bit different from the “change the CSS in the web browser” flow I think you’re used to–basically, you’ll need to do the following:

  1. install “git” and learn how to clone the jitsi-meet repository [Note: you can skip this step and just download a zip file of the jitsi-meet repository, but if you’re going down the developer road, it might pay off to learn to use git to clone].
  2. install a code editor such as Visual Studio Code.
  3. install the node ecosystem: node (you’ll need javascript running on your computer outside of a browser, because many of the following tools are javascript-based, but don’t run in a browser), npm (the “Node Package Manager”), and make (a standard unix tool for compiling/building code and projects)
  4. using the code editor (i.e. VS Code), change the CSS or other parts that you need to to make your “lightly modified version” of Jitsi Meet
  5. run “make dev” on the command line (see https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web for further details on this last step)
  6. open up a browser and point it to the localhost address that you’re given by the local service you just started in step 5

There may be other steps I’m missing, but that should get you started in the right direction. Good luck!

2 Likes