YouTube Data API を使ってUEでコメントを取得する

Youtube LiveのコメントをUEから取得してみます。

サンプルプロジェクトがあります。

全体の流れ

1. UEとGoogle Cloud ConsoleでAPIが使えるようにセットアップ
2. APIリファレンスを参考にUEでリクエストを送信
3. レスポンスのJsonの処理
4. 取得したコメントを使用してリアクションを作成

Unreal Engine側の準備

今回使用したUEのバージョンはUE5.1です。UEの導入や基本的な使い方は省略します。

UEでWeb APIを使用するためにプラグインのVaRestを入れます。RestAPIが手軽に扱えるようになる神プラグインです。

Youtube Data API Keyの取得

Youtube Data APIを使用してYoutube Liveのコメントを取得します。
以下の記事を参考にYoutube Data API v3の有効化とAPI Keyの取得を行います。

Youtube Data API v3の有効化とAPI Keyの取得が出来たら、Data APIが使用できる状態になります。

コメント取得に必要なIDについて

コメントを取得するために必要になる3つのIDを調べていきます。

• channelId：videoIdを取得するために必要
• videoId　：livechatIdを取得するために必要
• livechatId：配信のコメント等の情報を取得するために必要

はじめにAPIリファレンスを参考に必要なリクエストを書き、次にUEのVaRestでどのように実装するかを書いていきます。

Live Streaming APIのリファレンス

channelIdの取得

自分のchannelIdは以下のページの通りに調べることが出来ます。

自分以外のchannelIdが知りたい場合は以下の記事が参考になると思います。
しかし、他人の配信の情報を取得したい場合は、後述する配信のURLからvideoIdを取得する方法の方が楽に出来ます。

videoIdの取得

次にchannelIdから現在行われているライブ配信のvideoIdを調べます。

リクエストURLは次のようになります。********のところにchannelIdとAPI Keyを入れます。

https://www.googleapis.com/youtube/v3/search?eventType=live&part=id&channelId=********&type=video&key=********

このURLをGETメソッド、application/jsonでリクエストを送信します。

レスポンスのJsonは次のような形式で帰ってきます。

{
  "kind": "youtube#searchListResponse",
  "etag": etag,
  "nextPageToken": string,
  "prevPageToken": string,
  "pageInfo": {
    "totalResults": integer,
    "resultsPerPage": integer
  },
  "items": [
    検索リソース
  ]
}

参考ページ https://developers.google.com/youtube/v3/docs/search/list?hl=ja

上記Jsonのitemsの配列にリクエストした内容が入っており、videoIdはitems[0].id.videoIdで取得できます。

BPで書くとこのようになります。

配信URLからvideoIdの取得

また、限定公開のLiveだと取得できない？ようなので、その場合はライブ配信ページのURLの最後の部分をコピーします。

https://www.youtube.com/watch?v=*********
上のURLの*********の部分がvideoIdになります。

この方法ではchannelIdが不要です。

livechatIdの取得

次にvideoIdからliveChatIdを調べます。

リクエストURLは次のようになります。

https://www.googleapis.com/youtube/v3/videos?part=liveStreamingDetails&id=**********&key=************

先ほどと同じように帰ってきたJsonのitemsにリクエストした内容が入っています。
livechatIdはitems[0].liveStreamingDetails.activeLiveChatIdで取得できます。

BPで書くとこのようになります。

配信のチャット情報

ようやくliveChatIdがわかったのでこれでコメントの取得が出来ます。

コメント取得のリクエストURLは次のようになります。

https://youtube.googleapis.com/youtube/v3/liveChat/messages?liveChatId=*******&part=snippet,authorDetails&key=**********

Jsonのitemsからsnippet.textMessageDetails.messageTextでコメントが取得できます。

BPで書くとこのようになります。

また、コメント以外にも様々な情報を取得することが出来ます。

コメントをしたユーザー名を取得
authorDetails.displayName

ユーザーがメンバーシップか判定
snippet.newSponsorDetails.memberLevelName

スーパーチャットの判定
snippet.type

スパチャ額
snippet.superChatDetails.amountDisplayString

など色々情報が取得できるので、スパチャ額や、特定のユーザー、メンバーシップの有無によってリアクションを変えることも可能です。

詳細についてはAPIのリファレンスを確認してください。

最新コメントのみを取得する

上記のやり方では毎回コメントの履歴がたくさん(デフォルトだと最大500件)読み込まれてしまいます。
そのため古いコメントは無視するような処理を追加します。
コメントが打たれた時間はitemsのsnippet.publishedAtで ISO 8601の形式で取得できます。
取得したこの時間と最後に打たれたコメントの時間を比較して、新しいものだけ取得するようにします。

コメントに遅延をつける

コメントの更新と更新の間に追加されたコメントは同じタイミングで取得されてしまうので、前の更新からコメントが追加された時間分遅らせます。

更新したタイミングの時間とコメントが打たれた時間の差分だけ遅延させるようにします。

差分の計算ですが、UEのバグでDate timeの引き算ができないようなので、Timespanに変換して行いました。

コメントを降らせる

降らせなくても良いです。
あくまでも取得したコメントを使用して、なにかリアクションできるという一例なのであまり丁寧に説明はしません。

コメントを更新したタイミングで、アクターを生成して、文字列と遅延させる秒数の情報を渡しています。
生成時に適当なエフェクトを出して、適当なスタティックメッシュのsimulate physicsを有効にして、文字表示するwidget componentをアタッチしています。

適当なスタティックメッシュのVisibleはFalseです。

詳細はサンプルプロジェクトを見てください。

Queries per day

このYouTube Data APIは無制限に使えるわけでななく、１日に使える上限が決まっています。

使用できる上限はCloud consoleの [Quotas] ペインで確認できます。
デフォルトでは10,000が上限です。

更新頻度が高いほどすぐなくなり、上記の処理を1秒ごとに更新していると1時間もかからずなくなってしまします。
長時間使用するのであれば、上限を増やすか、更新頻度を下げるかしましょう。

おまけ UEからコメントを追加

最初に貼った動画中にUEからコメントを追加しています。

これをするためにはOAuth 2.0 認証でアクセスが必須になります。

Youtube Data APIの認証方式は以下の２つがあり、これまではAPI Keyでアクセスしていました。

• API Keyでアクセス
• OAuth 2.0 認証でアクセス

API Keyでアクセスする場合、配信にAPIを使用してコメントを追加する場合などの一部の機能が使用できません。
OAuth 2.0 認証に必要なアクセストークンの取得には、かなり面倒な手順を踏まないと出来ないのでやり方は割愛します。(参考)

アクセストークンが必要なこと以外はこれまでと同じです。
コメント追加のリクエストURLです。

curl --request POST \
  'https://youtube.googleapis.com/youtube/v3/liveChat/messages?part=snippet&key=[YOUR_API_KEY]' \
  --header 'Authorization: Bearer [YOUR_ACCESS_TOKEN]' \
  --header 'Accept: application/json' \
  --header 'Content-Type: application/json' \
  --data '{"snippet":{"liveChatId":"YOUR_LIVE_CHAT_ID","type":"textMessageEvent","textMessageDetails":{"messageText":"Your cool text message goes here!"}}}' \
  --compressed

APIリファレンス https://developers.google.com/youtube/v3/live/docs/liveChatMessages/insert?apix=true

次のようにBPでheaderを追加することが出来ます。また、GETではなくPOSTメソッドであることにも注意してください。

上の画像の続きです。POSTなのでリクエストの中身（この場合はコメントする文字列）を作る必要があります。

BPでJsonを扱うとかなり煩雑になってしまうので、FastAPIなどでプロキシサーバーを作りたくなります。

UIからの入力など詳細についてはサンプルプロジェクトを参考にしてもらえたらと思います。

参考サイト

コメント取得のリクエストURL

１日に使えるAPIの上限について

Youtube Data API のOAuth 2.0 認証