OBSのYouTubeライブチャット欄のURLを自動で更新する

こんにちみんみん！バーチャル幼女プログラマーのきりみんちゃんです。

OBSでYouTubeのライブ配信する時、チャット欄を画面に表示させることが多いですよね。
詳細は割愛しますが「OBSのブラウザソースでYouTubeのチャット欄のURLを入力して表示させる」という方法がメジャーだと思います。

ただ、このURLには配信動画のVideoIdが含まれているために、毎回手動で更新するのが面倒なんですよね。

そこで、YouTube APIから自動で最新のLive配信のVideoIdを取得してチャット欄のURLを差し替えるというスクリプトを作ってみました。

実装

node.jsでOBSを操作する

コードからOBSを操作する方法については別エントリとして書きました。

これを使ってやっていきます。

YouTube Data APIからデータを取得する

YouTube Data APIを愚直に利用します。
今のYouTube APIはprojectを登録して認証を行わないと検索APIなどにもアクセスすることが出来ないし結構リミットも厳しいのでわりと面倒だし出来ることも限られています。。。

配信のVideoIDを取得する部分は今後ほかのプロジェクトでも使いそうなので、node moduleとしてGitHubでライブラリにしてみました。

kirimin/get_youtube_current_streaming

これらを利用して以下のようなスクリプトを書きました。​

const OBSWebSocket = require('obs-websocket-js');
const getStreaming = require('get_current_streaming');
const CREDENSIALS = require('./credentials/credensials.js')

const CHANNNEL_ID = "UCqN87Ye4TNLB04EFhxJ0L5w"
const CHAT_SOURCE_NAME = "チャット欄"
const LIVE_STATUS = "upcoming"

getStreaming.getVideoId(CREDENSIALS, CHANNNEL_ID, LIVE_STATUS, callback)

function callback(videoId) {
   console.log(videoId)
   const obs = new OBSWebSocket();
   obs.connect({address: 'localhost:4444'})
   .then(() => {
       console.log(`Success! We're connected & authenticated.`);
       return obs.send('GetCurrentScene');
   })
   .then(data => {
       data.sources.forEach(source => {
           if (source.name === CHAT_SOURCE_NAME) {
               console.log(source)
               obs.send('SetBrowserSourceProperties', {
                   'source': source.name,
                   'url': `https://www.youtube.com/live_chat?is_popout=1&v=${videoId}`
               });
           }
       });
       obs.disconnect();
   })
   .catch(err => {
       console.log(err);
   });

   obs.on('error', err => {
       console.error('socket error:', err);
   });
}

これを実行すると自動でチャット欄のソースのURLを書き換えてくれるようになりました。便利！