HypeRate 覆盖层不显示心率数值——浏览器源与 OBS 插件分别排查
症状
覆盖层窗口/浏览器源正常显示(有设计模板、有边框、有动画),但 BPM 数值位置显示:
0 BPM/-- BPM/Loading...- 或根本没有数字,只有空边框
这说明覆盖层的前端代码加载成功了,但没收到实时心率数据。
排查顺序
第 1 步:HypeRate APP / 桌面端有没有显示 BPM
先查数据源——如果 HypeRate APP 或桌面端自己都不显示 BPM,那是设备连接问题(见上一篇蓝牙断连排查)。
检查:
- APP / 桌面端连接状态显示 "Connected" 还是 "Disconnected"?
- BPM 数值有没有实时跳动?
- 如果 APP 显示正常但覆盖层不显示,继续下面的排查。
第 2 步:HypeRate ID 对不对
覆盖层用的 HypeRate ID 必须和 APP / 桌面端当前生成的 ID 完全一致。
检查方法:
- APP / 桌面端 → Share / Embed → 重新生成 HypeRate ID
- 覆盖层(OBS 浏览器源 URL 或 OBS 插件)里的 ID 和新生成的对比
- 如果不一致 → 重新复制粘贴,注意不要多复制或少复制字符
重置 ID 的情况:如果你之前"重置过 HypeRate ID"(为了安全),旧 ID 立即失效。覆盖层必须用新生成的 ID。
第 3 步:网络连通性
HypeRate 覆盖层的数据通过 HTTPS/WSS 从云端获取。电脑/手机需要能访问外网。
检查方法:
- 在电脑浏览器里打开 HypeRate 覆盖层 URL
- 看 URL 页面上有没有显示 BPM 数值
- 如果浏览器里也不显示 → 网络问题(DNS / 防火墙 / 代理)
常见网络问题:
| 问题 | 表现 | 修复 |
|---|---|---|
| DNS 解析失败 | URL 打开报 404 或网络错误 | 换 DNS(Cloudflare 1.1.1.1 / Google 8.8.8.8) |
| 防火墙拦截 | URL 一直 Loading 不超时 | 关闭防火墙测试,或放行 HypeRate 域名 |
| 代理/VPN 冲突 | URL 打开正常但无数据 | 关闭代理或添加 HypeRate 域名到直连列表 |
| 大陆网络 | 可能访问不稳定 | 尝试切换网络(手机热点) |
第 4 步:浏览器内核缓存(OBS 浏览器源专属)
OBS 浏览器源用的是内置的 Chromium 内核。浏览器内核可能缓存了旧版本的覆盖层 JavaScript,导致无法连接最新的 WebSocket。
修复方法:
| OBS 版本 | 操作 |
|---|---|
| OBS Studio 28+ | 浏览器源 → 设置 → 勾选 "自定义框架/Chromium 源" → 不勾选即可 |
| 所有版本 | 浏览器源 → 设置 → 点击 "刷新" 按钮 |
| 彻底清缓存 | 浏览器源 → 高级 → 勾选 "OBS 启动时刷新浏览器源" |
极端情况:删除浏览器源 → 重新添加 → 粘贴 URL → 确定
第 5 步:OBS 插件连接状态
如果你用的是 HypeRate 原生 OBS 插件:
- OBS → 右侧 HypeRate Dock 面板
- 看连接状态:绿色 = 连接成功,灰色 = 未连接
- 如果灰色 → 点击 Connect → 输入 HypeRate ID → Test Connection
- Test 显示 BPM → 插件正常,接下来给文本源绑定心率变量
给文本源绑定变量(新手最容易漏掉这步):
- 添加 OBS 文本源
- 文本内容框里,点击 HypeRate 变量按钮 → 选择
{hr.bpm} - 确定,文本源就会实时显示 BPM 了
第 6 步:Websocket 连接数上限
HypeRate 云端对每个 HypeRate ID 限制同时只有一个 WebSocket 活跃连接。
如果你同时:
- 手机 APP 在连
- 桌面端在连
- OBS 浏览器源在连
- OBS 插件也在连
那其中几个会被踢掉。解决方法:只保留一个活跃连接,其他都关掉。
推荐配置:
- 手机 APP:关(如果用桌面端)
- 桌面端:开(负责采集 + 覆盖层)
- OBS 插件:或开(如果用插件方案)
- OBS 浏览器源:或开(如果用浏览器源方案)
第 7 步:HypeRate 云端临时故障
HypeRate 偶尔会有短时的云端故障,覆盖层 URL 打开正常但没数据。
判断方法:
- 在手机浏览器和电脑浏览器都打开同一个 HypeRate 覆盖层 URL
- 两边都没数据 → 大概率是 HypeRate 云端问题
- 等 5-10 分钟后自动恢复
检查官方状态:HypeRate 官方一般不会主动发故障公告,但 Twitter 上会有用户反馈。
快速诊断表
| 检查项 | 正常标志 | 异常标志 | 修复 |
|---|---|---|---|
| APP/桌面端 BPM | 实时跳动的数字 | 显示 "--" 或 "0" | 蓝牙断连排查 |
| HypeRate ID 一致 | APP 和覆盖层用同一个 ID | 不一致 | 重新复制粘贴 |
| 浏览器打开 URL | 显示 BPM | 不显示 | 网络/防火墙/DNS |
| OBS 浏览器源缓存 | 刷新后正常 | 刷新后还是 0 | 删源重建 |
| OBS 插件连接 | 面板绿色 | 面板灰色 | 重新输入 ID + Test |
| 连接数 | 1 个活跃 | 多个同时连 | 关掉多余的 |
应急方案
直播中发现覆盖层没 BPM 显示:
- 先试最快的修复:OBS 浏览器源右键 → 刷新(10 秒内搞定)
- 如果不行 → OBS 插件用户看 Dock 面板有没有断开
- 再不行 → 电脑浏览器打开 URL 看有没有数据(判断是 OBS 问题还是云端问题)
- 实在修不好 → 本次直播先不展示心率,下播后彻底排查