ライブチャット連係 | JWT

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

ライブ管理画面ログイン / チャット設定

Kollus Live 管理画面(https://live-jp.kollus.com/login)から管理者権限でログイン後、チャンネルリストのチャンネル編集ページに移動します。
設定画面から以下の項目を設定してください。
- チャット使用有無: "使用する"に設定
- 1分間転送可能なメッセージ数の上限
  - 一人のユーザーが1分間転送可能なメッセージの上限値です。ユーザーがスパムや広告を無断に入力する場合などに対処するための機能です。
  - 上限値を超えた場合、入力する側には入力しているように表示されますが実際他のユーザーには表示されません。
  - 管理者はモニタリングページから該当ユーザーを遮断することができます。
- ユーザー歓迎メッセージ
  - チャットルームに表示される挨拶用のコメントを登録することができます。
- プロファイルイメージ
  - 表示有無を設定したり、デフォルトプロファイルイメージとしてファイルを登録することができます。

JWT生成

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

サービス連係に使用するキー(Key) VOD | LIVE

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

区分	サンプル内容

区分	サンプル内容
Custom key	&custom_key=FuBOkYgPHLes-qOVBfYBh8dqIuh6q5Js2K0Pgm1JhF4
Payload	{ "client_user_id": "ユーザー ID", "client_user_name": "ユーザーハンドルネーム", "expire_time": 1607169600, "live_media_channel_key": "mzmd1trn10o9e59p", "title": "ライブチャットお試し" }
URL 시작	https://v-live-jp.kollus.com/s?jwt=

JWT生成手順

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

AlgorithmがHS256になっているかを確認します。
Payload: 既存の内容を消して上記のPayload内容をコピーして入力してください。
- データを入力すると左側にJWTで変換されたデータが追加されます。
- live_media_channel_keyはチャンネル編集ページの最上段に記載されています。
- expire_timeにはトークンの有効期限を入力します。UNIXタイムスタンプで変更した数値を入力します。
  - 変換サイトサンプル: https://url-c.com/tc/から現時点より先の日付を指定して変換してください。
VERIFY SIGNATURE: 既存内容を消してサービスアカウントのセキュリティキーを入力します。
- セキュリティキーは設定→基本情報→サービスアカウント画面から確認することができます。
- データを入力すると左側にJWTで変換されたデータが追加されます。
debuggerの左側にある "Encoded"データをコピーし、メモ帳などに保存します。
JWT URL開始部分と(custom_key, 設定>基本情報>サービスアカウント→ユーザーキー)を繋げて一つのURLにします。
- サンプルの通り生成したJWT URLは以下のようになります。このURLをコピーしてブラウザの検索欄に入力するとライブ+チャットページに移動します。
  ※サンプルのURLはそのまま使えません。説明に合わせて直接生成してください。
  https://v-live-jp.kollus.com/s?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfdXNlcl9pZCI6IuODpuODvOOCtuODvCBJRCIsImNsaWVudF91c2VyX25hbWUiOiLjg6bjg7zj grbjg7zjg4_jg7Pjg4njg6vjg43jg7zjg6AiLCJleHBpcmVfdGltZSI6MTYwNzE2OTYwMCwibGl2ZV9tZWRpYV9jaGFubmVsX2tleSI6Im16bWQxdHJuMTBvOWU1OXAiLCJ0aXRsZSI6IuODqeO CpOODluODgeODo-ODg-ODiOOBiuippuOBlyJ9.RfuK9aMweUBNksTQ9ILksP_pQSgeRWQ5xtqI_wXqYqg&custom_key=67c83fb3fc3ddb004a4b48237358abb0

配信準備

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

アプリケーションをインストールし、Kollus Live管理画面のチャンネル編集ページからCreatorコードとストリームキーを確認します。
- 詳しくはライブエンコーダーアプリ | Kollus Live Encoderを参考にしてください。

Live + Chat UI

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

縦向き撮影のライブ映像をスマートフォンで視聴する際の画面UI
横向き撮影のライブ映像をスマートフォンで視聴する際の画面UI
PCで視聴する際の画面UI
配信途中に撮影方向の転換はできないため、事前に撮影する映像の向きを確認してから配信してください。