Docker-jitsi-meet: How to change the logo with jitsi/web

[cs35-owncloud]

Hello everyone,

I'm running a docker-jitsi-meet instance and I'd like to change the jitsi logo of the jitsi/web docker.
I know it's in /usr/share/jitsi-meet/ but sadly the Dockerfile doesn't expose it to the host.
Is there any reason not to set as a volume /usr/share/jitsi-meet/ so one could change the logo or other things ?
I tried to change the docker composer of jitsi/web to export /usr/share/jitsi-meet/ but it simply crashes the container.
I know one could simply build its own jitsi/web with the ressources but I'd prefer the volume export version for simplicity.
If anyone has an idea :)
Thanks.

[mesouug]

Maybe a little bit hacky and not cool but I solved it by mounting watermark.png as volume in docker-compose.yml
```version: '3'

services:
# Frontend
web:
image: jitsi/web
restart: ${RESTART_POLICY}
ports:
- '${HTTP_PORT}:80'
- '${HTTPS_PORT}:443'
volumes:
- ${CONFIG}/web:/config:Z
- ${CONFIG}/web/letsencrypt:/etc/letsencrypt:Z
- ${CONFIG}/transcripts:/usr/share/jitsi-meet/transcripts:Z
- ./watermark.png:/usr/share/jitsi-meet/images/watermark.png
```

[cs35-owncloud]

Hello @mesouug

thanks ! It's indeed not the nicest solution, but it works well !
I tried to share the whole /usr/share/jitsi-meet/ but it didn't work so I didn't think about just sharing one item, nice trick.
Did you change some other items like that in your docker-compose.yml ?
Thanks again :)

[mesouug]

Did you change some other items like that in your docker-compose.yml ?

Nope.

[cs35-owncloud]

Alrighty then, thanks for your help :)
I'll keep this issue opened if there is any other solutions.

[prayagsingh]

Other option is to edit the all.css file and then execute docker image build -t image_name . inside web directory.
STEPS:

1. Copy all.css file present in usr/share/jitsi-meet/css/ directory from web container to your local machine using docker cp docker-jitsi-meet_web_1:/usr/share/jitsi-meet/css/all.css ./web command.
2. Change background-image:url(../image/watermark.png) to background-image:url("https://your_logo.png") in all.css file.
3. Build docker image by modifying Dockerfile inside web directory.

ARG JITSI_REPO=jitsi
FROM ${JITSI_REPO}/base

ADD https://dl.eff.org/certbot-auto /usr/local/bin/

RUN \
    apt-dpkg-wrap apt-get update --fix-missing && \
    apt-dpkg-wrap apt-get install -y cron nginx-extras jitsi-meet-web && \
    apt-dpkg-wrap apt-get -d install -y jitsi-meet-web-config && \
        dpkg -x /var/cache/apt/archives/jitsi-meet-web-config*.deb /tmp/pkg && \
        mv /tmp/pkg/usr/share/jitsi-meet-web-config/config.js /defaults && \
    mv /usr/share/jitsi-meet/interface_config.js /defaults && \
    apt-cleanup && \
    rm -f /etc/nginx/conf.d/default.conf && \
    rm -rf /tmp/pkg /var/cache/apt

RUN \
    chmod a+x /usr/local/bin/certbot-auto && \
    certbot-auto --noninteractive --install-only

COPY rootfs/ /

# copying css file from local
COPY css/all.css /usr/share/jitsi-meet/css/all.css

EXPOSE 80 443

VOLUME ["/config", "/etc/letsencrypt", "/usr/share/jitsi-meet/transcripts"]

1. Execute docker image build -t web:v1 .
2. change the image name to web:v1 in docker-compose.yaml file
   I followed this approach because I did some modification in interface_config.js and config.js files too.

EDIT

1. fixed css.all to all.css. Thanks to @spprod35 for pointing out.
2. moved COPY rootfs/ / command after RUN command to avoid custom config.js and interface_config.js files override.

[cs35-owncloud]

Hello @prayagsingh

thanks for your answer ! It's nice to have several options :)
In my case it's a bit complicated to use this one since I might have to create many Jitsi with different watermarks. It would mean I have to build a web image for each watermark which is not very practical.
Nevertheless your approach gives the ability to modify everything needed.
I wish the "official" web image expose / usr/share/jitsi-meet some day to ease the customisation with docker.
It's nice to have constructive answers :)
Thanks again.

[spprod35]

1. docker cp docker-jitsi-meet_web_1:/usr/share/jitsi-meet/css/css.all

Hi, thank for this method.
I comment just for EDIT, After 3 hours of work to find out why "docker cp" does not work 👍
Edit : docker cp docker-jitsi-meet_web_1:/usr/share/jitsi-meet/css/css.all
To : docker cp docker-jitsi-meet_web_1:/usr/share/jitsi-meet/css/all.css

But thank you for your method it is magic

[BlackLanzer]

Maybe a little bit hacky and not cool but I solved it by mounting watermark.png as volume in docker-compose.yml

services:
    # Frontend
    web:
        image: jitsi/web
        restart: ${RESTART_POLICY}
        ports:
            - '${HTTP_PORT}:80'
            - '${HTTPS_PORT}:443'
        volumes:
            - ${CONFIG}/web:/config:Z
            - ${CONFIG}/web/letsencrypt:/etc/letsencrypt:Z
            - ${CONFIG}/transcripts:/usr/share/jitsi-meet/transcripts:Z
            - ./watermark.png:/usr/share/jitsi-meet/images/watermark.png

I tried to use this, but then /usr/share/jits-meet/images lose all the images. Only watermark.png stay in the folder.

Does anyone know why this happen?

[cs35-owncloud]

Hello,

well I'm not sure but it could be because you don't use the ${CONFIG} there. Where's your watermark located on the host ?In my case I put it in my ${CONFIG} directory.

        volumes:
            - ${CONFIG}/web:/config:Z
            - ${CONFIG}/web/letsencrypt:/etc/letsencrypt:Z
            - ${CONFIG}/transcripts:/usr/share/jitsi-meet/transcripts:Z
            - ${CONFIG}/watermark.png:/usr/share/jitsi-meet/images/watermark.png

And it works fine, I have my watermark.png and the other pictures stay there.
Cheers.

[tronics]

Changing the image in the yaml always brings me a manifest unknown. Why is that?

version: '3'

services:
# Frontend
web:
image: jitsi/web:v1
restart: ${RESTART_POLICY}

[prayagsingh]

Where's your all.css file? Is it in css directory?

[tuanaturkmen]

Thank you @prayagsingh , that was the reason. Now it executes. After this in docker-compose.yaml, I did what you said like this:

web:
        image: jitsi/web:v1

Then I did sudo docker-compose down and sudo docker-compose up -d and received this:

Pulling web (jitsi/web:v1)...
ERROR: manifest for jitsi/web:v1 not found: manifest unknown: manifest unknown

[saghul]

Answers have been provided, so I'm closing this.

FWIW, I don't recommend editing all.css, mounting the watermark file is a lot more future proof.

[tuanaturkmen]

Answers have been provided, so I'm closing this.

FWIW, I don't recommend editing all.css, mounting the watermark file is a lot more future proof.

@saghul Do you know why I am havıng the ıssue above?

[saghul]

I don't know, sorry.

[tuanaturkmen]

Changing the image in the yaml always brings me a manifest unknown. Why is that?

version: '3'

services:

Frontend

web:
image: jitsi/web:v1
restart: ${RESTART_POLICY}

Hey @tronics we are having the exact same situation. Have you found the answer?

[tronics]

@tuanaturkmen no I could not solve this.
I have tried flags to be sure that everything is properly regenerated. I even started again from scratch.

Same problem here: https://community.jitsi.org/t/building-a-new-image-of-web-directory-to-remove-logo-it-gives-unkown-manifest-error-when-image-name-of-web-is-changed-in-docker-compose-yml/87757

I really want to understand why it does not work. What was it that @prayagsingh did differently?
I have checked the path a couple of times.

[tuanaturkmen]

@tuanaturkmen no I could not solve this.
I have tried flags to be sure that everything is properly regenerated. I even started again from scratch.

Same problem here: https://community.jitsi.org/t/building-a-new-image-of-web-directory-to-remove-logo-it-gives-unkown-manifest-error-when-image-name-of-web-is-changed-in-docker-compose-yml/87757

I really want to understand why it does not work. What was it that @prayagsingh did differently?
I have checked the path a couple of times.

Above @mesouug talks about replacing the image via volumes, do you or @mesouug know how to remove the logo via volumes instead of replacing it?

[tronics]

Above @mesouug talks about replacing the image via volumes, do you or @mesouug know how to remove the logo via volumes instead of replacing it?

You could just use a transparent png or gif I suppose.

Also you can replace the css and add a display:none in the css.

I have to look into this again. I hoped to solve it the other way.

[mesouug]

Above @mesouug talks about replacing the image via volumes, do you or @mesouug know how to remove the logo via volumes instead of replacing it?

@tuanaturkmen If you delete file inside container then it will cause 404 error in browser. @tronics suggest right solution. Transparent 1px image will do the trick. Or delete link to image in CSS but this is more complicated to maintain.