OBS 教程

在 OBS 中显示 Twitch 聊天

观众想在直播画面上看到自己的消息。把 Twitch 聊天放进你的叠加层,并调整样式来配合你的布局。

需要 Vision 账号。你在编辑器中搭建叠加层。 · 更新于

Vision 编辑器一览。完整的设置步骤见下方文字说明。

工作原理

Twitch 聊天叠加层需要准备什么

在 Vision 叠加层中添加一个“聊天”图层,它默认显示你自己的 Twitch 频道。在聊天设计器中调整样式,保存叠加层,然后把它作为浏览器源添加到 OBS。Twitch 徽章以及 BTTV、FFZ 和 7TV 表情会自动显示。

  • OBS Studio 和一个 Vision 账号(Free 方案即可)
  • 你的 Twitch 频道名
  • 一个 Vision 叠加层,新建的或现有的都可以

分步设置

把 Twitch 聊天添加到 OBS

  1. 添加“聊天”图层

    在 Vision 中打开你的叠加层。点击左侧工具栏中的 Add Chat,再点击画布;或者使用 添加图层 → 聊天与互动 → 聊天。新图层默认已显示你自己的 Twitch 频道。

  2. 检查频道

    选中图层并点击 Channels。每个频道都有平台和名称。保留 Twitch 和你的频道名,或者点击 Add 添加更多频道,比如一起直播的搭档。

  3. 调整聊天样式

    点击 Designer 打开聊天设计器。选择字体、消息背景、间距和徽章;如果希望消息淡出,就设置“最大消息数”和“隐藏时间 (ms)”;再选择进入和退出动画。预览会实时更新。

  4. 隐藏不想让观众看到的内容

    开启“隐藏机器人”可以隐藏 Nightbot、StreamElements、Moobot 等常见机器人的消息;开启“隐藏命令”可以隐藏以 ! 开头的消息。“仅表情”会让聊天只显示表情。

  5. 把叠加层添加到 OBS

    保存叠加层。点击“插入叠加层”,使用 Drag & Drop in OBS 拖入 OBS;或者复制链接,在 OBS 中通过 来源 → + → 浏览器 添加。使用叠加层的尺寸,默认为 1920×1080。

让聊天在直播画面上清晰可读

在编辑器里看着没问题的聊天,放到手机屏幕上可能就很小。选择大一点的字体,让文字和背景保持强对比,并按观众实际看到的尺寸测试叠加层。

如果聊天很热闹,就调低“最大消息数”,或者用“隐藏时间 (ms)”让消息淡出,避免聊天框挡住游戏画面。

表情、徽章和头像

Twitch 徽章以及来自 BTTV、FFZ 和 7TV 的表情会自动显示。头像和平台图标可以开启或关闭。

想把 Twitch 和 YouTube 放在一个聊天框里?在 Channels 下添加一个 YouTube 频道。两边的消息会合并到同一个信息流中。

故障排除

如果遇到问题

  • 没有消息出现?检查 Channels 下的频道名,并开启 Preview Real Chat in Editor 进行测试。
  • Vision 里有聊天,OBS 里却没有?保存叠加层,并检查 OBS 使用的是叠加层链接,而不是编辑器地址。
  • 聊天被截断了?在叠加层内调整“聊天”图层的大小,并确保浏览器源使用的是叠加层的尺寸。

常见问题

在 OBS 中显示 Twitch 聊天:常见问题

聊天叠加层需要登录 Twitch 吗?

不需要。“聊天”图层读取的是你添加的频道的公开聊天。

可以同时显示多个频道吗?

可以。在 Channels 下添加更多频道。所有频道的消息会出现在同一个聊天里,每个频道还可以设置自己的背景颜色。

支持 7TV 和 BTTV 表情吗?

支持。对于 Twitch,BTTV、FFZ 和 7TV 表情会自动显示。

聊天叠加层免费吗?

免费。“聊天”图层在 Free 方案中即可使用,Free 方案包含一个最多 10 个图层的叠加层。

开播前先测试

Free 方案包含一个最多 10 个图层的叠加层,并支持同时连接一个 OBS。更多叠加层和自定义角色取决于你的方案。规划团队协作之前,请先查看当前的限制。

开始制作你的第一个直播画面

免费使用。无需信用卡。