蓝牙心率带演示 - Web Bluetooth 接入健康设备
连接蓝牙心率监测器,实时显示心率数据并绘制波形,展示健康设备 Web 接入。
UD5工具箱
使用 Web Bluetooth API 探测附近的蓝牙设备,查看信号强度、设备信息并尝试连接
| 信号 | 设备名称 | 设备ID | RSSI | 类型 | 状态 | 操作 |
|---|---|---|---|---|---|---|
|
暂无设备数据 点击上方「扫描设备」按钮开始探测附近的蓝牙设备 |
||||||
提示:iOS设备目前支持有限,建议使用Android设备或桌面Chrome获得完整体验。
localhost或127.0.0.1,这些地址被视为安全上下文。生产环境必须配置有效的SSL证书。
RSSI(Received Signal Strength Indicator)是接收信号强度指示器,单位为dBm(分贝毫瓦)。它表示设备接收到蓝牙广播信号的强度。
| RSSI范围 (dBm) | 信号质量 | 说明 |
|---|---|---|
| -30 至 -50 | 优秀 | 设备非常近(通常1米以内) |
| -50 至 -65 | 良好 | 设备较近,连接稳定 |
| -65 至 -75 | 一般 | 中等距离,可能出现延迟 |
| -75 至 -85 | 较差 | 距离较远,信号不稳定 |
| -85 以下 | 很差 | 接近极限距离,易断连 |
注意:RSSI受环境干扰、障碍物、天线设计等因素影响,仅作为参考指标。
BLE(Bluetooth Low Energy,低功耗蓝牙)是从蓝牙4.0引入的技术,与经典蓝牙(BR/EDR)有本质区别:
requestDevice()调用触发的扫描通常持续几秒到十几秒(取决于浏览器实现),对电池影响微乎其微。但如果使用watchAdvertisements()持续监听多个设备的广告包,则会略微增加功耗,建议在不需要时及时取消监听。
F0:1E:34:AB:CD:EF),是蓝牙设备的唯一硬件标识。Web Bluetooth API返回的设备ID是设备的真实MAC地址。隐私方面:浏览器仅在用户主动选择设备后才会暴露设备ID,且该信息仅存在于当前页面会话中。现代BLE设备通常使用随机可解析地址(RPA)定期更换MAC地址以保护隐私,因此同一设备在不同时间可能显示不同ID。本站不会将设备信息上传至任何服务器,所有数据仅保存在浏览器本地。
连接蓝牙心率监测器,实时显示心率数据并绘制波形,展示健康设备 Web 接入。
扫描并连接附近的蓝牙设备,读取其电池服务电量数据,显示电量百分比。
使用 Web Bluetooth API 扫描附近正在广播的 BLE 设备,显示名称和信号强度。
请求USB设备并列出接口,发送和接收数据,适用于调试兼容WebUSB的微控制器。
加载音频流并通过 BiquadFilterNode 应用不同类型的滤波,实时调节频率和 Q 值。
编写 Babel 插件代码,输入源代码,实时查看转换后的结果,加速插件开发。
填写标题、文本和URL,触发系统级分享菜单,测试Web Share API功能。
立即播放麦克风输入的声音,检验麦克风是否工作。
在隔离的模拟环境中输入 SQLi 载荷,展示注入前后 SQL 语句变化,纯粹用于教学。
调用麦克风,以多种样式(波形、频谱、圆环音量)实时显示输入声音。
输入目标URL,发送预检请求,分析Access-Control-*头,诊断跨域问题。
提供模块图,编写 Rollup 插件并观察其对打包过程的影响。
展示 WebGPU 的网格和任务着色器如何代替传统顶点处理管线。
导入 Voiceflow 项目文件,在浏览器中模拟语音对话流程,调试交互逻辑。
使用新的 Navigation API 拦截导航、管理历史条目,构建类 SPA 体验。
网页全屏彩色灯光,随麦克风捕捉的音量跳动,制造派对或直播氛围。
在支持手部追踪的 XR 设备上,展示裸手交互的 VR/AR 体验。
使用新的Sanitizer API清理可能存在XSS风险的HTML字符串,并安全插入DOM。
为麦克风输入实时添加大厅混响和回声效果,简易网页K歌体验。
使用浏览器SubtleCrypto API实现AES-GCM或AES-CBC加密解密,可设密码短语,全前端安全。
提供多组在各色盲类型下仍可区分的定性、连续配色方案,辅助图表设计。
使用范围请求安全地检查密码是否出现在已知数据泄露库中(不发送完整密码)。
填入Payload及密钥,选择HS256/RS256算法生成JWT,并验证已签发Token的签名与过期时间。
选择数据类型(Article, Product 等)并填写属性,自动生成对应的 JSON-LD 结构化数据代码。
解析JSON Web Token,显示Header和Payload内容及签名算法,不验证签名,方便开发调试。
填写标题、描述、图片等信息,自动生成符合Open Graph协议的HTML meta标签,优化社交平台分享预览。
从麦克风采集声音,用Web Audio实时改变音高、加速、加回声或机器人效果。
输入房间尺寸和表面材料吸音系数,简略估算该房间的混响时间。
播放标准音A后弹奏另一个音,用唱名(do re mi)或音名(CDE)识别音高。
粘贴 Mustache 模板与数据 JSON,所见即所得地渲染输出,支持节段和反转节段。