Appearance
会議室
概要
遅延が少なく高画質な双方向のウェブ会議機能を提供します。
hedgehog の会議室機能は基本的にVonage Video APIを使用して実装されており、Hedgehog SDK では Vonage で会議室をスタートするために必要な情報のみを提供する形になります。
クライアント側は opentok のクライアントモジュールを使用して実装する必要があります。
Vonage(opentok) の公式チュートリアル
https://tokbox.com/developer/tutorials/web/basic-video-chat/
npm からインストール
shell
npm i @opentok/client
サンプル
あなたはイベントの管理者で、専門的な科学に関するパネルトークのオンラインイベントを開催しようとしています。 ある科学雑誌の編集長をイベントのホストとして、その科学雑誌に掲載された経験がある 3 人の科学者をパネリストとして招く事にしています。
以上のような想定で、実際にイベントを作る手順を見てみましょう。
TIP
ステップ 1 とステップ 2 は、Hedgehog Dashboard でも同様の操作が可能です。
WARNING
以下サンプルは、環境変数に STAGE_UUID がセットされている前提になります。
1. イベントとチケットを作成する admin
まずはイベントとチケットを作成し、紐づけします。
ts
// イベント作成
const event = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.admin.create({
title: "〇〇トークセッション",
isPublic: true,
startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
image: new File([], ""), // 本来はイベントのタイトル画像を入力します
});
// 支払先情報取得
const payee = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.admin.payee.list();
// チケット作成
const ticket = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.admin.create({
title: "〇〇トークセッションチケット",
amount: 3000,
stripeAccountUuid: payee[0].uuid,
});
ticket.admin.associate(event.uuid);2. 会議室を作成する admin
イベントに紐づく会議室を作成します。
作成の際に eventUuid が必要なので、先程作成したイベントの uuid を使用します。
ts
// ルーム作成
const room = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.room.admin.create({
title: "〇〇トークセッション会議",
isPublic: true,
startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
endDate: new Date(Date.now() + 11 * 24 * 60 * 60 * 1000).toISOString(),
eventUuid: event.uuid,
});
// ルームキー入手
const { hostKey, panelistKey } = await room.admin.getKeys();ここまでで、会議室の作成は完了となります。
ここで得られた hostKey をホストとなる編集長に、panelistKeyをパネリストである各科学者に配布します。
INFO
panelistKey は 3 名とも同じものを配布して構いません。
3. フロントエンドを作成する
イベントに使用する web サイトを作成します。イベントの趣旨に沿った web サイトを、自由に作成してください。
4. 会議室情報を取得する
web サイト内で Hedgehog SDK を使用して特定の会議室を取得するには、以下のようにします。
ts
// イベントを取得
const someEvent = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.list()
.first();
if (!someEvent) throw new Error("イベントがありません");
// 会議室を取得
const someRoom = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.room.list({
eventUuids: [someEvent.uuid],
})
.first();ここでは単純化のために first() を使用していますが、実際には page() や all() を使用してリストを取得し、ユーザーに選択肢として提示する必要が出てくるでしょう。
5. トークンを取得する
会議への参加にはトークンが必要になりますが、どのような役割で会議に参加するかによってトークン取得に必要な情報が異なります。
ts
const roomToken = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.room.ref(someRoom.uuid)
.getConnectionData({
hostKey: "ホストキー", // 1. ホスト
panelistKey: "パネリストキー", // 2. パネリスト
ticketNumber: "チケット番号", // 3. 視聴者
});そのため、フロントエンドに各役割に応じたイベント参加への入り口を実装する必要があります。
6. opentok SDK を使用してビデオ会議部分を作成する
ステップ 3 で取得した roomToken は以下のプロパティを持っています。
ts
const { apiKey, sessionId, token } = roomToken;これらは、opentok を使用してビデオ会議を開始するために必要な情報となっています。
https://tokbox.com/developer/tutorials/web/basic-video-chat/#authentication
この認証情報と opentok を使用して、ビデオ会議部分を実装していきます。表示部分をカスタマイズする場合は以下を参照してください。