Jitsi MeetのWebページカスタマイズ設定

Docker版Jitsi Meetの、機能面ではなく、Webページ（フロントエンド）のカスタマイズについて記載します。
サーバー環境は、以前構築した「Docker版Jitsi Meet」を前提としています。

Webページカスタマイズの準備

Jitsi Meet のフロントエンド寄りのConfigファイルとしては、config.js, interface_config.js が用意されています。

（参考）
・Jitsi Meet configuration – Jitsi Meet Handbook
https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-docker/#jitsi-meet-configuration

config.js, interface_config.js は、以前構築した「Docker版Jitsi Meet」の環境では、Dockerホストサーバーの ~/.jitsi-meet-cfg/web/ に存在します。

Jitsi Meet Handbook によれば、config.js, interface_config.js は、コンテナを再起動するたびに再作成される（元に戻ってしまう）ので、設定をカスタマイズする場合は、custom-config.js, custom-interface_config.js ファイルを作成し、そこに、カスタマイズする設定のみ記載してください、とのことです。

それに従って、custom-config.js, custom-interface_config.js ファイルを作成します。
jitsiユーザーでコンテナをインストール、起動しているので、jitsiユーザーで操作します。

　$ touch ~/.jitsi-meet-cfg/web/{custom-config.js,custom-interface_config.js}
　$ ls -l ~/.jitsi-meet-cfg/web/

drwxr-xr-x 3 root      root      4096  6月  9 12:24 acme-certs
drwxr-xr-x 4 root      root      4096  6月  9 13:11 acme.sh
-rw-r--r-- 1 root      root      4602  6月  9 13:11 config.js
drwxr-xr-x 2 root      root      4096  6月  9 12:16 crontabs
-rw-rw-r-- 1 jitsi     jitsi        0  6月  9 15:48 custom-config.js
-rw-rw-r-- 1 jitsi     jitsi        0  6月  9 15:48 custom-interface_config.js
-rw-r--r-- 1 root      root      8110  6月  9 13:11 interface_config.js
drwxr-xr-x 2 root      root      4096  6月  9 12:16 keys
drwxrwxr-x 2 jitsi     jitsi     4096  6月  9 11:38 letsencrypt
drwxr-xr-x 2 root      root      4096  6月  9 12:16 load-test
drwxr-xr-x 3 root      root      4096  6月  9 12:24 nginx

フロントエンドは、webコンテナの以下のディレクトリ、ファイルで構成されています。

• /usr/share/jitsi-meet/index.html
• /usr/share/jitsi-meet/title.html
• /usr/share/jitsi-meet/lang （ディレクトリ）
• /usr/share/jitsi-meet/images （ディレクトリ）
• /usr/share/jitsi-meet/css （ディレクトリ）
• /usr/share/jitsi-meet/libs （ディレクトリ）

コンテナ内のファイルは編集しにくいため、上記のディレクトリやファイルをDockerホストのConfigディレクトリにコピーして、docker-compose.yml で、コンテナからホスト上のファイルを参照するよう変更します。

管理しやすいよう、カスタマイズ用ディレクトリ customfiles を作成します。

　$ mkdir ~/.jitsi-meet-cfg/web/customfiles

webコンテナ内にある、カスタマイズしたいファイルもしくは、ファイルを含むディレクトリを、作成した ~/.jitsi-meet-cfg/web/customfiles/ 以下にコピーします。

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/index.html \
    ~/.jitsi-meet-cfg/web/customfiles/

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/title.html \
    ~/.jitsi-meet-cfg/web/customfiles/

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/lang \
    ~/.jitsi-meet-cfg/web/customfiles/

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/images \
    ~/.jitsi-meet-cfg/web/customfiles/

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/css \
    ~/.jitsi-meet-cfg/web/customfiles/

　$ docker cp jitsi-meet-web-1:/usr/share/jitsi-meet/libs \
    ~/.jitsi-meet-cfg/web/customfiles/

docker-compose.yml で、webコンテナのバインドマウント設定を追記します。

　$ cd ~/jitsi-meet/

-- docker-compose.yml
services:
    # Frontend
    web:
...
        volumes:
            - ${CONFIG}/web:/config:Z
            - ${CONFIG}/web/crontabs:/var/spool/cron/crontabs:Z
            - ${CONFIG}/transcripts:/usr/share/jitsi-meet/transcripts:Z
            - ${CONFIG}/web/load-test:/usr/share/jitsi-meet/load-test:Z
            - ${CONFIG}/web/customfiles/index.html:/usr/share/jitsi-meet/index.html:Z  // 追記
            - ${CONFIG}/web/customfiles/title.html:/usr/share/jitsi-meet/title.html:Z  // 追記
            - ${CONFIG}/web/customfiles/lang:/usr/share/jitsi-meet/lang:Z  // 追記
            - ${CONFIG}/web/customfiles/images:/usr/share/jitsi-meet/images:Z  // 追記
            - ${CONFIG}/web/customfiles/css:/usr/share/jitsi-meet/css:Z  // 追記
            - ${CONFIG}/web/customfiles/libs:/usr/share/jitsi-meet/libs:Z  // 追記
...
--

バインドマウントを反映するため、docker compose up -d コマンドを実行して、変更したコンテナのみ再作成、起動します。

　$ docker compose up -d

以上でWebページカスタマイズの準備は終了です。
これで、Dockerホスト上の　

~/.jitsi-meet-cfg/web/custom-config.js
~/.jitsi-meet-cfg/web/custom-interface_config.js
~/.jitsi-meet-cfg/web/customfiles/*

といったファイルを編集すれば、Webページをカスタマイズできるようになりました。

フロントエンドの作業担当者が、DockerホストサーバーにSFTPで接続し、編集、アップロードしてカスタマイズする、といった作業分担もしやすいと思います。

Webページカスタマイズ

以下の記事などを参考になりました。

・Jitsiのカスタマイズ – スタジオくまかけ
https://kumakake.com/jitsi%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/

・Jitsi MeetをDocker Compose で起動
https://zenn.dev/nojya/articles/adeb1cd835a105

・Jitsi Meetのトップページをちょっとだけカスタマイズ
https://zenn.dev/8chikuwa3/articles/a502b7b04dfb9c

・How To Customize Jitsi Meet Video Conference Server – TechnologyRSS.com
https://technologyrss.com/how-to-customize-jitsi-meet-video-conference-server/

ページタイトルの変更

ページタイトル（見た目としては、ブラウザのタブに表示される文字列）はデフォルトで「Jitsi Meet」となっています。

これを、ここでは「オンライン会議」に変更するとします。

HTML的には、.jitsi-meet-cfg/web/customfiles/title.html 内の title タグを変更すればよさそうです。

-- 変更前
<title>Jitsi Meet</title>
--

-- 変更後
<title>オンライン会議</title>
--

index.html, title.html は、ディレクトリではなく、ファイルをバウンドマウントしています。
この場合、Dockerホスト側でファイル内容を変更したとき、inodeが変わってしまうため、コンテナに反映されません。
コンテナに反映するには、コンテナの再起動が必要となります。

　$ docker compose stop
　$ docker compose up -d

ところが、ブラウザでアクセスしてみると、タブの文字列は「Jitsi Meet」のままです。
ブラウザでHTMLソースを確認すると、

<title>オンライン会議</title>

となっているのですが。。

どうやら、.jitsi-meet-cfg/web/customfiles/libs/app.bundle.min.js に、以下のコードが含まれているため、JavaScriptに上書きされてしまうようです。

document.title=interfaceConfig.APP_NAME

このため、
.jitsi-meet-cfg/web/custom-interface_config.js
に以下の1行を追記して、、、

interfaceConfig.APP_NAME = 'オンライン会議';

コンテナを再起動して反映します。

　$ docker compose stop
　$ docker compose up -d

これで無事、ページタイトルが変更されました。

※title.html 内の変更については、これはこれで、SEO的には意味がありそうです。必要に応じて、title.html 内の各種metaタグも変更するとよいでしょう。

トップページのタイトル文言を変更

トップページに表示されている「Jitsi Meet」「安全で高品質なミーティング」といった文言を変更したいとき。
これらの文言は、日本語ローカライズファイル .jitsi-meet-cfg/web/customfiles/lang/main-ja.json で設定されているので、ここで変更します。

-- 変更前
        "headerSubtitle": "安全で高品質なミーティング",
        "headerTitle": "Jitsi Meet",
--

-- 変更後
        "headerSubtitle": "会議名を入力し、【ミーティングを開始】をクリックしてください。",
        "headerTitle": "オンライン会議",
--

編集後、コンテナの再起動をしなくても、即時反映されます。

なお、lang/main-ja.json には、メニューやアラート等、ウインドウで表示される各種日本語文言が設定されているため、必要に応じて変更するとよいでしょう。

多言語対応が必要な場合は、該当国の lang/main-xx.json を編集しましょう。

英語の文言は、lang/main.json にあるように見えるのですが、lang/main.json の headerTitle と headerSubtitle を変更しても、なぜか反映されませんでした。

.jitsi-meet-cfg/web/customfiles/libs/app.bundle.min.js のほうを変更すると、反映されました。

"headerSubtitle":"Enter any meeting name in the box below and click \'Start Meeting\'.","headerTitle":"Online Meeting"

※JavaScriptで文言内で記号(‘)を使用する場合は、\ でエスケープが必要。

トップページの背景画像を変更

.jitsi-meet-cfg/web/customfiles/css/all.css に、以下のような背景上部の表示に関する .welcome .header クラスの記述があります。
（実際は、改行やスペースが削除されています。）

.welcome .header {
    background-image: linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),url(../images/welcome-background.png);
    background-position: center;
    background-repeat: none;
    background-size: cover;
    padding: 1rem;
    background-color: #131519;
    overflow: hidden;
}

ですので、以下のいずれかで、背景画像を変更できるでしょう。

1. images/welcome-background.png ファイルを差し替える。
2. お好みの背景画像を images/ にアップロードして、all.css の画像ファイル名を書き換える。
3. お好みの背景画像を images/ にアップロードし、カスタマイズ用のcssファイルを作成して、index.htmlにリンクを追加する。

3. は、以下のような感じ。

まず、お好みの背景画像を images/welcome-background-custom.png としてアップロードします。

カスタマイズ用のcssファイル custom.css を作成し、、.welcome .header クラスのみ記述します。
画像ファイル名のパスを変更したのと、背景色(background-color)を、チラつき防止のため、新しい背景画像寄りの色にしてみました。

　$ vim ~/.jitsi-meet-cfg/web/customfiles/css/custom.css

.welcome .header {
    background-image: linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),url(../images/welcome-background-custom.png);
    background-position: center;
    background-repeat: none;
    background-size: cover;
    padding: 1rem;
    background-color: #D3D3D3;
    overflow: hidden;
}

index.html で、custom.css へのリンクを追加します。

-- .jitsi-meet-cfg/web/customfiles/css/index.html
...
    <link rel="stylesheet" href="css/all.css?v=8542">
    <link rel="stylesheet" href="css/custom.css">   // 追記
...
--

title.html の編集と同様、index.html はファイルをバインドマウントしているため、変更を反映するには、コンテナの再起動が必要です。

　$ docker compose stop
　$ docker compose up -d

無事、背景画像が変更されました。

ロゴ画像の変更

トップページの中央上部やや左と、会議ページ左上にある「jitsi」のロゴ画像を変更するには、custom-interface.js とCSSで対応します。

まず、新しいロゴ画像を（ここでは）images/watermark-custom.png としてアップロードします。

続いて、custom-interface_config.js で設定します。
DEFAULT_WELCOME_PAGE_LOGO_URL は、トップページのロゴ画像のURLパス。
DEFAULT_LOGO_URL は、会議ページのロゴ画像のURLパス。
JITSI_WATERMARK_LINK は、ロゴ画像のリンク先。

-- .jitsi-meet-cfg/web/custom-interface_config.js
interfaceConfig.DEFAULT_LOGO_URL='images/watermark-custom.png';
interfaceConfig.DEFAULT_WELCOME_PAGE_LOGO_URL=interfaceConfig.DEFAULT_LOGO_URL;
interfaceConfig.JITSI_WATERMARK_LINK='https://inaba-serverdesign.jp/';
--

CSSでは、ロゴ画像サイズを指定します。
all.css を変更するか、先ほどのように custom.css を用意したのであれば、そこに追記するとよいでしょう。
waltermark まわりのクラスでロゴ画像のサイズを指定します。

-- ~/.jitsi-meet-cfg/web/customfiles/css/custom.css
.welcome .welcome-watermark .watermark.leftwatermark {
    width: 110px;
    height: 83px
}

.leftwatermark {
    max-width: 110px;
    max-height: 83px;
}

custom-interface_config.js を変更したので、コンテナの再起動が必要です。

　$ docker compose stop
　$ docker compose up -d

無事、ロゴ画像が変更されました。

ロゴ画像の削除

ロゴ画像が不要であれば、非表示にしてしまいましょう。
all.css を変更するか、先ほどのように custom.css を用意したのであれば、そこに追記するとよいでしょう。

-- ~/.jitsi-meet-cfg/web/customfiles/css/custom.css
.leftwatermark {
  display: none;
}
--

custom-interface_config.js を変更したので、コンテナの再起動が必要です。

　$ docker compose stop
　$ docker compose up -d

ロゴ画像がなくなりました。

トップページ下部のモバイルアプリ情報を削除

トップページの一番下の↑この部分を削除したいとき。
CSSの .welcome .welcome-footer-padded クラスを変更します。

背景の黒を残しつつ、モバイルアプリ情報のみ非表示にする場合。

-- ~/.jitsi-meet-cfg/web/customfiles/css/custom.css
.welcome .welcome-footer-padded {
  visibility: hidden;
}
--

背景を白にする場合。

-- ~/.jitsi-meet-cfg/web/customfiles/css/custom.css
.welcome .welcome-footer-padded {
  display: none;
}
--

あるいは、custom-interface_config.js の指定でも背景白になります。

-- .jitsi-meet-cfg/web/custom-interface_config.js
interfaceConfig.DISPLAY_WELCOME_FOOTER = false;
--

その他のカスタマイズ

フロントエンドに明るい方であれば、config.js, interface_config.js と各HTML, CSS, JSファイルを見ていけば、自由ににカスタマイズできるでしょう。

※「Webページカスタマイズの準備」で実施したのは、そのためのバインドマウント設定でした。

---

Jitsi Meetについて書いた記事まとめ。

• Jitsi Meet
• Docker版Jitsi Meetのインストール手順
• Jitsi Meetの機能カスタマイズ設定
• Jitsi MeetのWebページカスタマイズ設定（本記事）
• Jitsi Meet nftablesによるアクセス制限設定
• Jitsi Meet ホストサーバーのNginxリバースプロキシ設定
• Jitsi Meet Jibriによる録画機能設定
• 非Docker版Jitsi Meetのインストール手順
• Jitsi Meet会議の開催履歴の調べ方
• Jitsi Meetあれこれ