多個頻道和獨立疊加畫面

在一個停駐面板中閱讀所有聊天,同時選擇每個觀眾疊加畫面顯示哪些平台。

四步按平台拆分聊天

例如:一個疊加層只顯示 Twitch 聊天,另一個只顯示 YouTube 聊天;你仍可在同一個 Dock 中閱讀全部訊息。

  1. 將所有聊天加入 Social Stream Ninja,確認每個來源的新訊息都能出現在 直播聊天停駐面板。保留這個 Dock 的完整檢視,不要加篩選條件,供自己查看。
  2. 複製產生的 dock.html 連結兩份。複製可保留工作階段、密碼、版本和伺服器設定。
  3. 在各份連結末尾加入篩選條件,例如 &onlyfrom=twitch&hidemenu (參見 下表).
  4. 將各連結分別新增為 OBS 的 瀏覽器來源。給它們取清楚的名稱,例如 Twitch 聊天 和 YouTube 聊天.
將每個疊加層保留在自己的 OBS 瀏覽器來源中。
每個疊加層使用獨立的瀏覽器來源。
  1. 擷取 Twitch + YouTube
  2. 一個 SSN 工作階段 Dock 可以看到兩邊
  3. OBS 檢視 僅 Twitch 與僅 YouTube
一個訊息來源可供多個不同篩選畫面使用。

聊天疊加層的篩選選項

我想顯示… 加入 Dock 連結
僅 Twitch&onlyfrom=twitch&hidemenu
僅 YouTube&onlyfrom=youtube&hidemenu
Twitch 與 YouTube 合併顯示&onlyfrom=twitch,youtube&hidemenu
除 Discord 之外的所有來源&hidefrom=discord&hidemenu

完整範例:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu
使用 onlyfrom 和 hidefrom 在這裡查看。 其他疊加層的選項,例如 onlytype等選項可能不適用於此頁面。YouTube Shorts 是獨立類型,請加入 youtubeshorts ,前提是擷取會回報該值。參見 來源類型.
  1. 複製產生的 featured.html 連結兩份。
  2. 新增 &onlyfrom=twitch 到其中一份,再將 &onlyfrom=youtube 加到另一份。
  3. 保持 Dock 開啟,以便選取訊息。
精選聊天的每條連結只接受一個平台。 逗號分隔清單(twitch,youtube)僅適用於 Dock。

篩選條件只決定頁面接受哪些精選訊息,不會建立獨立佇列。拒絕某則訊息也不會清空畫面。切換節目環節時,請手動清除精選訊息,以免舊訊息留在畫面上。

同一平台的兩個頻道

onlyfrom=twitch 表示整個 Twitch,而不是某個 Twitch 頻道。頻道名稱和直播標題不能當作篩選名稱。

我想要…執行操作
顯示每則訊息來自哪個頻道新增 &showchannelname (來源傳送頻道名稱時有效)。
執行兩個完全獨立的節目使用獨立的擷取執行個體或設定檔,各自使用自己的工作階段,並且只開啟各自的來源。
按瀏覽器分頁篩選 Dock&filtertid=123 (進階用法,見下文)。
使用其他工作階段卻沒有對應擷取的疊加層會一直空白。疊加層的 label 是路由用的頁面名稱,不是頻道篩選條件。
方法 filtertid 適用
  • 使用訊息來源瀏覽器分頁的數字 ID。多個 ID 以逗號分隔。
  • 找到 tid ,在真實擷取的資料中查看。參見 事件參考 和 指令與 API.
  • 這不是平台的頻道 ID。
  • 重新開啟來源時,分頁 ID 可能改變。沒有相符分頁 ID 的來源可能被隱藏。
  • 僅適用於 Dock,不能用作精選聊天的頻道篩選條件。

測試每個畫面

  1. 向測試工作階段傳送一則模擬 Twitch 訊息和一則模擬 YouTube 訊息。使用 建立測試訊息.
  2. 確認 Dock 中有兩邊的訊息,而各聊天疊加層只顯示自己的平台。
  3. 分別精選各則訊息,再按清除。切換平台後檢查所有精選聊天頁面。
  4. 再用每個來源的真實訊息重複測試。模擬訊息沒有真實分頁 ID。
問題試試這個
畫面空白暫時移除篩選條件。如果聊天恢復,請核對準確的來源類型或分頁 ID。
移除篩選條件仍空白參閱 工作階段與路由疑難排解.
修改 OBS 來源名稱後沒有變化改名不會改變儲存的連結,請直接編輯 URL。

在一個瀏覽器分頁中顯示聊天和提醒

合併疊加畫面 將疊加層連結堆疊到一個分頁或一個 OBS 瀏覽器來源中,適合戶外直播時用手機閱讀聊天。

  1. 貼上你的 直播聊天停駐面板 連結到最底層。
  2. 貼上你的 多直播提醒框 連結到最上層。保留包含工作階段、密碼和連線選項的完整連結。
  3. 將 透明 SSN 背景 已勾選。
  4. 開啟 允許在此圖層中點按和捲動 用於聊天。提醒圖層則關閉,以免阻擋聊天操作。
  5. 新聞 預覽,然後 顯示 QR 碼 並用手機掃描。或按 複製組合連結 貼到瀏覽器來源。

組合畫面沒有設定控制項,只顯示疊加層。

圖層選項

我想要…執行操作
加入更多疊加層最多八條連結。
將圖層移到前面或後面使用箭頭按鈕。
調整圖層大小或位置開啟 尺寸與位置。以像素(450)或百分比(100%).
讓圖層恢復全螢幕重設為全螢幕。寬度和高度留空時填滿瀏覽器;左側和頂部位置留空時從左上角開始。
建立左側聊天欄(1920×1080)聊天圖層:寬度 450,高度 1080,左側位置 0,頂部位置 0。其他圖層維持全螢幕。
稍後編輯組合連結使用可編輯連結,或加入 ?edit=1 ,放在以下內容之前: #.
重新開始清除已儲存的設定.

瀏覽器改變尺寸時,像素值維持固定,百分比值隨之變化。各疊加層保留自己的內容和設定。

儲存、手機與隱私
  • 連結和圖層選項會自動儲存在此瀏覽器中,即使尚未完成。私密瀏覽模式可能不會保留它們。
  • 組合連結和 QR code 包含整個版面。在電腦上設定,掃描一次,再在手機上加入書籤。開啟後,版面也會儲存到手機瀏覽器中。
  • 在電腦上修改不會更新舊連結。編輯後請複製或掃描新連結。工作階段 ID 不會同步這些設定。
  • 組合連結和 QR code 應像疊加層連結一樣保密。
  • SSN 擷取仍須執行,手機也必須能連線到原始連結所用的伺服器。 localhost 或 127.0.0.1 指的是手機本身。
  • 過長的連結可能無法放入 QR code,但仍可複製連結。

OBS 版面:左側聊天欄搭配全螢幕特效

不需要 CSS。 每個圖層都有自己的區域。將 OBS 瀏覽器來源設為 1920×1080。從底層開始加入圖層,在各圖層的以下欄位中只填數字(不要逗號或「px」): 尺寸與位置.

圖層寬度高度左側偏移頂端偏移
1. 即時聊天/停駐面板4501000080
2. Hype 計數器4508000
3. Emoji/表情牆1920108000
4. 精選聊天147010804500
5. NinjaBacker(選用)1920108000

頂部 80 像素放 Hype,下方放聊天欄。想讓聊天在 Hype 後面鋪滿全高?將 Live Chat 高度設為 1080 ,頂端偏移量設為 0。場景尺寸不同,需要調整数值。

  1. 貼上完整的疊加層連結。 從現有的瀏覽器來源複製,可一併保留工作階段、密碼、樣式和連線設定。保持勾選 透明 SSN 背景 。OBS 的裁切、變形、濾鏡和自訂 CSS 不在連結中,無法一併轉移。
  2. 將 Hype 在欄內置中。 在 hype.html 連結時,使用 &align=center。替換所有 align=left 或 align=right,並移除 alignright。想要精簡的外觀,可嘗試 &combineall&hidetitle&style=compact&scale=0.75 (替換現有值)。如果樣式需要更多空間,請增加 Hype 圖層的高度。
  3. 將精選聊天放在聊天欄旁邊。 設定 左側位置 = 450 和 寬度 = 1470 一起設定(450 + 1470 = 1920)。把寬 1920 的圖層右移會裁掉邊緣。加入 &center 為 featured.html 可讓短訊息在該區域置中。若要在整個場景中置中,設為左側 0、寬度 1920,再使用 &center.
  4. 將 NinjaBacker 放在最後(選用)。 將其觀眾疊加層連結放在最上層,並設定從右側進入的動畫。組合工具控制區域和順序,NinjaBacker 控制自身動畫。背景必須透明,且網站必須允許嵌入。此圖層未包含在已測試的範例中。
  5. 以 1920×1080 預覽。 傳送含表情的聊天,從 Dock 精選一則訊息,並在 SSN 中開啟 Hype 資料。一般聊天不會自動選取精選訊息。
  6. 將新的組合連結複製到 OBS。 將該瀏覽器來源的寬度設為 1920、高度設為 1080。預覽尺寸不會設定這些值。完整配合場景,不要裁切。每次修改版面後重新複製連結,舊連結仍保留舊版面。
測試後的組合輸出:Hype 在左側窄聊天欄上方置中,emoji 橫跨場景,精選訊息位於聊天右側的底部。
在真實 Chromium 中使用四個 SSN 疊加層和測試訊息來源的範例。圖片本身透明,這裡加深色背景方便閱讀。點按查看原圖。字型和顏色由你自己的疊加層設定決定。
效能: 一個瀏覽器來源仍會執行其中的每個疊加層。OBS 來源數量減少不保證 CPU 或記憶體用量降低。完成後關閉瀏覽器預覽,並在關閉舊來源的情況下比較 OBS 表現。M1 Mac 效能和你自己的 NinjaBacker 連結尚未測試。也可將 Live Chat 保持獨立,僅組合其餘疊加層。

圖層空白或蓋住聊天時

問題試試這個
圖層為空先單獨開啟原始連結。提醒在事件到來前保持空白。組合頁面不會開始新的擷取。
圖層背景不透明以下頁面可自動透明: dock.html, featured.html, multi-alerts.html,以及 minecraft.html。其他頁面需要各自開啟透明背景。有些外部網站會阻擋嵌入。
無法點按或捲動聊天透明圖層也可能擋住點按。關閉 允許點按與捲動 ,用於聊天上方且不需要操作的圖層。
手機沒有聲音手機可能需要點按後才能播放聲音。允許點按該圖層,再點一下。正式使用前,請在實際手機上測試。