じみなブログ

検索しても見当たらないゲームや配信についてのtipsを書き留めておく場所

Twitch APIで取得した情報をOBSで表示する

最近はまたTwitchを使うようになって、

「配信開始からの経過時間とか、視聴者数とか、ゲームタイトルを配信画面内にも入れられないだろうか。」と、なんとなく思っていたんですが。

視聴者数についてはStreamlabsのウィジェットがあります。(あんまり利用しない方がいいようですが…)

特定のチャンネルの配信情報を文字列として取得するにはTwitch APIを利用する方法があるんですが、OBSに取り込む方法を考えようとするとこれまではなかなか手が出なかったわけです。

ところがつい最近になってこのようなプラグインが出ているのを発見しました

obsproject.com

簡単に説明するとAPIにリクエストして帰ってくる内容をOBSにソースとして表示するものです。まだ出たばかりなので日本語で解説しているページがない。

とりあえず自分がやってみたことを記録しておきます。

まずは、APIでチャンネル情報を取得する方法を調べます

https://dev.twitch.tv/docs/api/reference/#get-channel-information

curl -X GET 'https://api.twitch.tv/helix/channels?broadcaster_id=141981764' \
-H 'Authorization: Bearer 2gbdx6oar67tqtcmt49t3wpcgycthx' \
-H 'Client-Id: wbmytr93xzw8zbg0p1izqyzzc5mbiz'

↑ここで事前に必要になるのが

・配信者ID

・アクセストーク

・クライアントID

の3つです。

以下の記事を見てやりました。

qiita.com

qiita.com

qiita.com

Windows10以降のコマンドプロンプトでは標準でcurlコマンドが使えるんですが、

¥ は ^ に、' は " に置き換える必要があります。

準備できたらOBSでURL Sourceを追加します

Setup request→

で、返ってくるデータは以下のようになってるんですが

{
  "data": [
    {
      "broadcaster_id": "141981764",
      "broadcaster_login": "twitchdev",
      "broadcaster_name": "TwitchDev",
      "broadcaster_language": "en",
      "game_id": "509670",
      "game_name": "Science & Technology",
      "title": "TwitchDev Monthly Update // May 6, 2021",
      "delay": 0,
      "tags": ["DevsInTheKnow"],
      "content_classification_labels": ["Gambling", "DrugsIntoxication", "MatureGame"],
      "is_branded_content": false
    }
  ]
}

この中から目的の項目を取り出したいわけです。

今回はゲームタイトルを取ります

JSON Pointerの欄に/data/0/game_name と書きましたがこれは

dataとして返ってきた配列の最初の項目内にあるgame_nameの値を指しているわけですね。

この例だと一個しか無いのになんでdataが配列の形式なのか最初よくわかんなかったけど、複数の配信者の情報を一度にリクエストできるかららしいです。

Test requestを押して間違いがなければこのようになります(ちょっとでも間違っていると赤字でエラーが出ます)(スクショは僕の例なのでTwitch公式のAPIヘルプとは違っています)

このソースだけでも表示可能ですが、別途テキストソースを用意してその内容をここで取得した文字列に置き換える、という事もできます(現在バグ多めなのであまりおすすめしません)。

問題として、シーンコレクションなど切り替えた際に表示がバグります。ソースのプロパティを開いて何らかの変更を(例:アップデートタイマーの数字を変えて戻す、cssに何か書いてすぐ消すなど)すると直ります。バグってる状態で配信情報を変更したとしても反映されません。

(↑ v0.1.0で直っています。また配信情報更新への反応やテキストソースとの連携が完全に安定しているのでオススメ)

(↑ v0.1.2まで出ていますが最新バージョンにするとHeaderに設定した箇所が吹っ飛んだ上に入れ直してもClient-IDがmissingだよとか言われてしまうので0.1.0に戻しました)

今回はここまで試しましたがいずれ他にもこのプラグイン使ってやってみようと思います。というか割りと忙しいはずなのにしょうもないことに時間を浪費してしまった…