Open5

📹OBSのブラウザソースにカスタムCSSを自動で入力・更新したい


配信者です。
OBSのブラウザソースで視聴者の方のコメントを表示しており、コメント欄のデザインをカスタマイズしています。

💪Motivation

  • カスタマイズに必要なCSSは任意のエディタで書きたい
  • エディタで保存したタイミングでOBSの特定のブラウザソースの「カスタムCSS」欄に1ファイルのCSSを全て反映したい
  • 更新された場合、入力したCSSを総入れ替えしたい

💻現時点でやったこと

  • obs-websocketを入れた
  • WSL2でUbuntu20.04LTSが動くようにした
  • エディタはVSCode

obs-websocketはOBSの諸々の操作をNode.jsで出来るようにするOBSプラグイン。
この後obs-websocket.jsというパッケージを使って下記操作をするスクリプトを書いていく。
(ざっくりとしたTODO)

  • OBSのWebsocketサーバーに接続する
  • 読み込みたいCSSファイルを指定する(1つまで)
  • CSSを適用したいブラウザソース名を指定する
  • ブラウザソースのカスタムCSS欄に読み込み対象のCSS全文を入力する
  • 更新ボタンを押す

公式sampleから少し足し引きしたぐらいですが、とりあえずこれで動きます。
requireしているもののうちobs-websocket-jsは、適宜npmかyarn等でパッケージをインストールしてください。

const fs = require('fs');
const OBSWebSocket = require('obs-websocket-js');
const obs = new OBSWebSocket();

const CHAT_SOURCE_NAME = 'チャット欄';
// 編集していきたいCSSのファイルパスを指定する
let text = fs.readFileSync("./sample.css", 'utf8');

obs.connect({
        // obs-websocket側で設定しているアドレスにする。認証かけてる人はpasswordも
        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,
                   'css': text,
               });
           }
       });
       obs.disconnect();
    })
    .catch(err => { // Promise convention dicates you have a catch on every chain.
        console.log(err);
    });

// You must add this handler to avoid uncaught exceptions.
obs.on('error', err => {
    console.error('socket error:', err);
});

FAQ

Node.jsってどうやってインストールするの

どうやって使うの

  • obs-websocket(OBSプラグイン)をインストールします。
  • 新規フォルダを作り、obs-websocket-jsをインストールします。
    • インストール方法はこちら: https://github.com/haganbmj/obs-websocket-js
    • ※WSLでNode.js環境を構築した場合、install系のコマンドの前にはsudoが必要になります。
  • 上記スクリプトをコピペし、CSSのパス、チャット欄のブラウザソース名、OBSのWebsocketサーバーのアドレスを確認して書き換えてください。
  • コマンドプロンプトで下記コマンドを打つとCSSが反映されます。
$ node {スクリプトのパス}

localhostじゃCONNECTION_ERRORが出て動かないよ

  • ローカルIPアドレスを調べて設定しましょう。Windowsだとコマンドプロンプトでipconfigと打って192.168.xx.xxとなっているのがそれです。

あんまり元のソースコードをいじりたくない人向けに、プロジェクト整理して近日GitHubでも公開します。
黒い画面本当にこわいよ!という人向けにElectron(デスクトップアプリケーション)版も作るかも。

ログインするとコメントできます