• 總覽

介紹

• ↑ 這個左下角的通話效果
  • 本文內容亦以此範例為主
  • 只需簡易修改可參考 #補充內容

事前準備

簡而言之，這東西背後原理就是修改 Discord 語音擷取網頁的 CSS 樣式

所以你會需要：

1. 對應語音頻道的嵌入用網址（你要擷取的語音頻道）

• 到 Discord StreamKit Overlay
  → Install for OBS
  → VOICE WIDGET
  選擇伺服器與頻道後，複製右下方網址
• 或是 直接修改截取網址裡的對應 ID ↓
  https://streamkit.discordapp.com/overlay/voice/[伺服器ID]/[語音頻道ID]
  • 相關 ID 取得方式參照下方
• 只想直接截取 Discord 發話也是使用此網址
  預設效果：
  

2. 使用者ID（你要顯示圖片的人）

• 複製 使用者ID、伺服器ID、語音頻道ID 需開啟 Discord 開發者模式
• 開啟 Discord 開發者模式方式：
  於Settings (使用者設定)
  → APP SETTINGS (應用程式設定)
  → Advanced (進階)
  → 啟用 Developer Mode (開發者模式)
  
• 複製 ID 方式：
  開啟後，對 目標使用者／語音頻道／伺服器 點擊右鍵
  → 最下面會出現 複製ID，點擊
  
  → 將取得 ID 貼回上方網址對應（[伺服器ID]/[語音頻道ID]）處即可
• 目前（2020 年 9 月時） Streamkit 暫不支援私訊通話截取。Ref: Feedback

3. 對應使用者圖片網址（你要顯示的圖片）

• 丟到各大圖床上，也可直接上傳至 Discord 內
• 丟到 Discord 的話，對圖片按中鍵就可在瀏覽上開啟
  或是對圖片按右鍵點擊「複製連結」
  例如你看到右下角這隻就是丟在 Discord 上↘

如果你想要做進一步的自訂修改，會需要一點 CSS 相關知識

步驟

1. 將截取網址加到實況軟體裡的瀏覽器來源
2. 參考下方 CSS 程式碼，並自行修改 使用者ID 與 圖片網址
   或使用線上產生器 DiscordStreamKit 立ち絵変換
   完成後，複製並貼至實況軟體裡瀏覽器來源的 CSS 區

• 產生器同樣需要 1. 使用者ID、2. 圖片網址
• 裡面有提供 3 種顯示效果，分別是：
  跳ねる（跳動）、明度変動（改變明亮度）、影(縁取り)（加上外框）
  並可修改是否要顯示名稱標籤，以及標籤顯示位置

/* (可選1) 隱藏指定之外的使用者 */
li.voice-state:not([data-reactid*="②準備的使用者ID"]) { 
  display: none; 
}

/* (可選2) 移除所有使用者頭像圖片 */
li.voice-state .avatar {
  content: url();
}

/* 更改指定使用者頭像成特定圖片 */
li.voice-state[data-reactid*="②準備的使用者ID"] .avatar {
  content: url(③準備的使用者圖片網址);
}

/* 頭像共通設定 */
.avatar {
  height: auto !important;
  width: auto !important;
  /* 去除圓框 */
  border-radius: 0% !important;
  /* 平時亮度50%  */
  filter: brightness(50%);
}

/* 設定發聲時的狀態 */
.speaking {
  /* 去除外框 */
  border-color: rgba(0,0,0,0) !important;
  /* 發聲亮度100% */
  filter: brightness(100%);
}

/* 調整名稱標籤的顯示位置 */
ul.voice-states { display: flex; }
div.user{ display: none; }

/* 清除滾動捲軸 */
body { 
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden; 
}

• 也可以替不同狀態（平常時 與 發聲時）個別加上 CSS 動畫效果
  • 例如加上 transform: translateY(移動距離); 可以做出上下移動效果
  • 加上 animation 可以做出持續移動效果等等
• 使用 animation 加上跳動效果的範例：

/* 發聲時的狀態 */
.speaking {
  /* ... */
  animation: speak-now 5s infinite;
}

/* 上下移動動畫 */
@keyframes speak-now {
  0% { bottom:0px; }
  5% { bottom:10px; }
  10% { bottom:0px; }
  15% { bottom:10px; }
  20% { bottom:0px; }
  25% { bottom:10px; }
  30% { bottom:0px; }
  35% { bottom:10px; }
  40% { bottom:0px; }
  45% { bottom:10px; }
  50% { bottom:0px; }
  55% { bottom:10px; }
  60% { bottom:0px; }
  65% { bottom:10px; }
  70% { bottom:0px; }
  75% { bottom:10px; }
  80% { bottom:0px; }
  85% { bottom:10px; }
  90% { bottom:0px; }
  95% { bottom:10px; }
  100% { bottom:0px; }
}

語音擷取最主要的 HTML 部分如下：（取自 Discord StreamKit Overlay Sample）

    <div class="voice-container">
      <ul class="voice-states">
        <li class="voice-state">
          <img class="avatar speaking" src="https://cdn.discordapp.com/avatars/235088799074484224/16c197c4c3f0eb808f9bceb6e1075e71.jpg">
          <div class="user">
            <span class="name">Rythm Bot</span>
          </div>
        </li>
        <li class="voice-state">
          <img class="avatar" src="https://cdn.discordapp.com/avatars/448994167029497867/b95dc78d27b8e12d7f9c5ca9e9aef35e.jpg">
          <div class="user">
            <span class="name">ガンジー</span>
          </div>
        </li>
      </ul>
    </div>

調整簡記

• 想更改語音頻道
  → Discord Stream Kit 重新產生 or 更改網址 ID 部份
• 想更改人物頭像
  → 改 CSS 裡 .avatar 部分的 content: url()
• 想每個人獨立設定圖片（圖片尺寸不一 or 想自由調整位置時）
  → 每個人都弄成各自一個瀏覽器來源
  → 加上僅顯示一人的 CSS（上方的「可選1」）
  → 方便圖片大小不一時做調整

參考文章

• Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店
• 大人数の配信時使うDiscordStreamKitOverlayのカスタムCSS - Qiita

補充內容

Among Us 風格主題

• 由日本網友製作的 Among us 風格主題產生器
  • 效果可以參考 ↓ 約 30 秒上方處

Discord StreamKit Overlay Among us用ぴょこぴょこカスタムCSSジェネレーター

要注意這是 CSS 產生器，一樣需要 #事前準備 裡第 1 步的 網址 和第 2 步的 ID。

• 此產生器為登錄制
  • 於 ① 處左方輸入該使用者名稱，右方輸入該使用者 ID，再點擊右方的登錄
  • 登錄完成後，② 和 ③ 的下拉選單就會出現該使用者名稱
• 登錄完所有玩家，並於 ③ 處指定完和遊戲內相同的色彩後
  • 點擊下方的 Set，複製自動產生的 CSS 至 OBS 瀏覽來源裡即可

簡易修改樣式

Discord StreamKit Overlay Sample

這則是 CSS 片段，只需要 #事前準備 裡第 1 步的 網址。

• 改為橫列顯示（名稱於圖片下方）
• 改為橫列顯示（名稱於圖片右方）
• 更改話者亮度
• 只顯示最後一個說話者
• 修改特定使用者名稱（需要第 2 步的 ID）
• 於特定使用者說話時更改圖片（需要第 2 步的 ID）