OBS Studio
已经建好的直播场景，以及一个准备放置叠加层的来源列表。
OBS 直播教程
第一次配置 · 约 3 分钟
把比赛画面放进 OBS
拿到比赛的覆盖页地址，添加一个浏览器源，之后就能在直播画面中显示排名、对阵、比分和队伍信息。
开始前
只需要准备 3 样东西
OBS 可以安装在直播电脑上，比赛管理和现场控制台也可以由另一台设备打开。关键是 OBS 能访问这个比赛地址。
一场已创建的比赛
你需要比赛 ID，覆盖页地址会由比赛详情或现场控制台生成。
可访问的站点地址
如果 OBS 和网站不在同一台电脑，请使用局域网或公网可访问的完整地址。
第 1 步 · 拿到地址
从现场控制台复制“OBS 浏览器源”
不要自己拼地址，也不要复制选手比赛现场页。使用页面提供的完整地址，里面已经包含正确的域名和比赛 ID。
- 01
- 02
找到 OBS 浏览器源
在“直播画面控制”区域找到地址框，复制从
https://或http://开始的整行内容。 - 03
保持控制台打开
OBS 只读取画面。直播桌、选手介绍、队伍、使用率、淘汰赛总览和输出开关，都在现场控制台操作。
第 2 步 · 配置 OBS
在场景中添加一个浏览器源
下面的配置适用于常见的 16:9 直播画布。添加完成后，这个浏览器源通常不需要再次创建。
- 01
选择直播场景
在 OBS 的“来源”区域点击加号，选择“浏览器”，创建一个新的来源，例如命名为“宝可梦相连 · 直播叠加层”。
- 02
粘贴完整 URL
把第 1 步复制的地址粘贴到 URL 输入框。不要只填路径，也不要把选手现场页地址填进来。
- 03
填写画布尺寸
宽度填 1920，高度填 1080；FPS 可填 30。CSS 可以留空，其他选项先使用默认值；下方截图标出了需要留意的选项。
- 04
铺满画布并锁定
确认浏览器源覆盖整个预览画布，再把来源锁定。底层可以继续放摄像头、游戏画面或其他直播元素。
截图对照
窗口里的选项这样处理
- URL
粘贴完整的
https://.../match-overlay/比赛ID；不要照抄截图里的域名或比赛 ID。 - 宽度 / 高度
分别填
1920和1080，并与直播画布保持一致。 - Custom CSS
可以留空；需要手动指定透明背景时，可使用
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }。 - 复选框 Local file、Control audio via OBS、Use custom frame rate、Shutdown source when not visible 保持不勾；Refresh browser when scene becomes active 保持勾选。
- Page permissions
保持默认的
Read access to OBS status information即可。
第 3 步 · 直播时控制
OBS 不用反复编辑，画面在现场控制台切换
浏览器源连接成功后，OBS 保持打开即可。主办方或裁判在现场控制台选择要播的内容，覆盖页会自动刷新。
选择直播对局
先选一张要播的桌，再让 OBS 页面显示该桌的对阵和比分。
展示选手入口或介绍
需要等待或介绍选手时，从控制台切换到选手入口、左方介绍或右方介绍。
展示队伍与特殊入场
有直播对局时可展示双方队伍，重要对局也可以播放特殊入场画面。
展示使用率或最终排名
队伍数据准备好后，可以切到使用率；淘汰赛结束后可切换对阵总览或最终领奖台。
需要时关闭输出
暂停直播时在控制台关闭覆盖页；恢复直播前点击“开启输出”，再确认 OBS 预览已恢复。
开播前 30 秒
按这 5 项快速确认
✓地址是本场比赛的
/match-overlay/比赛ID✓浏览器源尺寸是 1920 × 1080
✓现场控制台显示“输出已开启”
✓已经选择直播桌或准备好的赛事画面
✓OBS 预览中覆盖层没有挡住底层画面
排查问题
常见现象，按这里处理
浏览器源完全空白，什么都没有
先打开现场控制台确认覆盖页没有被关闭，并点击“开启输出”。如果比赛还没有当前轮或没有可显示的画面，先回到赛事总览；随后在 OBS 的浏览器源上右键并选择刷新。
OBS 和网站不在同一台电脑，地址打不开
如果地址里是 localhost 或 127.0.0.1，它只对生成地址的那台电脑有效。两台设备时请让网站使用局域网 IP 或公网域名，并确认 OBS 电脑能访问这个地址。
画面尺寸不对，四周有空白或被裁切
打开浏览器源属性，把宽度和高度分别改为 1920 和 1080；再检查 OBS 的基础画布和输出分辨率是否也是 1920 × 1080。需要其他比例时，应先统一整套直播画布比例。
比分或直播桌没有更新
画面切换由现场控制台负责，先确认控制台当前选择了正确的直播桌。浏览器源会自动读取更新；仍旧没有变化时，在 OBS 中刷新该浏览器源，并检查 OBS 电脑的网络连接。
为什么看到透明或像空白的画面
覆盖页的背景本来就是透明的，用来叠在摄像头或游戏画面上。请把它放在底层来源上方；如果连文字和面板都没有，再按“输出已关闭”和地址问题排查。
配置完成
现在只需要把浏览器源放到直播场景里
之后每场比赛重新复制对应比赛的覆盖页地址即可，OBS 的来源和尺寸设置可以继续复用。