# ライブチャット連係 | JWT

Kollus Liveで提供しているチャット機能のガイド文書です。\
実際チャット機能を適用する場合には弊社の担当窓口と事前に相談してください。

#### ライブ管理画面ログイン / チャット設定 <a href="#id-raibuchattojwt-raiburoguinchatto" id="id-raibuchattojwt-raiburoguinchatto"></a>

<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FlgVhIsQJjZoIgCvRpkXe%2F20241007_026.png?alt=media&#x26;token=1017885b-8f93-49ec-bd45-75db5d0cde85" alt=""><figcaption></figcaption></figure>

* Kollus Live 管理画面([https://live-jp.kollus.com/login](https://live-jp.kollus.com/login))から管理者権限でログイン後、チャンネルリストのチャンネル編集ページに移動します。
*   設定画面から以下の項目を設定してください。\
    \


    <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FD0MDnm6lyTQZgFkcGJQi%2Fimage2021-2-1_17-10-33.png?alt=media&#x26;token=2fb18be3-7c36-456f-8cbe-3dd5cab4bf6e" alt=""><figcaption></figcaption></figure>

    * チャット使用有無: "使用する"に設定
    * 1分間転送可能なメッセージ数の上限
      * 一人のユーザーが1分間転送可能なメッセージの上限値です。ユーザーがスパムや広告を無断に入力する場合などに対処するための機能です。
      * 上限値を超えた場合、入力する側には入力しているように表示されますが実際他のユーザーには表示されません。
      * 管理者はモニタリングページから該当ユーザーを遮断することができます。
    * ユーザー歓迎メッセージ
      * チャットルームに表示される挨拶用のコメントを登録することができます。
    * プロファイルイメージ
      * 表示有無を設定したり、デフォルトプロファイルイメージとしてファイルを登録することができます。

#### JWT生成 <a href="#id-raibuchattojwt-jwt" id="id-raibuchattojwt-jwt"></a>

チャットを利用するためにはJWTベースのURL生成が必須です。詳細な内容は**Developer pageのJWT 及び LIVE Streaming を参考にし、**\
**ライブ管理画面内部のキー(KEY)を使用して生成します。**\


* [サービス連係に使用するキー(Key) VOD | LIVE](https://catenoid-support.gitbook.io/kollus-vod-console-jp/group-1/sbisugaido/sbisunisurukkey-vod-live)

JWT URLは **https://v-live-jp.kollus.com/s?jwt=エンコーディングされたPAYLOAD値\&custom\_key=ユーザーキー** で構成されます。\
以下のサンプルを参考にしてください。

| 区分         | サンプル内容                                                                                                                                                                               |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Custom key | \&custom\_key=FuB...                                                                                                                                                                 |
| Payload    | <p>{<br>"client_user_id": "ユーザー ID",<br>"client_user_name": "ユーザーハンドルネーム",<br>"expire_time": 1607169600,<br>"live_media_channel_key": "mzmd10o9p",<br>"title": "ライブチャットお試し"<br>}</p> |
| URL 시작     | [**https://v-live-jp.kollus.com/s?jwt=**](https://v-live-kr.kollus.com/s?jwt=)                                                                                                       |

#### JWT生成手順 <a href="#id-raibuchattojwt-jwt" id="id-raibuchattojwt-jwt"></a>

[**https://jwt.io/**](https://jwt.io/) **のDebugger**を使用してサンプルURL作成の方法を説明します。\


<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2F1oYVgZp3slmz7RtLfYU7%2F20241007_045.png?alt=media&#x26;token=d3335d6a-b530-4b23-bf9c-a5526608ba2d" alt=""><figcaption></figcaption></figure>

1. **Algorithm**がHS256になっているかを確認します。
2. **Payload**: 既存の内容を消して上記のPayload内容をコピーして入力してください。
   * データを入力すると左側にJWTで変換されたデータが追加されます。&#x20;
   *   live\_media\_channel\_keyはチャンネル編集ページの最上段に記載されています。\
       \


       <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FeklImpUgivYgDs9lw5MN%2F20241007_028.png?alt=media&#x26;token=c17fbeac-f4d5-4a41-8d34-4075447b1a31" alt=""><figcaption></figcaption></figure>
   * expire\_timeにはトークンの有効期限を入力します。UNIXタイムスタンプで変更した数値を入力します。
     * 変換サイトサンプル: [https://url-c.com/tc/](https://url-c.com/tc/)から現時点より先の日付を指定して変換してください。\

3. **VERIFY SIGNATURE:** 既存内容を消してサービスアカウントのセキュリティキーを入力します。
   * セキュリティキーは設定→基本情報→サービスアカウント画面から確認することができます。
   *   データを入力すると左側にJWTで変換されたデータが追加されます。 \
       \


       <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2Fl1qGUBEj599n2yvKkpqH%2F20241007_030.png?alt=media&#x26;token=f1c74c97-edcb-49cf-9a5b-bbf399431021" alt=""><figcaption></figcaption></figure>
4. **debuggerの左側にある "Encoded"**&#x30C7;ータをコピーし、メモ帳などに保存します。&#x20;
5. **JWT URL開始部分と(custom\_key, 設定>基本情報>サービスアカウント→ユーザーキー)**&#x3092;繋げて一つのURLにします。
   *   サンプルの通り生成したJWT URLは以下のようになります。このURLをコピーしてブラウザの検索欄に入力するとライブ+チャットページに移動します。\
       ※サンプルのURLはそのまま使えません。説明に合わせて直接生成してください。\


       ```
       https://v-live-jp.kollus.com/s?jwt=eyJ...&custom_key=67c...
       ```

#### 配信準備 <a href="#id-raibuchattojwt" id="id-raibuchattojwt"></a>

ライブ配信の信号を送出するためにはOBS, vMixなどのエンコーダーが必要です。ここではKOLLUS LIVEと共に提供しているKollus Live Encoderアプリを使用してライブ・チャットを連係した配信テストを行います。\


* アプリケーションをインストールし、Kollus Live管理画面のチャンネル編集ページからCreatorコードとストリームキーを確認します。
  * 詳しくは[ライブエンコーダーアプリ | Kollus Live Encoder](https://catenoid-support.gitbook.io/kollus-live-console-jp/kollus-live-service-guide/raibuenkdapuri-kollus-live-encoder)を参考にしてください。

#### Live + Chat UI <a href="#id-raibuchattojwt-livechatui" id="id-raibuchattojwt-livechatui"></a>

<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FJLqjqf8HQ220eQxvIriJ%2F20241007_031.png?alt=media&#x26;token=5a11b792-a59f-4e20-883d-1229bd4e3e14" alt=""><figcaption></figcaption></figure>

スマートフォンなどのモバイル機器で配信する場合、縦(Portrait)撮影が、カメラなどを使用する場合には横(Landscape)撮影が一般的なやり方です。\
撮影方向に合わせてエンコーディングプロファイルも変わりますので事前に決めておくことを推奨します。\
撮影方向によって、ライブ+チャットのUIは4種類で表示することができます。配信する映像の規格に合うUIを確認してから配信してください。\
以下はサンプルイメージです。

*   縦向き撮影のライブ映像をスマートフォンで視聴する際の画面UI\


    <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FgFJnlphjOafzt4p0VpBB%2Fmobilechat.jpeg?alt=media&#x26;token=a4d5c823-e49c-47cf-90a1-5fb0d8ae00ae" alt=""><figcaption></figcaption></figure>
* 横向き撮影のライブ映像をスマートフォンで視聴する際の画面UI

<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2F3Hp4eFzGixFXcj5Fh3r7%2Fmobilechatlandscape.jpg?alt=media&#x26;token=e6e901ee-2d41-4cbe-b3b8-4255758ba80f" alt=""><figcaption></figcaption></figure>

*   PCで視聴する際の画面UI\


    <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2F5tcgZwqkdA65umZgmeZS%2Fpcchat.jpeg?alt=media&#x26;token=37e9af4c-a398-43fa-8822-3fb27d0440fd" alt=""><figcaption></figcaption></figure>
* 配信途中に撮影方向の転換はできないため、事前に撮影する映像の向きを確認してから配信してください。

#### チャット遮断 <a href="#id-raibuchattojwt-chatto" id="id-raibuchattojwt-chatto"></a>

<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2F8ZyRGOyc3qyUl2igc68q%2Fchatblock.jpeg?alt=media&#x26;token=c951b800-08c6-4937-97bb-1c2791c4f249" alt=""><figcaption></figcaption></figure>

* 管理者遮断
  * 管理者はモニタリングページからチャット内容を確認することができます。
  * チャットを悪用しているユーザーがいる場合、該当ユーザーにカーソルを置くと"遮断"ボタンが表示されます。
  * 遮断確認のメッセージで遮断をクリックすると即時でブロックされ、メッセージを入力することができなくなります。
  * 対象本人に通知はしないため、遮断されたことに気付くことは難しいです。遮断されたことに気付いて更に悪用することを防ぐための仕様となります。
*   ユーザー遮断\


    <figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FICI6qzIk02Uv9OPdQUe6%2Fchatblockuser.jpeg?alt=media&#x26;token=ceb5fdb7-74f5-4dca-870c-74aa3de8648a" alt=""><figcaption></figcaption></figure>

    * チャットルームに参加しているユーザーが同じルームに入っている他のユーザーのメッセージを無視する機能です。
    * 遮断対象には別途通知はされません。
* ユーザー遮断防止
  * 上記のユーザー遮断を禁止することが可能です。（管理者のみ遮断権限を持って配信したい場合）
  * JWT URLの最後に \&disable\_block パラメータを追加して適用することができます。

#### ゲストチャット (Guest mode) <a href="#id-raibuchattojwt-gesutochattoguestmode" id="id-raibuchattojwt-gesutochattoguestmode"></a>

<figure><img src="https://539941970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGLknHERFdINg70IhiAZv%2Fuploads%2FMQ5Dz9rtOHCahnBH9GP1%2Fguestchat.jpeg?alt=media&#x26;token=831d3e8c-a5b5-4bca-a39e-8b2a513f4dd4" alt=""><figcaption></figcaption></figure>

* チャット参加者からハンドルネームを入力し、チャットルームに参加する機能です。
*   JWT URLの最後に **\&anonymous\_chat** パラメータを追加して適用することが可能です。

    ```
    https://v-live-jp.kollus.com/s?jwt=eyJ...&custom_key=67c...&anonymous_chat
    ```

&#x20;           &#x20;
