Background & logo are not comming in recording

I have enabled the multi-tenancy but in the recording, I’m not getting the background and logo.
I need to give same experience in recording. Anything we can do related to this? @damencho

1 Like

Even I’m facing similar issue
I’m able to change the background and logo but when I do streaming or recording then I can’t see the background image and logo in recorded or streamed video.

Please help
@damencho
@emrah

How did you change the logo?
Did you check the Nginx log for errors (something like 404 not found etc)

I’m using multi-tenancy feature which allows me to change the logo and background image.
this is my url https://example.com/organization1/myroom.
jwt

{
  "context": {
    "user": {
      "avatar": null,
      "name": "adam",
      "email": "adam@gmail.com"
    },
    "group": "organization1"
  },
  "aud": "myserver1",
  "iss": "my_web_client",
  "sub": "example.com",
  "room": "[organization1]myroom"
}

No error found in nginx logs. everything works fine. I can see the background image and Logo during the meeting but when I record the session it’s background is just black and logo isn’t found.

I have tested with a similar JWT and it works. Did you customize anything in your Nginx config?

Below are meet.conf and nginx.conf that I’m using
meet.conf

{{ $ENABLE_XMPP_WEBSOCKET := .Env.ENABLE_XMPP_WEBSOCKET | default "1" | toBool }}
{{ $ENABLE_JVB_WEBSOCKET := .Env.ENABLE_JVB_WEBSOCKET | default "1" | toBool }}
{{ $ENABLE_SUBDOMAINS := .Env.ENABLE_SUBDOMAINS | default "true" | toBool -}}

server_name _;

client_max_body_size 0;

root /usr/share/jitsi-meet;

# ssi on with javascript for multidomain variables in config.js
ssi on;
ssi_types application/x-javascript application/javascript;

index index.html index.htm;
error_page 404 /static/404.html;

# Security headers
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";

location = /config.js {
    alias /config/config.js;
}

location = /interface_config.js {
    alias /config/interface_config.js;
}

location = /external_api.js {
    alias /usr/share/jitsi-meet/libs/external_api.min.js;
}

# ensure all static content can always be found first
location ~ ^/(libs|css|static|images|fonts|lang|sounds|connection_optimization|.well-known)/(.*)$
{
    add_header 'Access-Control-Allow-Origin' '*';
    alias /usr/share/jitsi-meet/$1/$2;
}

{{ if $ENABLE_JVB_WEBSOCKET }}
# colibri (JVB) websockets
location ~ ^/colibri-ws/([a-zA-Z0-9-\.]+)/(.*) {
    proxy_pass http://$1:9090/colibri-ws/$1/$2$is_args$args;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    tcp_nodelay on;
}
{{ end }}

# BOSH
location = /http-bind {
    proxy_pass {{ .Env.XMPP_BOSH_URL_BASE }}/http-bind;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host {{ .Env.XMPP_DOMAIN }};
}

{{ if $ENABLE_XMPP_WEBSOCKET }}
# xmpp websockets
location = /xmpp-websocket {
    proxy_pass {{ .Env.XMPP_BOSH_URL_BASE }}/xmpp-websocket;
    proxy_http_version 1.1;

    proxy_set_header Connection "upgrade";
    proxy_set_header Upgrade $http_upgrade;

    proxy_set_header Host {{ .Env.XMPP_DOMAIN }};
    proxy_set_header X-Forwarded-For $remote_addr;
    tcp_nodelay on;
}
{{ end }}

location ~ ^/([^/?&:'"]+)$ {
    try_files $uri @root_path;
}

location @root_path {
    rewrite ^/(.*)$ / break;
}

location ~ ^/([^/?&:'"]+)/config.js$
{
    set $subdomain "$1.";
    set $subdir "$1/";

    alias /config/config.js;
}

#Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
location ~ ^/([^/?&:'"]+)/(.*)$ {
    set $subdomain "$1.";
    set $subdir "$1/";
    rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
}

{{ if $ENABLE_SUBDOMAINS }}
{{ if $ENABLE_XMPP_WEBSOCKET }}
# websockets for subdomains
location ~ ^/([^/?&:'"]+)/xmpp-websocket {
    set $subdomain "$1.";
    set $subdir "$1/";
    set $prefix "$1";

   rewrite ^/(.*)$ /xmpp-websocket;
}
{{ end }}

# BOSH for subdomains
location ~ ^/([^/?&:'"]+)/http-bind {
    set $subdomain "$1.";
    set $subdir "$1/";
    set $prefix "$1";

    rewrite ^/(.*)$ /http-bind;
}
{{ end }}

{{ if .Env.ETHERPAD_URL_BASE }}
# Etherpad-lite
location /etherpad/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    proxy_pass {{ .Env.ETHERPAD_URL_BASE }}/;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_buffering off;
    proxy_set_header Host {{ .Env.XMPP_DOMAIN }};
}
{{ end }}

nginx.conf

user www-data;
worker_processes 4;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	client_max_body_size 0;

	resolver {{ .Env.NGINX_RESOLVER | default "127.0.0.11" }};

 	include /etc/nginx/mime.types;
	types {
		# add support for wasm MIME type, that is required by specification and it is not part of default mime.types file
		application/wasm wasm;
	}
	default_type application/octet-stream;

	##
	# Logging Settings
	##

	access_log /dev/stdout;
	error_log /dev/stderr;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_types text/plain text/css application/javascript application/json;
	gzip_vary on;
	gzip_min_length 860;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##
        include /config/nginx/site-confs/*;
}


daemon off;

I didn’t understand this part. How does this work? I didn’t see anything in the Nginx config which can manage this changes

Subdomain part is taking care of it at nginx level.

#Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
location ~ ^/([^/?&:'"]+)/(.*)$ {
    set $subdomain "$1.";
    set $subdir "$1/";
    rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
}

In config.js

var subdomain = "<!--# echo var="subdomain" default="" -->";
if (subdomain) {
    subdomain = subdomain.substr(0,subdomain.length-1).split('.').join('_').toLowerCase() + '.';
}
config.hosts.muc = 'muc.'+subdomain+'meet.example.com';

I have created a UI on a top of jitsi-setup. I’m changing those background-image and logo from there.

This is not for static files

@emrah
When I’m creating an iframe so in the option parameter I’m sending like this

var options = {
              roomName: roomName,
              width: '100%',
              userInfo: {
                  email: email
              },
              parentNode: document.getElementById('jitsi-container'),
              interfaceConfigOverwrite: {
                  SHOW_JITSI_WATERMARK: false,
                  filmStripOnly: false,
              },
              configOverwrite: {
                  disableSimulcast: false,
                  brandingDataUrl: "https://api_url_for_branding"
              },
              jwt: jwt
          };

I’m passing brandingDataUrl which respond back with json object

{
background_color: '#fff',
background_image_url: 'https://image_url',
logo_click_url: 'https://logo_click_url',
logo_image_url: 'https://logo_image_url'
}

In this way, I’m setting the background image and logo which are not showing in recorded video and during streaming.

IIUC you use an iframed UI for your clients but jibri connects directly to the JMS, so the iframe UI has no effect for Jibri

but logo and background image are on jitsi side not on iframe, Jitsi using brandingDataUrl and getting the logo and background URL and setting on its side.
@damencho any solution for this?

OK got it. Thanks @emrah for pointing me into right direction. Now I’m at same stage as mentioned by @shubham.

If I have hard-coded the value of brandingDataUrl then it works but not the way mentioned by @shubham .

Isn’t it like instead of using an image which is downloaded and present in /images directory, we are using a URL which points to an image or logo?

@emrah @damencho Please help