html5访问蓝牙设备_使用Web Bluetooth API连接蓝牙【指南】

Web Bluetooth API需HTTPS环境、用户手势触发且浏览器支持；通过requestDevice选择设备，gatt.connect建立连接，getPrimaryService获取服务，getCharacteristic读写特征值，并用startNotifications监听变化。

如果您尝试在网页中直接访问蓝牙设备，但浏览器无法发现或连接目标设备，则可能是由于Web Bluetooth API未被正确调用或环境不满足要求。以下是实现此功能的具体步骤：

一、确认浏览器与运行环境支持

Web Bluetooth API仅在部分现代浏览器的特定环境下可用，必须确保当前环境满足安全与兼容性前提。该API要求页面通过HTTPS提供服务（本地开发时localhost除外），且用户主动触发连接行为（如点击按钮），不能自动启动。

1、打开Chrome浏览器（版本89及以上）或Edge（基于Chromium的最新稳定版）。

2、访问您的网页，确认地址栏显示https://开头，或为http://localhost或http://127.0.0.1。

立即学习“前端免费学习笔记（深入）”；

3、在开发者工具控制台中输入navigator.bluetooth，若返回Bluetooth对象则表示API已启用；若报错undefined，说明浏览器不支持或未启用。

二、请求并选择蓝牙设备

调用navigator.bluetooth.requestDevice()方法可弹出系统级设备选择界面，用户需手动选取目标设备。该操作必须由用户手势（如click事件）触发，不可在页面加载时静默执行。

1、在HTML中添加一个按钮元素：<button id="connectBtn">连接蓝牙设备</button>。

2、为按钮绑定点击事件，在事件处理函数中调用navigator.bluetooth.requestDevice()，传入{ acceptAllDevices: true }或指定filters参数缩小范围。

3、若用户选择设备，Promise将解析为BluetoothDevice实例；若取消或无设备匹配，则抛出NotFoundError或SecurityError异常。

三、连接GATT服务器并获取服务

成功获取设备后，需调用device.gatt.connect()建立低功耗蓝牙GATT连接。连接完成后，才能访问设备暴露的服务、特征值和描述符。

1、检查设备对象的gatt属性是否为非null。

Veo

Google 最新发布的 AI 视频生成模型

567

查看详情

2、调用device.gatt.connect()，等待其返回的Promise完成。

3、使用device.gatt.getPrimaryService(serviceUUID)获取指定UUID的服务，例如"battery_service"或自定义128位UUID字符串。

四、读取与写入特征值

GATT服务中的特征值（Characteristic）是数据交互的基本单元。读取需调用characteristic.readValue()，写入需使用characteristic.writeValue()，二者均返回Promise。

1、调用service.getCharacteristic(characteristicUUID)获取目标特征值对象。

2、对可读特征执行characteristic.readValue()，结果为DataView对象，需按协议解析字节序列。

3、对可写特征执行characteristic.writeValue(data)，其中data必须为ArrayBuffer或TypedArray（如Uint8Array）。

五、监听特征值变化

对于支持通知（Notify）或指示（Indicate）的特征值，可通过characteristic.startNotifications()开启实时监听，并绑定characteristic.addEventListener('characteristicvaluechanged', handler)响应数据更新。

1、确认特征值的properties包含notify或indicate（可通过characteristic.properties查看）。

2、调用characteristic.startNotifications()启用通知机制。

3、使用characteristic.addEventListener('characteristicvaluechanged', e => { ... })捕获每次值变更事件，从e.target.value提取最新DataView。

以上就是html5访问蓝牙设备_使用Web Bluetooth API连接蓝牙【指南】的详细内容，更多请关注php中文网其它相关文章！