| * web H5 网页 浏览器 蓝牙 Bluetooth | 您所在的位置：网站首页 › 查找设备网页端 › * web H5 网页 浏览器 蓝牙 Bluetooth |
* web H5 网页 浏览器 蓝牙 Bluetooth
|
文章目录
2022/1/18 更新说明目标介绍背景Bluetooth Low Energy (BLE)Generic Attribute Profile (GATT)WebBluetooth API使用条件（prerequisites）**`navigator.bluetooth.requestDevice()`**
开始1.连接蓝牙设备~~2.写入数据~~3.读取数据4.获取信息并改变（返回显示）5.断开连接
参考文献2022/1/18--更新Web H5 网页 浏览器 蓝牙 Bluetooth PWA开发环境开始DEBUGTypeError:navigator.bluetooth.requesetDevice is not a function
更多参考文档
2022/1/18 更新说明
为了避免重复造轮子，请参考这篇文章。其中内容详细且全面，目前也已经有了中文版 1. 通过 JavaScript 与蓝牙设备通信 目标最近正在开发一个项目，项目的需求如下： 在H5（基于vue框架）页面上，通过js调用webbluetooth接口，读取某个蓝牙设备传输的数据，并返回显示。 介绍 背景随着PWA的兴起，越来越多的web服务被支持。但其中一个领域几乎是原生应用的专属领域:与设备通信。长期以来，开发者们一直在致力于解决这个问题。 The web is excellent for talking to servers, but not for talking to devices …… 于是乎WebBluetooth应运而生，这是一个已经在Chrome和三星互联网上实现的新规范。 WebBluetooth is a new specification that has been implemented in Chrome and Samsung Internet that allows us to communicate directly to Bluetooth Low Energy devices from the browser. Bluetooth Low Energy (BLE)维基百科 - 低功耗蓝牙 Generic Attribute Profile (GATT)蓝牙BLE: GATT Profile 简介(GATT 与 GAP) GAP 使你的设备被其他设备可见，并决定了你的设备是否可以或者怎样与合同设备进行交互。 GATT协议 - 通用属性配置 WebBluetooth API通过使用WebBluetooth API，我们只需要几行JavaScript就可以和蓝牙设备进行沟通。 The Web Bluetooth API aims to do exactly that with a promise-based API, which allows you to interact with many BLE(Bluetooth Low Energy) enabled devices. 使用条件（prerequisites） 需要HTTPS需要用户给予蓝牙权限，需要用户点击确认 button.addEventListener('pointerup', function(event) { // Call navigator.bluetooth.requestDevice }); 系统要求，具体的看这里 MDN’s Browser compatibilityA subset of the Web Bluetooth API is available in Chrome OS, Chrome for Android 6.0, Mac (Chrome 56) and Windows 10 (Chrome 70) navigator.bluetooth.requestDevice()接受一个定义筛选器的强制对象。这些过滤器用于仅返回匹配某些已发布的蓝牙GATT服务和/或设备名称的设备。 使用：过滤器 Services filter navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] }) .then(device => { /* … */ }) .catch(error => { console.error(error); });如果蓝牙设备不在这个服务列表里面，我们需要提供完整的Bluetooth UUID 或者16-/32-bit 的排列 navigator.bluetooth.requestDevice({ filters: [{ services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb'] }] }) .then(device => { /* … */ }) .catch(error => { console.error(error); }); Name filter navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }], optionalServices: ['battery_service'] // Required to access service later. }) .then(device => { /* … */ }) .catch(error => { console.error(error); }); Manufacturer data filter // Filter Bluetooth devices from Google company with manufacturer data bytes // that start with [0x01, 0x02]. navigator.bluetooth.requestDevice({ filters: [{ manufacturerData: [{ companyIdentifier: 0x00e0, dataPrefix: new Uint8Array([0x01, 0x02]) }] }], optionalServices: ['battery_service'] // Required to access service later. }) .then(device => { /* … */ }) .catch(error => { console.error(error); }); No filters navigator.bluetooth.requestDevice({ acceptAllDevices: true, optionalServices: ['battery_service'] // Required to access service later. }) .then(device => { /* … */ }) .catch(error => { console.error(error); }); 开始参考文献【1】 给出的是一个通过蓝牙控制灯泡颜色的例子。 我们的实验也是基于他的思路并修改，最终实现目标。 如何开始使用Web蓝牙： Communicating with Bluetooth devices over JavaScript 1.连接蓝牙设备首先，要做的就是连接蓝牙设备，这里我们使用的是navigator.bluetooth.requestDevice()这个接口。 navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] }) .then(device => { // Human-readable name of the device. console.log(device.name); // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* … */ }) .catch(error => { console.error(error); }); 2.写入数据 3.读取数据 navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] }) .then(device => device.gatt.connect()) .then(server => { // Getting Battery Service… return server.getPrimaryService('battery_service'); }) .then(service => { // Getting Battery Level Characteristic… return service.getCharacteristic('battery_level'); }) .then(characteristic => { // Reading Battery Level… return characteristic.readValue(); }) .then(value => { console.log(`Battery percentage is ${value.getUint8(0)}`); }) .catch(error => { console.error(error); }); 4.获取信息并改变（返回显示） navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => characteristic.startNotifications()) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', handleCharacteristicValueChanged); console.log('Notifications have been started.'); }) .catch(error => { console.error(error); }); function handleCharacteristicValueChanged(event) { const value = event.target.value; console.log('Received ' + value); // TODO: Parse Heart Rate Measurement value. // See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js } 5.断开连接 navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] }) .then(device => { // Set up event listener for when device gets disconnected. device.addEventListener('gattserverdisconnected', onDisconnected); // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* … */ }) .catch(error => { console.error(error); }); function onDisconnected(event) { const device = event.target; console.log(`Device ${device.name} is disconnected.`); } 参考文献 【1】An Introduction To WebBluetooth,2019-2-13【2】An introduction to the Web Bluetooth API,2016-3-2【3】WEB BLUETOOTH COMMUNITY GROUP,【4】GitHub.web-bluetooth【5】如何开始使用Web蓝牙： Communicating with Bluetooth devices over JavaScript 2022/1/18–更新 Web H5 网页 浏览器 蓝牙 Bluetooth PWA 开发环境 VScode:1.63.2Node.js:14.16.0OS:Windows_NT x64Vue.js:2.6.11蓝牙模块（-）
需要先定义一个用户交互服务才能开始请求蓝牙设备；即不能在页面加载时使用该功能。 更多在 Chrome 中的 about://bluetooth-internals 位置可查看蓝牙内部页面，以便您可以检查附近蓝牙设备的所有信息：状态、服务、特征和描述符。 1. 通过 JavaScript 与蓝牙设备通信 2. Web Bluetooth API |
【本文地址】