HypeRate 浏览器源 URL 嵌入 OBS/Streamlabs/XSplit 完整步骤
这是什么
浏览器源方案是 HypeRate 最传统的集成方式——APP 生成一个固定 HTTPS URL，你把它加到 OBS/Streamlabs/XSplit 的浏览器源里，覆盖层就自动显示实时心率。
适合不想折腾 OBS 插件、或者用 Streamlabs / XSplit / 其他直播软件的用户。
优点和缺点
| 优点 | 缺点 |
|---|---|
| 任何直播软件都能用（不限 OBS） | 有 1-2 秒延迟 |
| 设置零门槛——复制粘贴 URL | 依赖 HypeRate 云端服务 |
| 100+ 设计模板可选 | 云端故障则覆盖层失效 |
| 社区分享的自定义模板 | 需要 APP 持续运行 |
步骤一：从 APP 获取 URL
移动 APP
- 打开 HypeRate APP，确保已连接心率设备
- 找到 Embed / 嵌入 / Share URL 按钮
- 选择你喜欢的设计模板（基础圆形、仪表盘、恐怖血红、赛博朋克等）
- 点击生成 URL，复制
桌面端
- 打开 HypeRate Desktop
- Connection 标签页 → Share → Embed URL
- 选择模板 → 复制 URL
步骤二：在直播软件中添加浏览器源
OBS Studio
- 在场景里添加"浏览器"源
- 粘贴 HypeRate 生成的 URL
- 宽度建议 200px（小）/ 300px（大），高度 200px / 300px
- 取消勾选"对缩放/布局变化执行刷新"（这个选项会导致覆盖层闪烁）
- 点击确定，覆盖层立刻出现
Streamlabs
- 左侧 Sources 面板 → 点击 + → Browser Source
- 粘贴 URL，设置尺寸
- 高级设置里把"Custom CSS"清空
- 完成
XSplit
- Scene Sources → Add → Webpage
- 粘贴 URL → 设置尺寸
- 勾选"Transparent background"（如果覆盖层支持透明背景）
URL 不会变——这是关键优点
HypeRate 生成的 URL 是固定的——每天都一样，APP 重启后也一样。这意味着：
- 只需要设置一次 OBS 场景，以后再也不用动
- 心率设备换了也没关系，同一个 URL 会自动从新设备获取数据
- 换电脑开直播，复制 OBS 配置文件就行
这也是为什么很多长期主播选择浏览器源方案——一次配置，永久使用。
选择合适的设计模板
HypeRate 内置了超过 100 种覆盖层设计模板，从极简风格到高度定制化的仪表盘都有。选模板的几个原则：
和直播画面风格匹配
| 游戏/内容类型 | 推荐风格 |
|---|---|
| 恐怖游戏 | Blood Pulse（红黑脉动） |
| FPS/MOBA | Tech Dashboard（科技仪表盘） |
| IRL 户外 | Clean Circle（简洁圆形） |
| VTuber / 二次元 | Anime Heart（粉色爱心） |
| 复古游戏 | Retro Arcade（像素风） |
| 休闲内容 | Minimal Bar（极简条形） |
尺寸控制
浏览器源的尺寸直接影响画面占用：
- 小（80×80 - 120×120）：推荐绝大多数场景，不抢画面
- 中（150×150 - 200×200）：适合 IRL 户外，需要稍微醒目一点
- 大（250×250+）：只适合覆盖层是唯一画面元素的特殊场景
透明背景
大多数模板支持透明背景，确保 OBS 里浏览器源的背景不会出现一个方框。如果某个模板背景是实色的，换一个模板试试。
自定义模板（进阶）
HypeRate 允许用户编写自己的覆盖层 HTML/CSS 模板。社区在 GitHub 上分享了大量自定义模板，涵盖各种风格。
自定义模板的核心是通过 WebSocket 接收实时心率数据，然后用 JS 更新 DOM。HypeRate 提供了标准的 WebSocket 接口，格式文档在开发者 API 页面可以找到。
常见问题
URL 打开后不显示心率
- 确认 HypeRate APP 在运行，且心率设备已连接
- 在电脑浏览器里直接打开 URL，看是否有 BPM 显示——如果浏览器里正常但 OBS 里不正常，可能是 OBS 浏览器内核的问题
- OBS 里尝试把浏览器源尺寸调大（过小会导致部分模板渲染失败）
覆盖层有延迟
- 手机和电脑尽量靠近路由器（减少蓝牙和 Wi-Fi 双重延迟）
- 关闭 APP 的"高精度模式"（如果有）——高精度模式采样频率更高但延迟略大
- 实在介意延迟的话，换用 OBS 原生插件方案
覆盖层偶尔消失
- 99% 是 HypeRate 云端临时故障——等几分钟就恢复
- 也可能是心率设备断连后 APP 没自动重连
总结
浏览器源方案是最通用的 HypeRate 集成方式，适合：
- 不想折腾 OBS 插件的新手
- 用 Streamlabs / XSplit / 其他直播软件的用户
- 喜欢一次配置永久使用的懒人
但如果你追求最低延迟和心跳滤镜、心率触发场景等高级功能，还是 OBS 原生插件更合适。