Jitsi Docker Whiteboard integration

AndyS · December 26, 2022, 10:34am

Hi All!

I created custom-config.js and added the necessary lines for the whiteboard configuration:

whiteboard: {
     enabled: true
     collabServerBaseUrl: 'https://whiteboard'
}

When opening meet.company.com - I get a blank gray screen and many errors in the console. The excalidraw backend is up and running correctly (single docker compose file on jitsi network).

    whiteboard:
        image: git.company.com:4567/image:tag
        restart: always
        networks:
            meet.jitsi:

Maybe need to make some additional settings?

Thanks for any help!

emrah · December 26, 2022, 11:34am

There should be comma between items

AndyS · December 26, 2022, 1:21pm

Hi Emrah!

Thanks for reply. No luck

suraj · January 19, 2023, 6:34am

Hi @AndyS
can you guide me how you setup whiteboard for docker-jitis-meet.

AndyS · January 19, 2023, 7:43am

Hi Suraj!

In latest version you can configure whiteboard via .env

WHITEBOARD_ENABLED=1
WHITEBOARD_COLLAB_SERVER_PUBLIC_URL=http://whiteboard

Also need build backend whiteboard. Instructions:

I used Dockerfile for this.

docker-compose example:

    whiteboard:
        image: git.company.ru:4567/jitsi/whiteboard:27012
        restart: always
        networks:
            meet.jitsi:

Please note: use the same network what used jitsi

suraj · January 19, 2023, 7:46am

Thanks AndyS, I will try and let you know.

suraj · January 19, 2023, 8:22am

@AndyS I installed excalidraw backend (at path opt/excalidraw-backend) and it is running fine at port :3002.
after that I added these lines in .env file of docker-jitsi-meet
WHITEBOARD_ENABLED=1
WHITEBOARD_COLLAB_SERVER_PUBLIC_URL=http://my-website-name.com:port

now I have doubt in this following part.

AndyS:

docker-compose example:
    whiteboard:
        image: git.company.ru:4567/jitsi/whiteboard:27012
        restart: always
        networks:
            meet.jitsi:
Please note: use the same network what used jitsi

can you please explain this have you implemented it in docker-compose.yml file or somewhere else. and how can I know that excalidraw-backend is connected with my docker-jitsi-meet.

AndyS · January 19, 2023, 8:45am

Yes, this is specified in the docker-compose.yml file

The network section links your docker-jitsi-meet to the whiteboard container

Within the meet.jitsi network, you can refer to services by their name, in my case whiteboard (top arrow).

After running the whiteboard container, you can run curl http://IP_WHITEBOARD_CONTAINER

suraj · January 19, 2023, 12:51pm

@AndyS , I have one doubt we have two things here:

a. excalidraw backend.
b. excalidraw-frontend (where we can draw anything.)

opt/excalidraw-backend - which is running on port:3002 (http://my-wesite-name:3002). if we hit in the browser it says “Excalidraw backend is up :)” ( which means Excalidraw backend is running on 3002.)
home/anyfolder/excalidraw - this is running on port: 3000.(http://my-website-name:3000).If I hit this the browser it displays whiteboard on browser.

so what url should I mention at “WHITEBOARD_COLLAB_SERVER_PUBLIC_URL=http://whiteboard.”
front -end one or backend one

AndyS · January 19, 2023, 2:58pm

How you run whiteboard? On server via npm or using docker container?

suraj · January 19, 2023, 3:07pm

on server using yarn start.

AndyS · January 19, 2023, 3:28pm

I think that you do not need to configure and specify the port, the whiteboard when building the backend uses port 80 by default and it is not required to specify it in the variable and add this rows to docker-compose.yml (jitsi docker-compose)

    whiteboard:
        image: git.company.ru:4567/jitsi/whiteboard:27012
        restart: always
        networks:
            meet.jitsi:

If you are using Jitsi in a container, then it is better to build a whiteboard container and connect to the meet.jitsi network as I wrote earlier, in this case you do not need to open port 80 to the outside, because it is only required for the container

suraj · January 19, 2023, 4:03pm

According to my server setup I am using jitsi-meet from path (srv/meet/jitsi-meet) and other components of jitsi ( prosody, jicofo and jvb1 and jvb2 ) using docker container as mentioned in docker-compose.yml file. And I commented jitsi-meet code in docker-compose.yml file.

so can you please tell me the steps I should follow to integrate whiteboard.Do I require to run excalidraw front-end separately or not. whiteboard option is not show in more option menu even I enabled the whiteboard in .env file as well as in config.js file.

suraj · January 20, 2023, 1:54pm

Hi @AndyS ,

when I add these rows in docker-compose.yml file. Then down the docker containers and again up then it gives error.

tugrul · January 26, 2023, 4:29pm

hi everyone,
i solved it!
see: https://github.com/tgrld/docker-jitsi-meet

suraj · January 27, 2023, 1:12pm

Hi turgrul,

can you elaborate values of these variables with an example :
- WHITEBOARD_COLLAB_SERVER_BASE_URL
- WHITEBOARD_DOMAIN
- WHITEBOARD_COLLAB_SERVER_PUBLIC_URL

like if my website name is “dev.surajTest.com:8090”. so what values should I put for these variables, can you please explain?
and my excalidarw-backend is running on 127.0.0.1:3002. on server at location opt/excalidraw-backend

tugrul · January 27, 2023, 2:32pm

Hi suraj,

You must run excalidraw-backend as a docker container.
For this you need excalidraw-backend docker image.
Use my image (tgrl/excalidraw-backend) or build your own image.
If you create your own image, don’t forget to write it in the whiteboard.yml file.
It doesn’t matter what you type in the WHITEBOARD_DOMAIN field.
I think you are using http. WHITEBOARD_COLLAB_SERVER_PUBLIC_URL=http://dev.surajTest.com:8090

My solution steps:

build excalidraw-backend docker image.

cd ~
git clone https://github.com/jitsi/excalidraw-backend.git
cd excalidraw-backend
docker build -t tgrl/excalidraw-backend .

add whitebord environments .env
edit ~/docker-jitsi-meet/.env

# whiteboard support
WHITEBOARD_ENABLED=1
WHITEBOARD_DOMAIN=whiteboard.meet.jitsi
WHITEBOARD_COLLAB_SERVER_PUBLIC_URL=https://meet.example.com

and change it:

JITSI_IMAGE_VERSION=stable-8218

add env to docker-compose.yml
services->web->environment:

- WHITEBOARD_COLLAB_SERVER_PUBLIC_URL

create whiteboard.yml in ~/docker-jitsi-meet

version: ‘3.5’

services:
whiteboard:
image: tgrl/excalidraw-backend:latest
container_name: whiteboard
restart: ${RESTART_POLICY:-unless-stopped}
#expose:
# - 9090
depends_on:
- web
networks:
meet.jitsi:
aliases:
- ${WHITEBOARD_DOMAIN:-whiteboard.meet.jitsi}

edit ~/docker-jitsi-meet/web/rootfs/defaults/meet.conf
add line 8-9

{{ $WHITEBOARD_ENABLED := .Env.WHITEBOARD_ENABLED | default “1” | toBool }}
{{ $WHITEBOARD_DOMAIN := .Env.WHITEBOARD_DOMAIN | default “http://whiteboard.meet.jitsi” -}}

add line 135

{{ if $WHITEBOARD_ENABLED }}
# whiteboard (excalidraw-backend)
location = /socket.io/ {
tcp_nodelay on;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;

proxy_pass http://{{ .Env.WHITEBOARD_DOMAIN }}/socket.io/?$args;
}
{{ end }}

I built my own jitsi/web docker image.

cd ~/docker-jitsi-meet/web
nano Dockerfile
ARG BASE_TAG=stable-8218

write&close file

docker build -t tgrl/jitsi-web:stable-8218 .

I replaced the jitsi/web image

nano ~/docker-jitsi-meet/docker-compose.yml

services->web->image: tgrl/jitsi-web:stable-8218

docker-compose -f docker-compose.yml -f whiteboard.yml up -d

suraj · January 27, 2023, 3:55pm

Thanks, @tugrul for the beautiful explanation. I understand what you said but I have one issue I am using jitsi-meet from nginx, not its docker image (which means the web part of docker-jitsi-meet is commented in docker-compse.yml file), and other components like prosody,jicofo,jvb1and jvb2 I am using from docker jitsi meet.

So where should I replace these lines:

edit ~/docker-jitsi-meet/web/rootfs/defaults/meet.conf
add line 8-9
{{ $WHITEBOARD_ENABLED := .Env.WHITEBOARD_ENABLED | default “1” | toBool }}
{{ $WHITEBOARD_DOMAIN := .Env.WHITEBOARD_DOMAIN | default “http://whiteboard.meet.jitsi” -}}

should I replace these lines in nginx/sites-enabled/dev.surajTest.com.

and for below lines I have no idea how to implement it as I commented web part so it will not pick from docker files for web part is there any file where I replace this.

I built my own jitsi/web docker image.
cd ~/docker-jitsi-meet/web
nano Dockerfile
ARG BASE_TAG=stable-8218

so can you guide me on where I made changes as I am using Jitsi-meet. not the docker only for the web part.

TechRuum · January 28, 2023, 3:50pm

Thanks @tugrul

This is really helpful

But please can you do a video of the Whiteboard full setup and send link here. That will be much appreciated and easy to follow than a long note. This is to avoid lots of questions.

Thanks again

tugrul · January 29, 2023, 12:11pm

sorry i can’t help.