JitsiのAPIを利用してボタンを整理します

Jitsiでクライアントさんに使ってもらいたくなボタンが有り。。。さて、どうしたもんか。。。
Configファイルをいじればサーバーで設定はできるのですが、全体に渡るのでこれはボツ。。。

/etc/jitsi/meet/hoge.com-config.jsの430行目辺り。。。

ってことで、クライアントさん用の画面を定義して、その中でボタンを定義することにしました。
そのためにはJitsiのAPIを利用する必要が出てきます。
今回はそのあたりについて記載します。

クライアント用のhtmlの作りましょう！

クライアントさん用のhtmlを準備します。
<head>
　　：
　　<script src=”hoge.com/external_api.js”></script>
　　：
</head>
<body>
　　：
　　<div id=”meet”></div>　　ビデオチャットの表示場所設定
　　：
　　<script>
　　　　const domain=”hoge.com”;　　// Jitsi用に使用しているドメイン名
　　　　const option = {
　　　　　　roomName : ‘部屋名称’,
　　　　　　noSSL　　： false,
　　　　　　interfaceConfigOverwrite：{
　　　　　　　　DISABLE_DOMINANT_SPEAKER_INDICATOR : true,
　　　　　　　　TOOLBAR_BUTTONS：[
　　　　　　　　’microphone’, ‘camera’, ‘hangup’, ‘settings’, ‘select-background’,
　　　　　　　　’tileview’, // タイルビュー
　　　　　　　　// ‘security’,
　　　　　　　　// ‘participants-pane’, // 参加者一覧・BOL作成
　　　　　　　　// ‘invite’ // 人を招待

　　　　　　　　// ‘closedcaptions’, ‘desktop’, ‘fullscreen’, ‘fodeviceselection’,’profile’
　　　　　　　　// ‘chat’, ‘recording’,’livestreaming’, ‘etherpad’, ‘sharedvideo’,’settings’,
　　　　　　　　// ‘raisehand’,’videoquality’, ‘filmstrip’, ‘feedback’, ‘stats’, ‘shortcuts’,

　　　　　　　　]

　　　　　　},
　　　　　　parentNode : document.querySelector(‘#meet’), // ビデオチャットを表示する要素のID
　　　　　　configOverwrite：{
　　　　　　　　disableDeepLinking : true　// 「このブラウザは対応していません」ってのを回避します。
　　　　　　},
　　　　　　userInfo：{
　　　　　　　　displayName：’クライアント名’
　　　　　　}
　　　　}
　　　　$(function() {
　　　　　　const api = new JitsiMeetExternalAPI( domain, option );
// 後は必要に応じて、API資料を閲覧してください。
　　　　}
　　</script>
</body>