動画配信用ガジェット集

概要

コメントビューアを始めとする、動画配信の際に便利なガジェットを描画するアプリケーションです。 HTML を使って描画するので、OBS Studio などの HTML を表示できる配信ソフトとともに利用することができます。

使い方

このリポジトリをクローンして、以下を実行してください。

npm run build
npm start

後で述べる設定ファイルの形式に従って JSON ファイル (と CSS ファイル) を用意しておき、以下の URL にアクセスしてください。なお、URL 中の設定ファイルのパスは URL エンコードする必要があります。

http://localhost:8051/?path=(設定ファイルの絶対パス)

デフォルトでは、上記の URL から返される HTML にはほとんど全くスタイルが指定されていません。 HTML の各要素にはクラスが適宜指定されているので、これを利用して好みの見た目になるように各自で CSS ファイルを用意してください。用意した CSS ファイルは、設定ファイルから指定することで自動的に読み込まれるようになります。

設定ファイルの形式

以下は設定ファイルの例です。コメントを参照して適切に書き換えて使用してください。なお、以下では説明のためにコメントを追加していますが、実際の設定ファイルではコメントは利用することができません (構文エラーになります)。

{
  // 描画するガジェットの設定
  // 不要なガジェットがある場合は配列の要素から削除すれば描画されません
  "gadgets": [
    // コメントビューア
    {
      "name": "commentViewer",
      // コメントを取得する配信プラットフォーム
      // 不要なものは配列から削除してください
      "platforms": [
        // YouTube Live
        {
          "name": "youtube",
          "key": "*****",  // YouTube Data API のキー
          "videoId": "*****",  // 配信のビデオ ID
          "interval": 5000  // 更新間隔 (ミリ秒)
        },
        // ツイキャス
        {
          "name": "twitcasting",
          "key": "*****",  // ツイキャス APIv2 のクライアント ID
          "secret": "*****",  // ツイキャス APIv2 のクライアントシークレット
          "userId": "ziphil",  // ユーザー ID
          "interval": 5000  // 更新間隔 (ミリ秒)
        },
        // Discord
        {
          "name": "discord",
          "key": "*****",  // Discord bot のトークン
          "channelId": "*****",  // コメントを取得するチャンネル ID
          "firstMessage": "コメント取得を開始します",  // コメント取得開始時の投稿メッセージ (省略可)
          "ignorePrefix": ";",  // この文字から始まる投稿が無視される (省略可)
          "interval": 5000  // 更新間隔 (ミリ秒)
        },
        // 描画テスト用のダミープラットフォーム
        {
          "name": "dummy",
          "interval": 5000  // 更新間隔 (ミリ秒)
        }
      ]
    },
    // 辞書の単語数表示
    {
      "name": "wordCounter",
      "path": "*****",  // ディレクトリ名 (絶対パス)
      "interval": 10000  // 更新間隔 (ミリ秒)
    }
  ],
  "cssPath": "*****.css"  // CSS ファイル名 (絶対パス)
}

Ziphil/StreamingGadgets

動画配信用ガジェット集

概要

使い方

設定ファイルの形式

参考文献