Stream Tools Index

• Chat Subscriber(複数の配信チャットを表示): こちら
• Discord Connector(Discord のいろいろ): こちら
  ※ このソフトはDiscord の Beta APIを利用しています

---

chat_subscriber

Description

Youtube や Twitch などの複数を同時に表示 Emoji/Emote や投げ銭にも対応

How To Use

• User like : Open URL in Browser
• Streamer like : Browser Source in OBS (Recommended CSS is written below)

Example URL:

• https://live.aatomu.work/?youtube=<Youtube Channel ID>
• https://live.aatomu.work/?twitch=<Twitch Channel ID>
• https://live.aatomu.work/?youtube=<Youtube Channel ID>&twitch=<Twitch Channel ID>&limit=10
• https://live.aatomu.work/?youtube=<Youtube Channel ID>&limit=10?cleanup=120

Supported Live Chat

Key	Value Type	Description	Example
youtube	string	Youtube Live Channel	youtube=@ProjectCBW
watch	string	Youtube Video ID	watch=xxxxxxx
twitch	string	Twitch Live Channel	twitch=ProjectCBW
niconico	string	Niconico Live Channel	niconico=xxxxx
twicas	string	Twicas Live Channel	twicas=xxxxx
openrec	string	OpenRec Live Channel	openrec=xxxxx

Supported Options

Key	Value Type	Description	Example	Default
limit	number	Display Limit	limit=10	20
cleanup	number	Cleanup Delay(Second)	cleanup=10
tip	number,number,number	Tip Message Read Config index,rate,volume *Required enable button click	tip=0,1,1
message	number,number,number	Normal Message Read Config index,rate,volume *Required enable button click	message=0,1,1

OBS Custom CSS:

body {
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

Supported Message,Event List

Site	Message	Emoji/Emote	Tip
Youtube	✅	✅	✅
Twitch	✅	✅	🔺
Niconico	✅		❌
Twicas	✅		❌
OpenREC	✅	❌	❌

Contents HTML Tree

• Normal Chat

<div class="contents">
  <div class="content {Site}">
    <span class="time">00:00:00</span>
    <div class="icon">
      <img src="..." />
    </div>
    <span class="name">...</span>
    <div class="message-root">
      <span class="message">...</span>
      <span class="channel">...</span>
    </div>
  </div>
</div>

• Tip Chat

<div class="contents">
  <div class="content {Site}">
    <span class="time">00:00:00</span>
    <div class="icon">
      <img src="..." />
    </div>
    <span class="name">...</span>
    <div class="message-root">
      <span class="message">
        <span class="money" style="color: #000000;background-color: #000000;">$0.00</span>
        ...
      </span>
      <span class="channel">...</span>
    </div>
  </div>
</div>

Screen Shot

• Youtube * Twitch cross chat
  
• Twitch multi chat
  

Credit

※ クレジット表記をしていただけると開発者が喜びます。
例: Chat Subscriber(https://github.com/aatomu/chat_subscriber/#chat_subscriber) を利用しています

Developers

Name	Products
aatomu(@aatomu)	Front: HTML,Javascript,CSS Background:Typescript
らる(@rarula)	Background: Typescript(Refactoring)
椛野りあ(@KuoN_aLia)	Front: CSS(Design)

Special Thanks

Name	Products
ProjectCBW(@ProjectCBW)	Youtube/Twitch live test
Project CBW Listeners	Message view test, Design layout check
しぐりむん(@shiglimnn)	Multi Twitch live test

---

discord_connector

Description

• Discord の VC を移動しても自動で追いかけるように
• VC の名前を表示する,Discord ニトロの装飾を表示
• Advanced: Discord の Text を表示する
• Advanced: Discord のプロフィールをカスタマイズする

How To Use

初回設定

1. DiscordConnector-Win64.exe を開く
   Raw の 2 つ右のアイコン 📥 をクリックしダウンロード(以下DiscordConnector)
   
   デスクトップ等にDiscordConnectorをファイルを移動する
   DiscordConnectorをダブルクリックし起動する(この際 ファイアウォールを許可する)
2. Discord Develop Applications を開く
3. New Applicationsをクリックする
   
   NameにConnectorと入力する
   利用規約に同意しCreateする
   
   
4. https://live.aatomu.work/discord/?id=➀&secret=➁
   上記をコピーし メモ帳などに貼り付ける
5. サイドバーのOauth2をクリックする
   
   
6. Client IDをCopyを押し ➀ を書き換える
7. Client SecretのところのReset Secretを押し
   (※この際 2FA が入る場合があります)
   表示されたCopyを押し ➁ を書き換える
8. RedirectsのAdd Redirectsを押し
   https://live.aatomu.workを入力した後
   Save Changesする
9. 書き換え終わった URL をOBSのブラウザソースの URL に設定する
   (※配信をしない人は飛ばしてください)
10. Discord に表示される認証で認証を押す

Advanced: Text Channel を表示

1. 上記で作成したリンクのあとに&channel=<ChannelID>を追加し開くだけ

Advanced: プロフィールを書き換える

1. サイドバーのRich Presenceを開き
   Add Image(s)で画像を追加,名前を設定し
   Save Changesする
   
   
2. activity.json をダウンロード
   DiscordConnector と同じところに置く
   中身を好きなように書き換える
3. ブラウザーでリンクを開きなおす
   ※毎回 開きっぱなしにする必要があります

二回目以降の起動方法

1. Discord-Connector の exe を実行する
2. OBS を起動する
   Discord に認証画面が表示されるので、認証を押す

上記手順を自動化する方法

1. Discord-Connector の exe へのショートカットを作成する。
2. Windows+R を押し、出てきた画面に shell:startup と入力する
3. 開いた場所に、ショートカットを移動する。 PC 起動時に自動的に exe が実行されるため、起動忘れがなくなります！

OBS Custom CSS:
※ さらにカスタムするときはこちら Discord CSS Generator

body {
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}
.channel {
  display: none;
}

Contents HTML Tree

<div id="errors" class="error">...</div>
<div id="root" class="root">
  <div id="channel" class="channel">XXXXXX</div>
  <div id="users" class="users">
    <div id="0000000" class="user me">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <span class="nick">....</span>
      <span class="name">....</span>
    </div>
    <div id="111111111" class="user">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <img class="decoration" src="https://cdn.discordapp.com/...." />
      <span class="nick">....</span>
      <span class="name">....</span>
    </div>
  </div>
  <div id="messages" class="messages">
    <div class="message">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <span class="nick" style="color: rgb(153, 255, 102);">....</span>
      <span class="name" style="color: rgb(153, 255, 102);">....</span>
      <time class="timestamp" datetime="2024-00-00T00:00:00.000Z">00:00</time>
      <span class="content">....</span>
    </div>
  </div>
</div>

Credit

※ クレジット表記をしていただけると開発者が喜びます。
例: DiscordConnector(https://github.com/aatomu/chat_subscriber/#discord_connector) を利用しています

Developers

Name	Products
aatomu(@aatomu)	Front: HTML,Javascript,CSS Background:Golang
椛野りあ(@KuoN_aLia)	Front: CSS(Design)

Special Thanks

Name	Products
RinProducts(@RinProducts)	README review & Screenshot provider