In the previous post (https://www.old.brightcove.com/ja/resources/blog/live_stream_chat_1/ “previous”), we introduced how to set up <a href=“https://chatroll.com/” target=“_blank” title=“Chatroll”>Chatroll</a>. This time, we will introduce the integration between our products [Brightcove Gallery](https://www.old.brightcove.com/ja/products/gallery/ “Brightcove Gallery”) (video portal site construction function) and [Brightcove Live](https://www.old.brightcove.com/ja/solutions/live-streaming/ “Brightcove Live”).
目次__
- 1.ブライトコーブギャラリーについて](#1-brightcove-gallery)
- [2.ブライトコーブギャラリーの設定方法](#2-brightcove-gallery)
- [3.ビデオIDの設定方法](#3-video-id)
- [4.設定の反映](#4-)
## 1.ブライトコーブ ギャラリーについて
Brightcove Gallery は、動画ポータルサイトを簡単に構築できる機能です。以下のテンプレートから、企業のブランド イメージに合った動画ポータル サイトを構築できます。
In addition to this “Portal” template, in 2017 a new “In-Page” template was also released, which allows you to embed video playlists into your existing website. (For more details, see [here](https://www.old.brightcove.com/ja/resources/blog/gallery-inpage-part1/ “here”)
Chatrollは'ポータル'または'ページ内'機能で使用できます。この例では、'ページ内' 機能を使用してライブ放送時にチャット機能を実装する方法を紹介します。
*Brightcove Gallery has various settings, but this time we will introduce the minimum settings. For information on Brightcove Gallery specifications and how to make settings, please refer to [here](https://ja.gallery.support.www.old.brightcove.com/get-started/getting-started-brightcove-gallery.html “here”). If you have any questions, please contact our technical support based on the support conditions of your contract.
## 2.Brightcove Gallery のセットアップ方法
Video Cloud にログインし、Gallery モジュールを選択してください。移行後、Galleryモジュールのトップ画面左上に表示される「New Experience」をクリックしてください。
)
遷移後、左から3番目のタブ「インページ」をクリックしてください。各種テンプレートが表示されますので、「ライブイベントインページ」を選択してください。
体験タイトル」「体験内容」などを入力し、「体験言語」を日本語に設定してください。設定完了後、「体験を作成」をクリックしてください。(これらの設定は後で変更することができます。）
この例では、前編で設定したチャトロールのチャット画面が、ライブ映像を配信している動画プレーヤーの右側に表示されるように設定します。右側に表示されている「＋」ボタンをクリックすると、「コンポーネントの選択」という画面が表示されますので、「チャット」をクリックしてください。
すると、以下のポップアップが表示されます。チャットHTMLコード」にChatrollの埋め込みタグ（iframeタグ）を入力してください。この時、"width"(幅)を100%に、"height"(高さ)を500pxに変更することをお勧めします。
この例では、ライブイベント前からイベント後までチャットウィンドウを表示するように設定します。このチャットをいつ表示しますか "の下に表示されている、"イベント前"、"ライブ"、"イベント後 "の全てのボックスにチェックを入れ、保存ボタンをクリックしてください。
遷移後、右上の「プレビュー」をクリックすると、前項で設定したチャット画面が以下のように表示されます。(以下では、プレビューの右上に表示される「再生状況」を「ライブ」にしています。
## 3.ビデオIDの設定方法
次に、ライブ配信したい動画のビデオIDを取得する方法を説明します。
In this article, we will not be covering the method of live streaming (how to create a live event) itself. For more details, please check [here](https://ja.live.support.www.old.brightcove.com/live-module/creating-and-managing-live-events-using-live-module.html “here”). After creating an event with the Live module, please copy the “Video ID” displayed in the “Control Room” of the event.
コピー後、ギャラリー・モジュールに戻り、左側の「ビデオ」タブをクリックします。クリックすると、"Before Event"、"Live"、"After Event "と表示されますので、"Live "をクリックします。すると、右側に「ビデオを選択」という画面が表示されますので、「ビデオID」のラジオボタンが選択されていることを確認し、先ほどコピーしたビデオIDを貼り付けます。
## 4.設定の反映
最後に、Galleryで行った設定を適用するには、Galleryモジュールの右上にある「Publish and Embed」をクリックすると、以下の画面がポップアップ表示されます。
しばらくすると、「公開状況」に「このエクスペリエンスは最新です」と表示されます。推奨」に表示されているJavaScriptをウェブサイトにインストールしてください。すると、以下のようにビデオプレーヤーが表示されなくなり、右側にチャットウィンドウだけが表示されるようになります。
これはバグではなく、Galleryモジュールの設定がライブ放送開始前（イベント前）の状態に設定されているためです。Liveモジュールでライブ放送が開始されたことを確認後、Galleryモジュール左上の "Before the event "横の "Change "をクリックすると、"Change what viewers see "ポップアップが表示されます。ライブ "ラジオボタンを選択した後、"続行 "をクリックしてください。
これですべての設定が完了しました。ライブ ストリームの動画プレーヤーが Web サイトに表示され、右側にチャット ウィンドウが表示されるはずです。前項と同様に、チャット ウィンドウの「ゲスト」フィールドにゲスト名（ここでは「Brightcove Guest」と入力）を入力し、サインインしてください。
以下のように、ライブ配信を見ながらチャットメッセージを入力できるようになりました。
In this case, we have used Chatroll and Brightcove Gallery to enable chat during live streaming. In addition to this, there are also other ways to implement chat and surveys, such as using <a href=“https://sendbird.com/” target=“_blank” title=“Sendbird”>Sendbird</a> in the US and <a href=“https://pigeonholelive.com/” target=“_blank” title=“Pigeonhole”>Pigeonhole</a> in Singapore. Please feel free to use these services according to your company’s needs.
