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。

标签： html5 html 浏览器 edge 字节 工具 点击事件