Jitsi Docker Whiteboard integration

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!

There should be comma between items

Hi Emrah!

Thanks for reply. No luck :frowning:

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

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

Thanks AndyS, I will try and let you know.

@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.

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.

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

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

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

  1. 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.)

  2. 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

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

on server using yarn start.

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

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.

Hi @AndyS ,

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

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

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

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:

  1. build excalidraw-backend docker image.

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

  1. 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

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

- WHITEBOARD_COLLAB_SERVER_PUBLIC_URL

  1. 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}

  1. 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 }}

  1. 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 .

  1. I replaced the jitsi/web image

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

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

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

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.