Jitsi Client for Streaming

This is a small HTML/Javascript Client for Jitsi. With this client you can join any Jitsi Room and the Client shows the participants on a fixed window on the screen. The client can show a maximum of 9 Videos. The positions on the Screen are fixed and mapped by the username of the participants.

With this design it is possible to capture the Screen with OBS and crop the different Video feeds of your Users seperately. Its best to open the Browser on a second Monitor. (Use Chrome or Chromium)

The Jitsi Server can be changed in the script.js file. The default Server is "meet.theater.digital".

Furthermore you can Control the Volume of each Participant via a Slider and even via Midi Controller. (Korg nanoKontrol2)

Since this client will join the Jitsi Meeting, its name is "Streamer". It has no Video for the other users.

User mapping

Below the Video Placeholdes there a Input Boxes for the Usernames. You have to enter the exact name of the participant into the box and hit the reload Button to apply.

On the very bottom of the page is a List with all current users in the Meeting Room.

Ask your users that they give themself a uniqe username. Best are simple names without blanks and any special symbols. Please avoid duplicate names.

NGINX Config

Taken from an installation manual of Jitsi we use this nginx config for our instance. This allows CORS to function with the custom client hosted within another domain. If you prefer to have CORS disabled for other domanis, you can either change the wildcard to allowed domains, or add a location to your config to host the client at e.g. https://meet.example.com/streamclient/

server_names_hash_bucket_size 64;

 

server {
    listen 80;
    listen [::]:80;
    server_name meet.theater.digital;

 

    location ^~ /.well-known/acme-challenge/ {
       default_type "text/plain";
       root         /usr/share/jitsi-meet;
    }
    location = /.well-known/acme-challenge/ {
       return 404;
    }
    location / {
       return 301 https://$host$request_uri;
    }
}



server {
    listen 4444 ssl http2;
    listen [::]:4444 ssl http2;
    server_name meet.theater.digital;

 

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "EECDH+ECDSA+AESGCM:EECDH+aRSA+AESGCM:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA256:EECDH+ECDSA+SHA384:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA384:EDH+aRSA+AESGCM:EDH+aRSA+SHA256:EDH+aRSA:EECDH:!aNULL:!eNULL:!MEDIUM:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS:!RC4:!SEED";

 

    add_header Strict-Transport-Security "max-age=31536000";
    add_header Access-Control-Allow-Origin *;
    add_header access-control-expose-headers "Content-Type, X-Jitsi-Region, X-Jitsi-Shard, X-Proxy-Region";

 


    ssl_certificate /etc/letsencrypt/live/meet.theater.digital/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/meet.theater.digital/privkey.pem;

 

    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;

 

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

 

    location = /config.js {
        alias /etc/jitsi/meet/meet.theater.digital-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;
    }

 

    # BOSH
    location = /http-bind {
        proxy_pass      http://localhost:5280/http-bind;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;
        add_header access-control-allow-origin *;
        add_header access-control-allow-credentials "true";
        add_header access-control-allow-methods  "GET, POST, OPTIONS";
        add_header access-control-allow-headers  "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type";
        add_header access-control-expose-headers "Content-Type, X-Jitsi-Region, X-Jitsi-Shard, X-Proxy-Region";
    }

 

    # xmpp websockets
    location = /xmpp-websocket {
        proxy_pass http://127.0.0.1:5280/xmpp-websocket?prefix=$prefix&$args;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
        tcp_nodelay on;
    }

 

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

 

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

 

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

 

       alias /etc/jitsi/meet/meet.theater.digital-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;
    }

 

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

 

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

 

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

 

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