BigBlueButton ビデオ会議

このプラグインは、Discourse インスタンスと、オンライン学習向けに設計されたオープンソースのビデオ会議ツールである BigBlueButton を統合します。利用するには、BBB インスタンスを実行しているサーバーが必要です。詳細については http://docs.bigbluebutton.org をご覧ください。ZoomJitsiWhereby と比較して、BigBlueButton はブラウザ対応が優れています。私のテストでは、iOS の Safari や Android の Chrome など、すべての主要なブラウザですぐに動作しました。

スクリーンショット


トピックや投稿にビデオ会議を追加するには、作成時のオプションドロップダウンから「BigBlueButton を追加」ボタンを使用してください。

機能

  • 複数のルームに対応
  • スタッフユーザーと設定可能なグループのユーザーは、BBB 会議でモデレーターとして認識されます
  • 管理者は、会議を Discourse に埋め込む(iframe 経由)か、フルページにリダイレクトするかを選択できます(モバイルとデスクトップで別々のオプションを設定可能)
  • 参加ボタンに、すでにビデオ会議に参加しているユーザーのアバターが表示されます

注記

BigBlueButton について教えていただき、プラグインの初期バージョンのテストとフィードバックを提供してくださった @Stephen に感謝いたします。

「いいね!」 41

ここでの素晴らしい取り組みに心から敬意を表します。多くの教育機関がBBBを利用しており、この統合のタイミングは完璧です。

「いいね!」 15

非常にタイムリーです。私たちは、新しく立ち上げたインタラクティブなウェビナーを、プライベートなトピックでウェビナーの URL のみを宣伝することで、openmod フォーラムをスクリーンとして活用しています。完全に隙がないわけではありませんが、フォーラムコミュニティを清潔に保つよう努めています。そのため、これらの展開に大変関心を持っています。@pmusaraj さん、ありがとうございます!

「いいね!」 4

現在、この困難な時期に私が支援している3つのボランティアグループは、すべてBigBlueButtonへの移行を完了しました。

この切り替えの大きな要因となったのがこのプラグインです。Discourseのトピックから会議への移行は完全にシームレスで、いつものような問題は一切発生していません。

テクニカルサポートの対応が不要になったことで、私の仕事が1000倍楽になりました。

@pmusarajさん、改めてありがとうございます!

「いいね!」 9

この作業をしてくださり、本当にありがとうございます。テストしたところ、非常にうまく動作しています。

ただ、使いやすくするためのいくつかの提案を持ち合わせています。これは、フォーラムのスタッフが BigBlueButton の内部構造にあまり詳しくなく、過去の経験が BigBlueButton のインターフェース(Greenlight)を使ってルームを作成したことしかないというユースケースを想定しています。

それでは、私の提案を以下に示します:

  1. 投稿の冒頭で「会議を開始」ボタンの作成方法を説明する
    インストール後、BigBlueButton のボタンを追加するには、テキストエディタの「オプション」(歯車アイコン)から行う必要があることに気づくまでにかなり時間がかかりました。この点を手順に記載することで、混乱を防げるかもしれません。

  2. パスワード作成を簡単にする

    • ランダムパスワードを生成するボタン: 人は怠けがちで、簡単なパスワードを選んでしまうことがわかっています。そのため、ユーザーにとってさらに楽な選択肢を提供し、実際にはセキュリティを高めるような仕組みがあってもよいでしょう。
    • パスワード欄を「(任意)」とラベル付けする(代替案):この欄が設定されていない場合、ランダムなパスワードが生成されます。ただし、ランダムなパスワードが作成される旨をユーザーに通知するメモを添える必要があります。
  3. パスワード関連のオプションを「詳細設定」の下に隠すことを検討する
    これらのオプションは、多くのユーザーが Discourse 内でルームを作成するだけで、他のアプリケーションで作成されたルームと連携させたいと考えていないため、隠してしまっても問題ないかもしれません。

  4. 技術用語を避ける

    • Discourse では常に「iframe」に言及していますが、平均的なユーザーにはそれが何かわかりません。ラベルを「投稿内に表示」に変更すれば、より明確になるでしょう。
    • 「Meeting ID」は BigBlueButton 特有の用語です。多くのユーザーにとっては「会議名」の方が適切でしょう。また、その下にグレーアウトした説明文を追加し、これが「Meeting ID」であることを補足するとよいかもしれません。

以下の画像は、上記で説明した「機能」の一部を示しています(これは機能を持たないモックアップです)。

繰り返しますが、これはすでに、特に教育分野で働く人々にとって非常に役立つプラグインです。改めてありがとうございます!

「いいね!」 6

BigBlueButtonに、この統合がhttps://bigbluebutton.org/integrations/に掲載できるか確認するようメールを送信しました。

更新情報があれば、ここに投稿します。

「いいね!」 2

@core さん、フィードバック(そして広報活動)をありがとうございます。あなたの投稿で提案されたいくつかの有意義な項目を実装しました。

パスワード生成は現在ランダム化されており、ユーザーには表示されません。(上級ユーザーは Markdown を変更してパスワードを変更できます。)また、オプションメニューでボタンにアクセスする方法についてのスクリーンショットと説明を OP に追加しました。

この変更は行いません。iframe は技術用語であることを承知していますが、この場合、変更しても役立たず、「投稿内に表示」という表現を使う方が混乱を招くと思います。ただし、ご自身のインスタンスでこのラベルをカスタマイズすることは可能です。カスタマイズ > テキストで「bbb.modal」でフィルターしてください。以下のスクリーンショットのようになります。

「いいね!」 5

あなたの解決策は完璧に見えます。ミニマリズムが本当に効果を発揮していますね。お時間を割いていただき、ありがとうございます :slight_smile:

素晴らしい妥協案ですね。ありがとうございます!

「いいね!」 1

@pmusaraj BBBのウェブサイトにDiscourseプラグインを追加することについては、まだ返信がありません。今後数日中に、彼らのメーリングリストで試してみます。

「いいね!」 1

@pmusaraj メーリングリストへの参加申請が却下されました(理由がわかりません)。そのため、統合について彼らに連絡する方法が限られています。GitHub の issue を開くことも考えましたが、BBB のコードベースに関する問題ではないため、かなり迷惑になるかもしれません。


編集: どうやらこれは bigbluebutton-users リスト に投稿すべきだったようです。それが却下された理由のようです。

「いいね!」 1

説明テキストの指示に従いましたか?あなたの統合を確認し、同様の事例のリストに追加しています。私の計画は、私たちが作成したものを共有できるドキュメント内にコミュニティページを設けることです。

「いいね!」 2

それを見落としていました。すみません。いずれにせよ、貢献者に届いていて嬉しいです!確認ありがとうございます!

素晴らしいプラグインです、ありがとうございます!
既存の会議(他のツールで計画されたもの)を開くにはどうすればよいですか?会議 ID はどこで確認できますか?このフィールドに何を入力しても、常に新しい会議が開始されてしまいます。

これは BBB への質問のようですが、理論的には、他のツールと同じルーム ID を使用すれば、同じ会議が読み込まれるはずです。

「いいね!」 1

以前に一度試しましたが、少し複雑でした。BBB API を使用する必要があります。

数日中にこのためのガイドを作成してみます。

最大の課題は、最も一般的に使用されているツール(Greenlight)が、そのような低レベルの情報をあまり表示していない点かもしれません。

「いいね!」 3

ありがとうございます、とても嬉しいです!

「いいね!」 1

既存の会議に「BigBlueButton を追加」する

このプラグインは、「BigBlueButton を追加」をクリックすると自動的に部屋を作成します。ただし、すでに存在する部屋(このプラグインを導入する前に作成されたものなど)を使用したい場合もあるかもしれません。その理由の例を以下に2つ挙げます。

  • すでに部屋を作成している場合(例えば Greenlight で作成)し、Discourse からも参加できるようにしたい場合

  • リンク経由での参加も許可したい場合 - デフォルトのフロントエンドである Greenlight を使用すると、会議に参加するための共有リンクが生成されます。これにより、Discourse 経由またはリンク経由の両方で参加できるようになります。

:warning: これは非常に侵入的な処理です。何をしているかを本当に理解しているか確認してください

手順

おそらく、現在使用しているフロントエンド(Greenlight? など)は、会議 ID や attendeePW(部屋のアクセスコードとは異なります。混乱しやすいですね)のような低レベルの情報を提供してくれません。そのため、これらの情報を取得するには、BBB の API を使用してすべての会議情報をリストアップする必要があります。

注記: より良い方法があるかもしれませんが、私は知りません。もしそのような方法があれば教えてください。

前提条件

  • BBB サーバーへのターミナルアクセス(例:SSH 経由)
  • 基本的な Python の知識(コードの検証用)
  • BBB API を使用する際の セキュリティリスク についての理解

1. BBB のシークレットと API エンドポイントの取得

BBB サーバーが動作しているシェル(SSH 経由など)にアクセスし、以下のコマンドを実行します。

sudo bbb-conf --secret

これにより、URLSecret が表示されます。これらは後で使用します。

:warning: このシークレットを知っている人は誰でもサーバーに対して悪意のある操作を行う可能性があります!必ず安全に保管してください。

2. 会議情報を取得する Python3 スクリプトの作成

以下は、ステップ1で取得した URL とシークレットを受け取り、会議情報を取得するための API を生成するシンプルな Python 3 スクリプトです。

:warning: インターネットで見つけた(このスクリプトを含む)ランダムなスクリプトをそのまま貼り付けないでください。内容を検証し、必要に応じて API のドキュメント を確認してください。

import hashlib
from urllib.parse import urljoin

# 変数をここに設定
base_url = "ここに URL を貼り付け" + "api/"
secret = "ここにシークレットを貼り付け"

# セキュリティチェックサムを生成
plaintext = "getMeetings" + secret
sha1 = hashlib.sha1()
sha1.update(plaintext.encode('utf-8'))
checksum = sha1.hexdigest()

# 会議情報をリストするための API URL を取得
url = urljoin(base_url, "getMeetings?checksum=" + checksum)
print("会議情報を見るには以下の URL を開いてください")
print(url)

PASTE_HERE_YOUR_URL を先に取得した API URL に、PASTE_HERE_YOUR_SECRET をシークレットに置き換えてから、スクリプトを実行してください。

実行後、以下のような URL が出力されます。
https://example.com/bigbluebutton/api/getMeetings?checksum=20e928e8928e8e9f919928e829d999df82882818

:warning: この URL を知っている人は誰でも悪意のある操作を行う可能性があります

進行中のすべての会議、各会議のユーザー数、および参加するための認証情報を取得できます。

3. URL を開く

上記の警告により URL がブラウザの履歴に保存されないよう、プライベートブラウジングモードで開いてください

追加しようとしている会議を開始し、API URL が表示されているページをリフレッシュしてください。すると、以下のような内容が表示されるはずです。

<response>
<returncode>SUCCESS</returncode>
<meetings>
<meeting>
<meetingName>あなたの部屋の名前</meetingName>
<meetingID>XXXXXXXXXXXXXXXXXXXXXXXXXXX</meetingID>
...
<attendeePW>YYYYYYY</attendeePW>
<moderatorPW>ZZZZZZZ</moderatorPW>
...

追加したい会議の下にある行を探し、以下の情報を取得してください。

  • meetingID
  • attendeePW
  • moderatorPW

これらの情報を取得したら、API にアクセスしているすべてのファイルを削除し、すべてのタブを閉じてください
セキュリティインシデントを防ぎましょう!

4. 投稿に「BigBlueButton を追加」する

通常の「BigBlueButton を追加」インターフェースではなく、以下のコードを投稿に直接貼り付けてください。

[wrap=discourse-bbb meetingID="XXXXX" attendeePW="YYYYY" moderatorPW="ZZZZZ"  mobileIframe="false" desktopIframe="false"][/wrap] 

そして、ステップ3 で取得した情報に置き換えてください。

  • XXXXX を meetingID の内容に
  • YYYYY を attendeePW の内容に
  • ZZZZZZ を moderatorPW の内容に

その後、投稿を保存してください。

6. これで動作するはずです \o/

これで、Discourse 経由および以前使用していた他のフロントエンド(Greenlight の場合、リンク経由でも)の両方から参加できるようになっているはずです。

「いいね!」 3

こんにちは、

プラグインの素晴らしい仕上がり、大変気に入っています!

いくつか修正が必要な点に気づきましたので、ここに記録させていただきます:

  1. 画面共有が機能しません
    (権限を求めてポップアップが表示されず、プロセスが失敗するだけです)

  2. セッションを iframe で埋め込んだ場合、会議の録画機能が使えません

これらの問題を報告できる場所をご存知でしょうか?GitHub リポジトリではイシューの提出が無効になっているようです。

画面共有は機能します。私どもはこれを幅広く利用しています。Chrome は、プライバシーとセキュリティの観点から、iFrame への画面共有を好んでいません。

Chrome はプライバシー/セキュリティの観点から、iFrame への画面共有を好まないためです。

おそらく、それが Firefox でも動作しない理由だと思われます。