指南

瞭解如何設定、自訂並充分運用Social Stream Ninja

聊天來源 YouTube、Twitch、TikTok及另外100多個平台
Social Stream Ninja 擴充功能或桌面應用程式將所有聊天合併到一個工作階段中
停駐面板 管理、展示和回覆
OBS疊加畫面 在直播中展示精選聊天和提醒

一個工作階段ID連接所有部分:請使用相同的 ?session= 值,用於停駐面板和疊加畫面URL。

尋找指南

搜尋或開啟一個類別。如果只是想在螢幕上顯示聊天,請從OBS開始。

從這裡開始 安裝、連接聊天、加入OBS疊加畫面
管理直播停駐面板操作、內容管理、轉送和參與互動
疊加畫面與自訂 範本、樣式選項、字型和事件
自動化與整合 API、指令、Event Flow、Webhook
AI與文字轉語音 語音搭檔、瀏覽器助理、機器人、本機模型、文字轉語音
平台指南 TikTok、YouTube、Twitch、Kick、支援的網站
疑難排解與支援 聊天遺漏、疊加畫面空白及深入支援文件

找不到符合的指南。

詳細指南章節 完整的逐步指南內文。如果只需要目錄,可將其收合。

入門(瀏覽器擴充功能)

1. 安裝

使用Social Stream Ninja前需要先安裝。瀏覽器擴充功能有多種安裝方式:

  • 手動安裝(建議): 若要使用最新版本,請在開發人員模式中手動安裝。
  • Chrome線上應用程式商店: 透過Chrome線上應用程式商店安裝,設定最為簡單。

詳細安裝說明請造訪 下載頁面.

2. 基本設定

安裝後,請依下列步驟開始使用Social Stream Ninja:

  1. 在瀏覽器中開啟直播平台的聊天(如果支援,也可使用彈出聊天功能)
  2. 點選瀏覽器工具列中的Social Stream Ninja擴充功能圖示
  3. 點選「Enable Extension」啟用擴充功能(圖示應變為綠色)
  4. 開啟擴充功能彈出選單提供的「Dashboard Link」
  5. 在OBS中將「Overlay Link」作為瀏覽器來源開啟

注意: 為獲得最佳體驗,使用瀏覽器擴充功能時,請讓聊天視窗保持可見,不要最小化。

3. 連接不同平台

Social Stream Ninja支援100多個平台。以下是連接常用平台的方法:

YouTube

  • 開啟YouTube直播聊天
  • 點選右上角的「Pop out chat」按鈕
  • 確認Social Stream Ninja擴充功能已啟用(綠色圖示)

Twitch

  • 開啟您頻道的Twitch聊天
  • 點選齒輪圖示並選擇「Pop out chat」
  • 確認Social Stream Ninja擴充功能已啟用(綠色圖示)

Facebook

  • 開啟您的Facebook直播(以觀眾或發佈者身分)
  • 確認使用Wi-Fi或乙太網路連線,而不是行動數據
  • 確認Social Stream Ninja擴充功能已啟用(綠色圖示)

Discord、Slack、WhatsApp等。

  • 首先,在擴充功能設定中啟用這些平台(切換開關)
  • 在瀏覽器中開啟這些平台的網頁版
  • 確認Social Stream Ninja擴充功能已啟用(綠色圖示)

自訂(瀏覽器擴充功能)

URL參數

透過在URL中加入參數,可以自訂儀表板和疊加畫面。例如:

儀表板參數:

&darkmode - 為儀表板啟用深色模式
&scale=2 - 將所有元素的大小和解析度加倍
&hidesource - 隱藏平台圖示(YouTube、Twitch等)
&compact - 移除姓名和訊息之間的間距
&inline - 將訊息排在姓名旁邊,同時保留正常間距
&autoshow - 自動展示新收到的訊息(約每3秒2則)

疊加畫面參數:

&showtime=20000 - 20秒後自動隱藏所選訊息
&showsource - 在使用者名稱旁顯示平台圖示
&fade - 讓精選訊息淡入,而不是突然出現
&swipe - 讓精選訊息從左側滑入
¢er - 將精選訊息放在畫面中央

若要更輕鬆地管理URL,請試用我們的 URL參數編輯工具.

CSS自訂

有多種方式可以使用CSS自訂外觀:

方法1:OBS瀏覽器來源CSS

在OBS中,可以為瀏覽器來源加入自訂CSS:

  1. 將疊加畫面作為瀏覽器來源加入OBS
  2. 勾選「Custom CSS」選項
  3. 在文字方塊中輸入自訂CSS
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root {
    --comment-color: #090;
    --comment-bg-color: #DDD;
    --comment-border-radius: 10px;
    --comment-font-size: 30px;
    --author-border-radius: 10px;
    --author-bg-color: #FF0000;
    --author-avatar-border-color: #FF0000;
    --author-font-size: 32px;
    --author-color: blue;
    --font-family: "Arial", sans-serif;
}

.hl-name {
    padding: 2px 10px !important;
}

方法2:擴充功能選單設定

透過擴充功能選單直接加入CSS:

  1. 點選Social Stream Ninja擴充功能圖示
  2. 找到CSS/JavaScript設定區段
  3. 輸入自訂CSS或JavaScript
  4. CSS將作為base64編碼的資料附加到URL

方法3:使用自訂範本

選擇內建CSS樣式的範本:

  • 瀏覽我們的 範本庫
  • 選擇符合直播風格的範本
  • 替換 YOURSESSIONID ,將範本URL中的該值替換為您的工作階段ID
  • 將範本URL作為瀏覽器來源加入OBS

範例: https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

為聊天姓名設定不同顏色

姓名顏色需要兩項設定:首先,在以下位置設定通用顏色來源: 訊息 - 樣式(Message - Styling) 以及以下位置的停駐面板顯示開關: 訊息 - 可見性(Message - Visibility).

開啟聊天姓名顏色指南 ,其中包含螢幕截圖、色彩選擇、疑難排解和CSS範例。

自行代管字型與樣式

將自己的字型用於 dock.html 或 featured.html 而不需依賴Google或系統字型。

  • 代管您的.woff2/.ttf/.otf檔案,並透過以下方式載入: @font-face.
  • 透過OBS的自訂CSS或以下URL參數套用CSS: &css=, &b64css=, &font=,或 &googlefont=.
  • 在Chrome擴充功能、Electron應用程式和代管頁面中的運作方式相同。

開啟自行代管字型指南 ,其中包含逐步代管說明和CSS範例。

進階功能(瀏覽器擴充功能)

文字轉語音

Social Stream Ninja可以使用文字轉語音技術朗讀聊天訊息:

設定文字轉語音:

  1. 新增 &speech=en-US 到featured.html或dock.html的URL
  2. 對於其他語言,請選擇支援該語言的提供者和聲音。例如,葡萄牙語可使用Piper &pipervoice=pt_BR-faber-medium 或eSpeak &espeakvoice=pt-br,而西班牙語可以使用Piper &pipervoice=es_ES-davefx-medium 或eSpeak &espeakvoice=es.
  3. 使用以下參數自訂語音設定: &pitch=1&volume=1&rate=1

免費的本機文字轉語音選項(不需API金鑰):

  • Kokoro TTS: 瀏覽器內建AI,效果出色 — &ttsprovider=kokoro
  • Piper TTS: 快速、輕量的神經網路文字轉語音 — &ttsprovider=piper
  • eSpeak-NG: 輕量級的語言備用方案,包括葡萄牙語 &espeakvoice=pt-br 以及西班牙語 &espeakvoice=es
  • Kitten TTS: 占用最小,僅需CPU — &ttsprovider=kitten
  • 自行代管的伺服器: 透過Docker在本機執行Kokoro-FastAPI或openedai-speech — &ttsprovider=openai&openaiendpoint=http://localhost:8880/v1/audio/speech

優質雲端文字轉語音選項:

  • Google Cloud TTS: 專業級聲音(需要Google API金鑰)
  • ElevenLabs: 超逼真聲音,支援自訂聲音訓練
  • Speechify: 自然的優質聲音

希望在本機執行並保護隱私? 請參閱 本機 AI TTS 指南 ,其中包含完整設定說明,包括自行代管伺服器選項和OBS音訊擷取。

AI搭檔、聊天機器人和瀏覽器助理

Social Stream Ninja可以用多種方式使用AI。請先選擇工作流程,再選擇提供者。

  • 語音搭檔: 透過麥克風交談,同時讓即時聊天提問進入同一個搭檔工作階段。
  • ChatGPT瀏覽器助理: 擷取聊天,或透過實驗性功能將聊天轉送到已開啟的 chatgpt.com 分頁,不需API金鑰。
  • 主要聊天機器人: 在疊加畫面中、透過文字轉語音或在支援的聊天中回覆選取的觀眾。
  • 處理工具: 內容管理、翻譯、摘要、RAG知識搜尋和AI建立的疊加畫面。

選擇AI設定

訊息排隊與置頂

安排訊息在疊加畫面中的顯示方式:

訊息排隊:

  1. 按住CTRL(Mac上為Cmd)並點選儀表板中的訊息
  2. 點選「Next in Queue」按鈕,逐則顯示訊息
  3. 訊息將依排隊順序出現在疊加畫面中

置頂訊息:

  1. 按住ALT並點選儀表板中的訊息
  2. 訊息將保持置頂在儀表板頂端
  3. 若要取消置頂,請按住ALT並再次點選已置頂訊息

直播事件擷取

從直播平台擷取新追隨、訂閱、揪團和贊助等非聊天事件。

啟用方法:

  1. 點選Social Stream Ninja擴充功能圖示
  2. 找到 「擷取直播事件」(Capture Stream Events) 設定中的開關
  3. 啟用後即可開始接收提醒

注意: 贊助類事件(Super Chat、Bits、贊助)會自動轉送,不受此開關影響。此開關主要控制追隨和訂閱提醒。

各平台可擷取的事件:

YouTube

  • 新會員和贈送會員
  • 會員升級和里程碑
  • Super Chat和Super Sticker贊助
  • 訂閱人數和觀眾人數

Twitch

  • 新訂閱、續訂和贈送訂閱
  • 追隨者和追隨人數
  • Bits/Cheer和頻道點數兌換
  • 揪團及觀眾人數

TikTok、Kick及其他平台

  • 追隨者和禮物(TikTok)
  • 訂閱和贊助(Kick)
  • 大多數平台的觀眾人數

有關完整的事件酬載和資料欄位清單,請參閱 事件參考 文件。

Hype Train頂端列

在OBS中以Twitch風格的頂端列顯示Hype Train和Treasure Train的進度。

  • 從彈出選單複製專用的Hype Train Top Bar連結。
  • 正式直播前,使用Fake Hype Train按鈕進行測試。
  • 請參閱指南中的設定步驟、螢幕截圖和疑難排解。

開啟Hype Train頂端列指南

首次發言者

醒目顯示首次發言者,加入選用的葉子徽章,或只在首次發言時播放停駐面板提示音。

  • 保持本機訊息資料庫啟用。
  • 開啟首次發言者偵測。
  • 選擇適合疊加畫面的醒目提示、徽章和提示音選項。

開啟首次發言者指南

Event Flow 編輯器

Event Flow編輯器是強大的節點式自動化系統,可用於建立自訂工作流程。它提供進階自動化功能,讓您編寫自己的路由邏輯。

可以做什麼:

  • 在平台之間轉送聊天 透過智慧篩選(例如將Twitch轉送到Discord,但封鎖指令)
  • 建立自訂指令 透過AND/OR/NOT邏輯閘
  • 觸發疊加畫面和音訊 根據指定事件或關鍵字
  • 控制OBS 自動控制場景和來源
  • 建立抽獎和贈獎活動 並管理佇列

入門:

  1. 從主儀表板選單開啟Event Flow編輯器
  2. 建立新流程並加入來源節點(如「Twitch Message」)
  3. 連接邏輯節點以篩選訊息(Contains Keyword、User Role等)
  4. 加入回應的動作節點(Send Chat、Play Audio、Display Overlay)
  5. 正式直播前,使用內建模擬器進行測試

Flow Actions疊加畫面:

若要讓音訊、媒體疊加畫面和OBS動作生效,需要將Flow Actions頁面作為瀏覽器來源加入OBS:

  1. 在彈出選單中找到「Flow Actions」區段並複製URL
  2. 在OBS中將其加入為瀏覽器來源(建議1920×1080)
  3. 保持疊加畫面開啟(可以隱藏,但不要關閉)

重要: 目前的Relay Chat動作會自動略過辨識出的回流訊息。請使用 回流篩選器(Reflection Filter) 節點來控制擷取的回流訊息是否出現在停駐面板和疊加畫面中。請參閱 聊天轉送教學 以完成設定。詳細文件請參閱 Event Flow 指南。Kick獎勵的音效或媒體請使用 Kick頻道點數/獎勵指南.

MIDI 與快速鍵控制

透過Stream Deck、MIDI控制器或鍵盤快速鍵直接控制Social Stream Ninja。

設定MIDI:

  1. 連接MIDI裝置(Stream Deck、MIDI控制器等)
  2. 開啟Social Stream Ninja彈出選單
  3. 找到MIDI設定區段
  4. 從下拉選單中選擇MIDI裝置
  5. 將MIDI音符對應到指定動作

可用動作:

  • 觸發自訂疊加畫面和媒體
  • 傳送預設聊天訊息
  • 切換OBS場景
  • 播放音訊片段或文字轉語音
  • 執行Event Flow觸發器

提示: MIDI非常適合免手操作直播。您可以用腳踏開關觸發提醒,或用旋鈕調整音量。

機器人指令與自動回覆

為聊天建立互動式機器人指令和自動回覆。

內建指令:

  • !joke - 傳送一則隨機的科技冷笑話
  • !hi - 自動問候觀眾
  • !cycle - 允許觀眾切換OBS場景(需要權限)

設定自動回覆:

  1. 開啟擴充功能彈出選單並找到Bot/Auto-Response區段
  2. 啟用需要的指令
  3. 保持聊天視窗可見,不要最小化,才能讓回覆生效
  4. 確認已登入平台並具有發言權限

建立自訂指令:

對於更複雜的指令,請使用Event Flow編輯器:

  1. 建立一個使用Message來源的新流程
  2. 加入「Contains Keyword」節點來偵測指令(如「!social」)
  3. 連接一個「Send Chat」動作並填寫回覆
  4. 可加入User Role篩選器,將指令限制為僅管理員可用

需求: 自動回覆在Chromium瀏覽器中效果最佳。聊天視窗必須保持可見,而且您必須具有在該平台發言的權限。

Webhook與整合

連接外部贊助平台,在直播疊加畫面中顯示贊助和購買。

必要條件:

  1. 記下擴充功能彈出選單中的工作階段ID
  2. 保持Social Stream Ninja啟用
  3. 位於 Global settings and tools → Mechanics,啟用 擴充功能的遠端 API 控制
  4. 使用正常產生的停駐面板和疊加畫面連結;不要加入 &server, &server2,或 &server3 用於贊助Webhook
  5. 如果停駐面板已經開啟,請重新載入一次
只需啟用一個API開關: 遠端API控制允許背景指令碼標準化贊助Webhook,並像一般訊息一樣傳遞。其他API傳輸開關可以保持關閉。

標準化後的贊助會共用給聊天、提醒、Event Flow,以及贊助罐/目標進度條。

啟用遠端API控制,同時保持其他API傳輸開關關閉

支援的平台:

平台 Webhook URL 事件類型
Stripe https://io.socialstream.ninja/{sessionID}/stripe checkout.session.completed
Ko-Fi https://io.socialstream.ninja/{sessionID}/kofi 公開贊助、會員、商店訂單和委託
Buy Me A Coffee https://io.socialstream.ninja/{sessionID}/bmac 贊助、會員、商店訂單、委託和願望清單募款
Fourthwall https://io.socialstream.ninja/{sessionID}/fourthwall 訂單、禮物、贊助和新訂閱

Stripe設定:

  1. 建立一個 Stripe付款連結
  2. 重要: 為付款連結加入自訂欄位:
    • 顯示名稱 或 使用者名稱 (必填)- 缺少此欄位會拒絕贊助
    • 訊息 (選填)- 允許贊助者留言
  3. 前往 Stripe Webhooks 並建立新的端點
  4. 將URL設定為: https://io.socialstream.ninja/YOUR_SESSION_ID/stripe
  5. 選擇事件: checkout.session.completed
  6. 不需簽章驗證(請改為保密工作階段ID)

測試: 使用Stripe測試模式,卡號為 4242 4242 4242 4242、任意未來到期日期和任意CVC。

創作者商店設定

使用 圖文設定指南 適用於Fourthwall、Ko-fi和Buy Me a Coffee,包括接收狀態、獨立預覽和商品匯入。

安全提示: 請勿公開工作階段ID。任何擁有該ID的人都可以向您的疊加畫面傳送虛假的贊助事件。

透過Webhook匯出聊天:

您也可以將聊天資料匯出到外部服務:

  • 在設定中配置傳出Webhook URL
  • 聊天訊息以包含JSON酬載的POST請求傳送
  • 使用此功能記錄聊天、觸發外部自動化或與其他工具同步

疑難排解(瀏覽器擴充功能)

瀏覽器擴充功能常見問題的解決方法

視窗最小化問題

背景或最小化時聊天停止

瀏覽器視窗處於背景或最小化時,聊天訊息不再出現。這是因為瀏覽器會限制背景分頁以節省資源。

停用瀏覽器執行頻率限制
  • Chrome/Edge/Brave:
    1. 開啟 chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes
    2. 設定為「Disabled」
    3. 同時停用 chrome://flags/#calculate-native-win-occlusion
    4. 重新啟動瀏覽器
  • 停用效能限制:
    1. 前往 chrome://settings/performance
    2. 停用「Throttle Javascript timers in background」
其他方法
  • 保持視窗可見: 調整視窗位置,避免最小化;即使只露出一小部分,也可能防止瀏覽器限制執行頻率。
  • 使用虛擬桌面: 在Windows中,使用Win+Tab建立兩個虛擬桌面,一個放聊天視窗,另一個放OBS。
  • 試用獨立應用程式: Social Stream Ninja桌面應用程式可避免許多瀏覽器限制執行頻率的問題。
偵錯列問題

出現藍色列/自動回覆無法運作

使用機器人指令或自動回覆時,出現藍色偵錯列,或自動回覆無法運作。

檢查聊天視窗是否可見
  • 使用YouTube或Twitch時,請確認彈出聊天視窗保持開啟且可見
  • 某些平台可能需要同時保持主視窗和彈出視窗開啟
瀏覽器相容性
  • 自動回覆在Chromium瀏覽器(Chrome、Edge、Brave)中效果最佳
  • Firefox對擴充功能的支援有限

常見問題解答

Social Stream Ninja支援100多個平台,包括YouTube、Twitch、Facebook、Instagram、TikTok、Discord、Zoom、Google Meet、X(Twitter)、WhatsApp、Telegram等。完整清單請參閱 支援的平台 頁面。
建議大多數使用者使用獨立應用程式,因為它:
  • 避免瀏覽器限制執行頻率的問題
  • 提供自動更新
  • 提供視窗置頂和透明度功能
  • 效能和穩定性更好
如果您有以下需求,瀏覽器擴充功能更合適:
  • 需要在多台電腦上使用
  • 不想安裝額外軟體
  • 希望立即取得最新更新(手動安裝)
不需要!Social Stream Ninja的一大優點是大多數平台不需API金鑰或登入憑證。它直接從瀏覽器視窗或應用程式介面擷取聊天資料。不過,您仍需登入各個平台,才能正常查看聊天。
瀏覽器擴充功能: 若要更新手動安裝的擴充功能,請下載最新版本,用新檔案替換舊檔案,然後重新載入擴充功能或重新啟動瀏覽器。 不要解除安裝 擴充功能,以便保留設定。如果使用Chrome線上應用程式商店版本,它會自動更新,但頻率較低。 獨立應用程式: 應用程式會在重新啟動時自動更新。您也可以從應用程式選單手動檢查更新。
可以!Social Stream Ninja在大多數平台上支援雙向聊天。當您登入平台且擁有適當權限時,可以從儀表板或透過API指令傳送訊息,這些訊息會同時出現在所有已連接的聊天中。
當然可以!Social Stream Ninja專為OBS Studio及其他直播軟體設計。只要將疊加畫面URL作為瀏覽器來源加入直播軟體中。您可以在OBS中直接使用CSS,或透過URL參數自訂外觀。
是的,Social Stream Ninja完全免費,並以GPLv3.0授權條款開放原始碼。沒有訂閱、隱藏費用或功能限制。專案由Steve Seguin維護,社群共同貢獻。
我們在以下文件中維護所有事件酬載的標準清單,包括追隨者、會員、揪團、觀眾人數、贊助等: 事件參考。其中也說明哪些來源需要開啟「Capture Stream Events」、登入權限或額外的權限範圍才能接收資料。
所有疊加畫面URL、停駐面板API、WebSocket指令和自動化介面皆記錄於 指令與 API 頁面。若要編寫自訂行為,或將Social Stream Ninja與其他工具整合,這是最佳起點。
Social Stream Ninja在Discord上有活躍的社群,您可以直接取得開發者和其他使用者的協助。加入位址: discord.socialstream.ninja。您也可以在此回報問題: GitHub儲存庫.

仍需協助?

加入我們的社群Discord伺服器,開發者和其他使用者可以協助您排查問題。