Jitsi APIを使用して外部サイトからビデオチャットを読み込む

公開日：2020/02/11 更新日：2020/02/11

はじめに

URLを発行するだけでブラウザでビデオチャットを開始できるオープンソースのJitsiでは、APIが用意されておりこのAPIを使用することで自分のサイト等外部サイトの中にビデオチャットを埋め込むんで表示することができます。この記事ではその手順を簡単にまとめます。 Jitsiの構築は完了しているものとします。Jitsiを構築する手順は以下にまとめています。

www.virment.com

URL発行のみでビデオチャットやビデオ会議を開始できるオープンソース「Jitsi」

URL１つを発行するだけでその他のアカウント登録等不要にビデオチャットや複数人でのビデオ会議をブラウザで開始できる「Jitsi」を実際にインストールして使ってみたのでその手順をまとめます。

できるようになること

以下のようにJitsiのビデオチャットを適当なHTMLサイトの中で読み込みます。

前提と環境

Jitsiはインストール済とします。

OS : Ubuntu18.04
Jitsiはインストール済とする。
Jitsiをapt経由でインストールした前提とする。
Jitsi用に使用するドメインはexample.comとする。

適当なHTMLファイルの中でJitsiを呼び出す

適当なHTMLファイルの中に以下のように記述するだけでJitsiのビデオチャットを表示することができます。ここではindex.htmlというファイル名で作成して適当なフォルダに保存します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>jitsi</title>        
  </head>
  <body>
    <h1>Hello Jitsi Video Chat !</h1>
    <div id="meet">
      <h2>This is test</h2>
    </div>
    // Jitsi API用のスクリプトを読み込む
    <script src='https://example.com/external_api.js'></script>
    <script> 
      const domain = 'example.com'; // Jitsi用に使用しているドメイン名
      const options = {
        roomName: 'LongingClownsSkateMalevolently', // チャットルーム名
        width: 700, // ビデオチャット表示部分の幅
        height: 700, // ビデオチャット表示部分の高さ
        parentNode: document.querySelector('#meet') // ビデオチャットを表示する要素のID
      };
        const api = new JitsiMeetExternalAPI(domain, options);
    </script>
  </body>
</html>

後は上記のindex.htmlをGoogle Chrome等のブラウザで開けば以下のように表示されるはずです。

HTMLファイルをGoogle Chrome等で開くには、例えば以下のように作成したHTMLファイル上で右クリックして「ブラウザで開く」のようなメニューをクリックします。

なお、以下のようにマイクとカメラの使用許可を求めるダイアログが出ると思いますが、これは許可してください。

使用できるオプションやメソッドについて

公式ドキュメントにかなり色々なオプションやメソッドが用意されています。例えば以下のようなこともできます。

const api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand('displayName', 'My Nickname'); // ニックネーム（表示名）を指定する
api.executeCommand('subject', 'My Video Chat'); // チャットルームの件名を指定する
api.executeCommand('toggleAudio'); // 音声のオン / オフ切り替える
api.executeCommand('toggleVideo'); // カメラのオン / オフ切り替える

また、上記以外にも通話の開始や終了、メンバーがビデオチャットに参加、退出などのイベントを検出することもできるようになっています。詳しくは公式ドキュメントを見てみてください。