EtherDraw integration not working

I have integrated etherdraw (https://github.com/JohnMcLear/draw) into jitsi meeting using this link , on selecting the open shared documents the etherdraw webpage is loaded and we see this error “Loading existing sketch click and hold to access the colour wheel” with blank screen with all the buttons on the top.

to check the etherdraw installation i opened up the port 9002 on my jitsi server and checked on the webbrowser myjitsi.ipaddress:9002 and it works perfectly.

I see the issue only when it is called from Jitsi meet. Please can you help me in resolving this issue.

thanks

1 Like

Did you also try to setup Etherdraw as a plugin for etherpad? Thats how someone on github did it for their docker-jitsi-meet fork, see this commit: https://github.com/netaskd/docker-jitsi-meet/commit/624f573c0f86a64e6e39e6da5f6419b819bbcc40

I have this partially working. With Etherpad + ep_draw integration.

At some point I’ll try just using draw since a shared whiteboard is really all I’m hoping for.

It might help if you enable SSL in Etherdraw using the same cert and FQDN as the jitsi instance.

If you get it working, please let us know :slight_smile:

I have the same issue. Stuck on “Loading existing sketch click and hold to access the colour wheel”. But for me it’s the same behavior if I start etherdraw from Jitsi or if I access it directly.

Did anybody managed to solve it ?

Two things that can be checked here :

  • Settings.json of etherdraw instance, Use mysql instead of dirtydb
  • Install etherdraw on a reasonable sized machine with sufficient RAM.

Hi everyone,

I’ve been battling the same issue today.

Just remove

<div id="loading" class="hidden" style="display:block;">
    <p>Loading existing sketch...  Click and hold to access the colour wheel</p>
</div>

From /draw/src/static/html/draw.html

It should work! Once you open it in Jitsi, background is black - make it white by clicking on the top background icon of etherdraw.

Tip regarding SSL as default settings.json did not want to work.
Simply move the “ssl” block before the “tool” string and place a comma after the }.

“ssl” : {
“key”: “/etc/letsencrypt/live/----------/privkey.pem”,
“cert”: “/etc/letsencrypt/live/------------/fullchain.pem”
},
“tool”: “pencil”
}

When i used reverse proxy in nginx & point the etherpad base to domain/draw/d/ whiteboard changes were not reflecting for all connected participants.

I got it running with the following config, without using reverse proxy:

etherpad_base: ‘https://domain:9002/d/

Also, to avoid having black background once you open the document:

Edit: /draw/src/static/css/style.css
Find: #myCanvas{
Add: background:#fff;

To change the text “Open shared document” - set your default language in -config.js to “enGB” & edit /usr/share/jitsi-meet/lang/main-enGB.json. Naturally, change it for any language as required.

you have to config the websocket on the nginx for this to work

Hello, All
Can i run etherdraw with etherpad and also can i run etherdraw as a system file?
Regards

@facsiaginsa Can you please suggest how to configure the websocket on nginx to solve this issue

sure,

lets assume you want to config the etherdraw url like this: https://your.domain.com/etherdraw/
and your etherdraw run on port 9002

the websocket configuration is like this:

        location ^~ /etherdrawsocket.io {
                proxy_pass http://localhost:9002/socket.io;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $http_host;
                proxy_read_timeout 120s;
                tcp_nodelay on;
        }

I have changed as you said in my nginx config file but the errors are still coming like thisCapture

in your case @sumanth582, you have to change it to:

       location ^~ /drawsocket.io

same as the error suggest

my config is like this only and still it is showing the same error

location ^~ /drawsocket.io {
proxy_pass http://localhost:9002/socket.io;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_set_header Host $http_host;
proxy_read_timeout 120s;
tcp_nodelay on;
}

First, make sure your etherdraw installation is success by opening your etherdraw directly without nginx.

Second, What i’m showing you is just the websocket part. It is not the only config. The configuration should be like this:

    location ^~ /etherdraw/ {
        proxy_pass http://localhost:9002/;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_buffering off;
        proxy_set_header Host $host;
    }

    location ^~ /etherdrawsocket.io {
            proxy_pass http://localhost:9002/socket.io;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $http_host;
            proxy_read_timeout 120s;
            tcp_nodelay on;
    }

Third, Do you already configure the eterpad_base: on your config.js file to match the url of the etherdraw?

I have etherdraw integration working but now I just get the gray background of Jitsi, is there a way to keep the main video up when I click the “open shared document” so I can make annotations to the video? Also is there a way to open it right away instead of having to click it?

How did you add etherdraw with etherpad ? @c10r0x

I don’t use etherpad, I just use draw. Which is what I only need.

Sorry.