Zenn
Open6

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

CSS
Node.js
npm
Windows
OBS
TsubakuraTsubakura


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

💪Motivation

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

💻現時点でやったこと

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

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

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

公式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);
});
TsubakuraTsubakura

FAQ

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

どうやって使うの

  • obs-websocket(OBSプラグイン)をインストールします。
  • 新規フォルダを作り、obs-websocket-jsをインストールします。
  • 上記スクリプトをコピペし、CSSのパス、チャット欄のブラウザソース名、OBSのWebsocketサーバーのアドレスを確認して書き換えてください。
  • コマンドプロンプトで下記コマンドを打つとCSSが反映されます。
$ node {スクリプトのパス}

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

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

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

TsubakuraTsubakura

OBSのブラウザソースにCSSを反映させるやつ2023年版

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)
               // SetBrowserSourcePropertiesは2023年7月現在deplicatedになってるのでSetSourceSettingsに書き換え
               obs.send('SetSourceSettings', {
                   'sourceName': source.name,
                   'sourceType': 'browser_source',
                   'sourceSettings': {
                    '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);
});

YouTube、ツイキャスなどのコメント欄をブラウザソースで直接読み込んでCSSで編集するのは、DOM構造が編集できないのと!important祭りでやや苦行です。
良い子・良い大人は、これらの問題を解決できるコメントジェネレーターわんコメを使いましょう。