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

公開日:2020/02/11 更新日:2020/02/11
Jitsi APIを使用して外部サイトからビデオチャットを読み込むのサムネイル

はじめに

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

www.virment.com

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

できるようになること

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

embed-jitsi-demo.png

前提と環境

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等のブラウザで開けば以下のように表示されるはずです。

embed-jitsi-demo.png

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

right-click-menu-browser.png

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

allow-mic-and-camera.png

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

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

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

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

まとめ

Jitsi APIはかなり充実しています。イベントをトリガに任意の操作を実行することもできるので、Vue.jsやReact.jsなどと組み合わせて使用すると色々できそうです。

関連記事

開発アプリ

nanolog.app

毎日の小さな出来事をなんでも記録して、ログとして残すためのライフログアプリです。