Shared drawing canvas / whiteboard

[jondo]

For teaching mathematics, a shared whiteboard would be useful (as e.g. Zoom has got). For now, I will test WBO (https://wbo.ophir.dev) as workaround.

[rasos]

Integrating a WBO whiteboard could be done similar how etherpad is integrated. This would result in a larger PR with about 20 files involved, at every etherpad occurence add a whiteboard section.

[rainbyte]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

[poVoq]

https://github.com/spacedeck/spacedeck-open

Might be another option.

[lovasoa]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

[Echolon]

As long as there is no implementation please use the screen-sharing feature in combination with e.g. Drawpile - https://drawpile.net/

[ryanmartinneutrino]

Shouldn't it be possible to get it to work with etherpad and ep_draw plugin? Then opening the shared document (etherpad) would have drawing possibilities? I can't get ep_draw to work though...

[rainbyte]

As long as there is no implementation please use the screen-sharing feature in combination with e.g. Drawpile - https://drawpile.net/

This is also about usability, because for many people it is difficult to use Jitsi with 3rd party apps instead of having an integrated whiteboard and presentation.

[saghul]

Something that can be integrated with Etherpad as a plugin would be ideal here. Our Etherpad integration is not ideal, so adding another service is nontrivial. Having it as an Etherpad plugin would solve that.

I looked at ep_draw at one point, but it seemed dead. I see that it got some activity recently, but the server side, Etherdraw, seems to be dead: https://github.com/JohnMcLear/draw/issues/271

I think creating an Etherpad plugin for Drawpile (or whatever other similar tool which is easy to self-host) is the way forward here.

[madappally]

WBO seems to be a good option. Has anyone tried to integrate WBO with jitsi?

[arunvc]

Self hosted wbo with meeting-id can make unique meeting boards

Example https://wbo.ophir.dev/boards/meeting-id

Possible solution

May be in screen share a new option to choose White board. And on click of White board launches local wbo with meeting-id that appears in the main content or in a new window,

To collaborate others would have the option to Join White board which can launch wbo with the same meeting-id

[pandian-egnaroinc]

For teaching mathematics, a shared whiteboard would be useful (as e.g. Zoom has got). For now, I will test https://wbo.ophir.dev (moved from https://wbo.openode.io) as workaround.

I just integrated WBO with selfhosted jitsi server and it works great!

Just configure the etherpad_base to use WBO url in the config.js and thats it. (etherpad_base: 'https://wbo.ophir.dev/boards/' to config.js) Jitsi will use the above as base url and attach a meeting specific UID to the base and creates a new whiteboard specific to the meeting.

After this, the WBO will appear as the collaborative document when you click 'open shared document' during the meet.

Of course it is for trying out. If you want all your data to be local, you should be hosting a WBO server (https://github.com/lovasoa/whitebophir) and adjust etherpad_base url with your server's url.

Hope it helps.

[pandian-egnaroinc]

WBO seems to be a good option. Has anyone tried to integrate WBO with jitsi?

I did and it is working great. Please refer previous post.

[pandian-egnaroinc]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

Share your screen => Chrome tab does not work for you? The chrome tab can contain any content and it will be shared. It is not totally integrated but it works.

[pandian-egnaroinc]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

I get a black background in WBO when integrated with jitsi (all functionalities are fine and same otherwise).

Any idea how to make it white like in https://wbo.ophir.dev/? (I am unsure if it is a WBO or Jitsi specific issue as of now)

[rainbyte]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

Share your screen => Chrome tab does not work for you? The chrome tab can contain any content and it will be shared. It is not totally integrated but it works.

Professor said it is complicated that way because extra things are needed and students cannot be seen while sharing the screen. Zoom lets you share a ppt/pdf, use whiteboard and watch other people, all at the same time pressing just one button. I tried to provide Jitsi as alternative, but they want all these features.

[pandian-egnaroinc]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

Is there a way to clear the whole canvas? Currently it is time consuming to remove all contents. A button to clear all contents can go a long way in not limited to jitsi integration. This would improve usability of highly collaborative environment (5+ users). Currently only way is to create new whiteboard and move all the 5 users around, not ideal and time consuming.

Also let me know a better place to request improvements etc for WBO, this place is not ideal.

Thanks,

[lovasoa]

Yes, WBO is its own project, with its own issue tracker where you can open feature requests. Being able to clear the whole whiteboard has been requested before, but I am reluctant to implement it. WBO is sometimes used in massively multi-user settings, in which one wouldn't want a single misbehaving user to be able to delete a whole board. Just as you don't have a big "delete article" button on wikipedia.

[umagon]

Yes, WBO is its own project, with its own issue tracker where you can open feature requests. Being able to clear the whole whiteboard has been requested before, but I am reluctant to implement it. WBO is sometimes used in massively multi-user settings, in which one wouldn't want a single misbehaving user to be able to delete a whole board. Just as you don't have a big "delete article" button on wikipedia.

@lovasoa isn't old plain eraser kind of a problem too in that sense?

I like the suggestion in this issue lovasoa/whiteobophir#84.

[siddharthsrivastava]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

I get a black background in WBO when integrated with jitsi (all functionalities are fine and same otherwise).

Any idea how to make it white like in https://wbo.ophir.dev/? (I am unsure if it is a WBO or Jitsi specific issue as of now)

I am also facing this issue. It is black on chrome desktop browser, but while using it from jitsi meet android app, it is white.

[awlx]

We have integrated https://github.com/lovasoa/whitebophir to https://meet.ffmuc.net with the ep_draw plugin in etherpad and it's working like a charm even on the mobile apps. Thank you very much @lovasoa for this awesome tool.

[lovasoa]

@awlx : Good work 👍 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

[pandian-egnaroinc]

@awlx : Good work 👍 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

Etherpad is really not that useful with chat directly integrated with jitsi. Direct integration as I mentioned above works great.

Please check below image.

As I also mentioned, Not sure why the background is black. Filed a bug regarding configurable canvas color.

[awlx]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

[pandian-egnaroinc]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

@awlx Are you populating the wiki page shared by lovasoa? I think a middle ground need to be reached. The ep_draw with only middle section for other functions and full screen for WBO seem not so professional. Will try once the wiki is ready.

[rainbyte]

@awlx : Good work +1 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

Etherpad is really not that useful with chat directly integrated with jitsi. Direct integration as I mentioned above works great.

Please check below image.

As I also mentioned, Not sure why the background is black. Filed a bug regarding configurable canvas color.

Wow, it looks really good, and with pdf it would be perfect.

[saghul]

@awlx That sounds very promising! Did you fork ep_draw to integrate with WBO? I'd be very interested in experimenting with this as part of our Docker setup for example.

[awlx]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw.

For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO.

So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

[awlx]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

@awlx Are you populating the wiki page shared by lovasoa? I think a middle ground need to be reached. The ep_draw with only middle section for other functions and full screen for WBO seem not so professional. Will try once the wiki is ready.

I added the steps I have done so far :). https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration

[bkiisee]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw.

For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO.

So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

hi @awlx @lovasoa i am deploy WBO on same server with etherpad and jitsi, with nginx conf

    # Etherpad-lite
    location ^~ /etherpad/ {
        proxy_pass http://localhost:9001/;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_buffering off;
        proxy_set_header       Host $host;
    }

    #whiteboard Drawing
   location ^~ /draw/ {

        rewrite /draw/d/(.*) /boards/$1 break;  
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://localhost:8042/;
    }

but the problem is socket.io cant forward properly xhr because wrong path. could you give me idea how fix the ngnix conf, because i am new on nginx. thnks

[lovasoa]

Hi @bkiisee ! The answer to this question is on our wiki: https://github.com/lovasoa/whitebophir/wiki/Setup-behind-Reverse-Proxies#nginx

[TheReal1604]

@bkiisee I updated the wiki article with the needed reverse proxy rules. Check it out! https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration

[bkiisee]

hi @lovasoa , @TheReal1604 Thank for your fast respond. now my jitsi can run whiteboard on etherpad with smoot. 👍 .. This is my nginx conf, maybe someone need this config too..

`

    # Etherpad-lite
    location ^~ /etherpad/ {
        proxy_pass http://localhost:9001/;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_buffering off;
        proxy_set_header       Host $host;
    }
    #whiteboard Drawing
    # To allow POST on static pages
        error_page  405     =200 $uri;

    location ^~ /draw/ {
        rewrite /draw/d/(.*)/socket.io /socket.io/$1 break;
        rewrite ^/draw/d/(.*) /boards/$1 break;

        proxy_pass http://localhost:8042/;
           proxy_redirect off;
           proxy_pass_request_headers on;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header Host $http_host;
           proxy_set_header X-NginX-Proxy true;
           proxy_set_header X-Forwarded-Host $host;
           proxy_set_header X-Forwarded-Server $host;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_set_header Host $host;        
    }

[saghul]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw.

For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO.

So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

This is excellent, thanks for sharing! Exactly how I envisioned it in https://github.com/jitsi/jitsi-meet/issues/5295#issuecomment-633849148 :-)

[JIBSIL]

Forked ep_draw, changed /d/ to /boards/.

https://github.com/JIBSIL/ep_draw npm install ep_whiteboard

[tna76874]

hi, https://meetzi.de/ did integrate https://github.com/cracker0dks/whiteboard into jitsi. Is there any possibility to have this whiteboard without etherpad - just the plain whiteboard?

[awlx]

Just setup a nginx redirect rule ... should be easy.

[tna76874]

Just setup a nginx redirect rule ... should be easy.

I'm not sure how to embed this into the jitsi front-end. Would be nice if someone provide an example of the config. Thanks :)

[arunvc]

As I also mentioned, Not sure why the background is black. Filed a bug regarding configurable canvas color.

The background is transparent in WBO so add a background color in wbo board.css

html, body, svg { .... background: #ececec; }

[andrewerix]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw. For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO. So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

This is excellent, thanks for sharing! Exactly how I envisioned it in #5295 (comment) :-)

Does this work if we change the URL to any other website? I have a WordPress form, can I integrate the form with Jitsi Meet using this method? Will each user be able to fill up the form independently? I want the participants to be able to interact with a page independently while they can see the teacher. Is there a way to do this?

[tusharsonawanes]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

@lovasoa Can you help with integrating etherdraw with etherpad in docker-jitsi-meet instance ?

[kanchandebnath]

WBO seems to be a good option. Has anyone tried to integrate WBO with jitsi?

I did and it is working great. Please refer previous post.

Hi, Is it possible to have a transparent Whiteboard over Shared screen, so that when we give some presentation, the remote attendee can mark or underline the points on which he has some queries .. may be by underlying the doubt points etc

[TimDowker]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

@lovasoa Can you help with integrating etherdraw with etherpad in docker-jitsi-meet instance ?

I am also struggling with this. Any guidance would be greatly appreciated.

[ryanmartinneutrino]

My setup is described below using the docker implementation of Jitsi-meet, with a standalone etherpad container, not the one provided in the Jitsi-meet docker-compose.

• Jitsi-Meet docker-compose stack listening on localhost:8000. I set the ETHERPAD_BASE_URL to etherpad.example.com in the .env file. Also, I had to modify the file .jitsi-meet-cfg/web/config.js (after the containers were built) as the etherpad_base_url was not set from the environment variable (that's discussed on the jist-meet docker side of the repository)

• Reverse nginx proxy to map meet.example.com to localhost:8000 (although I used the actual IP address instead of localhost)

• Same proxy to map etherpad.example.com to etherpad:9001 (where etherpad is a container defined in the same docker-compose as the proxy). I followed whatever the etherpad people posted on how to configure the reverse_proxy (headers to pass, etc)

• Same proxy to map wbo.example.com to wbo:80 (where wbo is a container defined in the same docker-compose as the proxy). Again, followed wbo's instruction for nginx.

• Note that the reverse_proxy also does 80->443 rewrite to enforce SSL on all urls.

The docker-compose file (not the one from Jitsi-Meet, which is also required) is as follows (only important parts shown):

services:

  proxy: (the one described above, not the one inside Jitis-Meet)
    restart: always
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes (to mount nginx.conf, ssl certs)

  etherpad:
    restart: always
    build: ./etherpad (build my own version so that I can load npm modules)
    restart: always
    ports:
      - 9001:9001
    environment:
    (set all the passwords you need, see etherpad documentation on their container)

  etherpad_db:
    image: mariadb
    restart: always
    more stuff to configure the db

  wbo:
    image: lovasoa/wbo:1.6.1
    restart: always
    volumes:
      - ./wbo/wbo-boards:/opt/app/server-data <- you might choose a different local directory to store stuff

The build directory for etherpad simply contains the following Dockerfile:

FROM etherpad/etherpad:latest
USER root
RUN apt-get update && apt-get install -y abiword
USER etherpad
RUN npm install ep_mathjax ep_spellcheck ep_whiteboard ep_font_family ep_font_size

On etherpad, I modified the settings file as described in https://www.npmjs.com/package/ep_whiteboard. The Dockerfile above should include that change to the settings or they may not be permanent (depending on how you configure etherpad).

I used ep_whiteboard so that I would not have to modify the reverse_proxy as described in the 17 July post above by bkiisee.

[TimDowker]

My setup is described below using the docker implementation of Jitsi-meet, with a standalone etherpad container, not the one provided in the Jitsi-meet docker-compose.

• Jitsi-Meet docker-compose stack listening on localhost:8000. I set the ETHERPAD_BASE_URL to etherpad.example.com in the .env file. Also, I had to modify the file .jitsi-meet-cfg/web/config.js (after the containers were built) as the etherpad_base_url was not set from the environment variable (that's discussed on the jist-meet docker side of the repository)
• Reverse nginx proxy to map meet.example.com to localhost:8000 (although I used the actual IP address instead of localhost)
• Same proxy to map etherpad.example.com to etherpad:9001 (where etherpad is a container defined in the same docker-compose as the proxy). I followed whatever the etherpad people posted on how to configure the reverse_proxy (headers to pass, etc)
• Same proxy to map wbo.example.com to wbo:80 (where wbo is a container defined in the same docker-compose as the proxy). Again, followed wbo's instruction for nginx.
• Note that the reverse_proxy also does 80->443 rewrite to enforce SSL on all urls.

The docker-compose file (not the one from Jitsi-Meet, which is also required) is as follows (only important parts shown):

services:

  proxy: (the one described above, not the one inside Jitis-Meet)
    restart: always
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes (to mount nginx.conf, ssl certs)

  etherpad:
    restart: always
    build: ./etherpad (build my own version so that I can load npm modules)
    restart: always
    ports:
      - 9001:9001
    environment:
    (set all the passwords you need, see etherpad documentation on their container)

  etherpad_db:
    image: mariadb
    restart: always
    more stuff to configure the db

  wbo:
    image: lovasoa/wbo:1.6.1
    restart: always
    volumes:
      - ./wbo/wbo-boards:/opt/app/server-data <- you might choose a different local directory to store stuff

The build directory for etherpad simply contains the following Dockerfile:

FROM etherpad/etherpad:latest
USER root
RUN apt-get update && apt-get install -y abiword
USER etherpad
RUN npm install ep_mathjax ep_spellcheck ep_whiteboard ep_font_family ep_font_size

On etherpad, I modified the settings file as described in https://www.npmjs.com/package/ep_whiteboard. The Dockerfile above should include that change to the settings or they may not be permanent (depending on how you configure etherpad).

I used ep_whiteboard so that I would not have to modify the reverse_proxy as described in the 17 July post above by bkiisee.

How did you handle the docker networking? Currently all the jitsi components (jibri, prosody, etc.) are only able to talk to each other over the docker-jitsi-meet_meet.jitsi network which is created in the docker-compose file.

[ryanmartinneutrino]

I did it so that the Jitsi stack is configured to run as a standalone instance (as described in their documentation for docker). The only interaction with the docker-compose file above is through the proxy that is simply passing meet.example.com to the proxy of the Jitsi installation (and there I use the external IP address of the server rather than internal network, since I have the standalone Jitsi listening on 8000 of the external server). The only way that the Jitsi stack has to interact with etherpad and wbo is through ETHERPAD_BASE_URL (which can point to any etherpad instance). There's also that bug that just setting ETHERPAD_BASE_URL does not update web/config.js.

In my setup, there is no authentication in etherpad or wbo, so I don't need other parts of the Jitsi stack to interact with anything outside their own network.

[LucaCalabrese]

Hi @lovasoa and everyone, thanks to this thread I've been able to integrate WBO with Etherpad in Jitsi, but I still have some questions: Where can I find the export function to save the whiteboard? How can I export everything in etherpad (document + whiteboard) in order to save a document with graphic annotations? It seems ep_draw plugin runs WBO as a separate application that lives in a different layer w.r.t. etherpad.

[lovasoa]

1. There is no officially supported export function yet. But you can get the full board as an SVG file by replacing boards with preview in its URL (for instance: https://wbo.ophir.dev/preview/test).
2. Yes, the two are completely separate and do not talk to each other. You cannot export everything in etherpad.

[piiskop]

For now, I will test WBO (https://wbo.ophir.dev) as workaround.

How do you overcome the initial "Loading..." problem?

[piiskop]

https://github.com/spacedeck/spacedeck-open

Might be another option.

It needs Beta Invite Code.

[piiskop]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

You can make it faster. I don't want to wait until that "Loading..." disappears. It should load promptly.