stream/discord_streamkit の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• stream/discord_streamkit へ行く。
  • 1 (2026-07-13 (月) 20:41:57)

VC参加者のアイコンを表示する#

• Discord StreamKit Overlay を開き > Install for OBS をクリック
• VOICE WIDGET タブを選択 > Server と Voice Channel を選択
• 発行された browser source をコピーして OBSのソース追加 > ブラウザ でURLをペースト

参考 : OBSにDiscordをオーバーレイ表示する方法 | Raison Detre
参考 : Discordウィジェットを凸待ち用にしてくれるカスタムCSS

最近使ってるカスタムCSS#

ul[class*="States"] {
  display: flex;
} 
li[class*="State"] {
  display: flex; 
  flex-direction: column; 
  height: 90px;
} 
img[class*="avatar"] {
  filter: brightness(70%); 
  border-radius: 8px; 
  width: 90px; 
  height: 90px;

} 
img[class*="Speaking"] {
  position: relative; 
  animation: 300ms infinite alternate ease-in-out speak-light; 
  filter: brightness(100%); 
  border-color: rgba(255,255,255,.75); 
  animation-duration: 300ms;
} 
span[class*="name"] {
  max-width: 90px; 
  box-sizing: border-box; 
  text-overflow: clip; 
  white-space: nowrap; 
  overflow: hidden; 
  display: block; 
  text-align: center; 
  top: -10px; 
  left: 2px;
  position: relative;
  font-size: 40px;
}
@keyframes speak-light {
  0% {
    box-shadow: 0 0 4px blue;
  }
  50% {
    box-shadow: 0 0 16px blue;
  }
  100% {
    box-shadow: 0 0 4px blue;
  }
}