自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

你不知道的前端藍(lán)牙應(yīng)用實(shí)踐-心率帶

作者：ELab.zmuliang
開發(fā) 前端
藍(lán)牙低能耗技術(shù)，實(shí)現(xiàn)設(shè)備間的連接與通信。顧名思義，能耗與成本都更低，與之相對應(yīng)的則稱為經(jīng)典藍(lán)牙?；诠P者的開發(fā)目的，本文簡單了解設(shè)備連接前（GAP）和連接后（GATT）所涉及的兩個(gè)協(xié)議。

本文為來自 字節(jié)教育-成人與創(chuàng)新前端團(tuán)隊(duì) 成員的文章，已授權(quán) ELab 發(fā)布。

一、背景

最近開啟了減肥計(jì)劃，購入了一條心率帶，期望在使用劃船機(jī)過程中監(jiān)測心率情況。購入后的情況如下：

心率帶不直接顯示數(shù)值，需要連接APP或相關(guān)設(shè)備使用。

官方APP僅實(shí)時(shí)顯示心率數(shù)據(jù)，無法生成心率統(tǒng)計(jì)圖表。

圖片

圖片

通過咕咚APP連接心率帶，開啟運(yùn)動(dòng)后可以監(jiān)測心率變化，但劃船機(jī)不在支持的運(yùn)動(dòng)范圍內(nèi)。

自己簡單實(shí)現(xiàn)了一個(gè)劃船機(jī)節(jié)拍器的小程序。

圖片

圖片

圖片

于是萌生了在自己的節(jié)拍器小程序內(nèi)監(jiān)聽心率數(shù)據(jù)的想法，即Taro小程序中的藍(lán)牙應(yīng)用實(shí)踐。

二、簡單了解藍(lán)牙

對于概念類的知識(shí)筆者畢竟不是專業(yè)的，感興趣的同學(xué)可以通過百科、搜索引擎等渠道進(jìn)行了解。這里僅簡單介紹接下來會(huì)運(yùn)用到的一些知識(shí)。

中心設(shè)備/外圍設(shè)備

客戶端（中心設(shè)備）：在本次實(shí)踐中為筆者的手機(jī)。

服務(wù)端（外圍設(shè)備）：在本次實(shí)踐中為心率帶、耳機(jī)等設(shè)備。

BLE（Bluetooth Low Energy）

藍(lán)牙低能耗技術(shù)，實(shí)現(xiàn)設(shè)備間的連接與通信。顧名思義，能耗與成本都更低，與之相對應(yīng)的則稱為經(jīng)典藍(lán)牙?；诠P者的開發(fā)目的，本文簡單了解設(shè)備連接前（GAP）和連接后（GATT）所涉及的兩個(gè)協(xié)議。

（了解更多：藍(lán)牙低能耗——百度百科[1]、一文讀懂藍(lán)牙技術(shù)從 1.0 到 5.0 的前世今生[2]）

GAP（Generic Access Profile）

主要用來控制設(shè)備連接和廣播。通常是由外圍設(shè)備主動(dòng)、間隔性地廣播設(shè)備信息，等待中心設(shè)備發(fā)現(xiàn)并建立連接。需要注意的是，這種連接方式是獨(dú)占的，在建立連接后，外圍設(shè)備將停止廣播。

另一方面，還存在僅向外廣播而不建立連接的iBeacon設(shè)備。

GATT（Generic Attribute Profile）

定義了兩個(gè)設(shè)備間的數(shù)據(jù)傳輸方式。GATT中有兩個(gè)關(guān)鍵概念：service（服務(wù)）與characteristic（特征）。

Service就是一個(gè)獨(dú)立的邏輯項(xiàng)，它包含一個(gè)或多個(gè)Characteristic。

Characteristic是GATT中最小的邏輯數(shù)據(jù)單元，其屬性包含properties，標(biāo)識(shí)該特性是否能夠被read、write、notify、indicate。notify與indicate的區(qū)別在于，indicate需要有回復(fù)才能發(fā)送下一個(gè)數(shù)據(jù)包。

每個(gè)服務(wù)和特性都具有唯一的UUID標(biāo)識(shí)，其中部分是由Bluetooth SIG官方定義的， Assigned Numbers | Bluetooth? Technology Website[3]，如設(shè)備名、心率數(shù)據(jù)等常用屬性都是官方定義來統(tǒng)一規(guī)范。此外UUID也可以由硬件工程師來自定義實(shí)現(xiàn)。

（了解更多：BLE相關(guān)協(xié)議（GAP&GATT）[4]）

三、API簡介

Taro中的藍(lán)牙API

Taro.openBluetoothAdapter(option) | Taro 文檔[5]

初始化藍(lán)牙模塊

Taro.openBluetoothAdapter({
      success: function (res) {
        console.log("藍(lán)牙環(huán)境已啟動(dòng)：", res);
        setInitStatus(true);
      },
      fail: function (err) {
        if (err.errMsg.includes("fail already opened")) {
          console.log("藍(lán)牙環(huán)境原先已啟動(dòng)：", err);
          setInitStatus(true);
        } else {
          console.log("藍(lán)牙環(huán)境啟動(dòng)失?。?, err);
          setInitStatus(false);
        }
      },
    });

Taro.getBluetoothDevices(option) | Taro 文檔[6]

獲取在藍(lán)牙模塊生效期間所有已發(fā)現(xiàn)的藍(lán)牙設(shè)備。包括已經(jīng)和本機(jī)處于連接狀態(tài)的設(shè)備。

discoverInterval = setInterval(() => {
        Taro.getBluetoothDevices({
          success: async function (res) {
            const canConnectDevices = res.devices.filter(
              (item) =>
                // 信號(hào)強(qiáng)度大于-80
                item.RSSI > -80 &&
                // 含有設(shè)備名
                !["未知設(shè)備", "MBeacon"].includes(item.name)
            );
            console.log("獲取藍(lán)牙設(shè)備列表成功：", canConnectDevices);

            setDeviceList(() => canConnectDevices);
          },
        });
      }, 2000);

也可以使用 Taro.onBluetoothDeviceFound(callback) | Taro 文檔[7]來發(fā)現(xiàn)設(shè)備。

Taro.createBLEConnection(option) | Taro 文檔[8]

連接低功耗藍(lán)牙設(shè)備。

若小程序在之前已有搜索過某個(gè)藍(lán)牙設(shè)備，并成功建立連接，可直接傳入之前搜索獲取的 deviceId 直接嘗試連接該設(shè)備，無需進(jìn)行搜索操作。

Taro.createBLEConnection({
        deviceId,
        success: function (res) {
          console.log("設(shè)備連接成功", res);
          setConnectDeviceId(deviceId);

          Taro.onBLEConnectionStateChange(function (res) {
            // 該方法回調(diào)中可以用于處理連接意外斷開等異常情況
            console.log(
              `設(shè)備 ${res.deviceId}連接狀態(tài)發(fā)生變化: ${res.connected}`
            );
            if (!res.connected) {
              setConnectDeviceId("");
            }
          });
        },
      });

Taro.getBLEDeviceServices(option) | Taro 文檔[9]

獲取藍(lán)牙設(shè)備所有服務(wù)(service)。

Taro.getBLEDeviceServices({
  // 這里的 deviceId 需要已經(jīng)通過 createBLEConnection 與對應(yīng)設(shè)備建立鏈接
  deviceId,
  success: function (res) {
    console.log('device services:', res.services)
  }
})

Taro.getBLEDeviceCharacteristics(option) | Taro 文檔[10]

獲取藍(lán)牙設(shè)備某個(gè)服務(wù)中所有特征值(characteristic)。

Taro.getBLEDeviceCharacteristics({
  // 這里的 deviceId 需要已經(jīng)通過 createBLEConnection 與對應(yīng)設(shè)備建立鏈接
  deviceId,
  // 這里的 serviceId 需要在 getBLEDeviceServices 接口中獲取
  serviceId,
  success: function (res) {
    console.log('device getBLEDeviceCharacteristics:', res.characteristics)
  }
})

Taro.readBLECharacteristicValue(option) | Taro 文檔[11]

讀取低功耗藍(lán)牙設(shè)備的特征值的二進(jìn)制數(shù)據(jù)值。注意：必須設(shè)備的特征值支持 read 才可以成功調(diào)用。

接口讀取到的信息需要在onBLECharacteristicValueChange 方法注冊的回調(diào)中獲取。

Taro.notifyBLECharacteristicValueChange(option) | Taro 文檔[12]

啟用低功耗藍(lán)牙設(shè)備特征值變化時(shí)的 notify 功能，訂閱特征值。注意：必須設(shè)備的特征值支持 notify 或者 indicate 才可以成功調(diào)用。

另外，必須先啟用 notifyBLECharacteristicValueChange 才能監(jiān)聽到設(shè)備 characteristicValueChange 事件

Taro.onBLECharacteristicValueChange(callback) | Taro 文檔[13]

監(jiān)聽低功耗藍(lán)牙設(shè)備的特征值變化事件。必須先啟用 notifyBLECharacteristicValueChange 接口才能接收到設(shè)備推送的 notification。

WEB藍(lán)牙API

此處貼一些資料，感興趣可自行閱讀

Web Bluetooth API - Web APIs | MDN[14]

通過 JavaScript 與藍(lán)牙設(shè)備通信[15]

四、設(shè)備名稱（Device Name）詳解

首先getBLEDeviceServices獲取到服務(wù)列表：

圖片

查詢資料

圖片

可知0x1800是我們需要的服務(wù)。getBLEDeviceCharacteristics獲取其特征列表：

圖片

查詢資料

圖片

可知0x2A00是我們需要的特征。此時(shí)可以看到read屬性為true，我們通過onBLECharacteristicValueChange和readBLECharacteristicValue讀一下數(shù)據(jù)看看。

Taro.onBLECharacteristicValueChange(function (characteristic) {
      const buffer = characteristic.value
      const unit8Array = new Uint8Array(buffer);
      console.log("unit8Array: ", unit8Array);
      
      // 轉(zhuǎn)字符串
      const encodedString = String.fromCodePoint.apply(null, unit8Array);
      console.log('設(shè)備名：', encodedString)
  });
  
  Taro.readBLECharacteristicValue({
    deviceId,
    serviceId: DeviceNameService,
    characteristicId: DeviceNameCharacteristics,
  });

得到輸出，某米耳機(jī)：

圖片

圖片

大家應(yīng)該已經(jīng)發(fā)現(xiàn)，給到的特征值其實(shí)是ArrayBuffer格式。

（了解更多：談?wù)凧S二進(jìn)制:File、Blob、FileReader、ArrayBuffer、Base64 - 掘金[16]）

此時(shí)需要我們將其轉(zhuǎn)化為字符串。除了上面的方法外，還可以先轉(zhuǎn)16進(jìn)制，再轉(zhuǎn)字符串：

// 轉(zhuǎn)16進(jìn)制
 const hexString = Array.prototype.map
    .call(unit8Array, function (bit) {
      return ("00" + bit.toString(16)).slice(-2);
    })
    .join("");
 console.log("hexString: ", hexString);
  
 // 16進(jìn)制轉(zhuǎn)字符串
 const hex2String = (hexString:string) => {
     if (hexString.length % 2) return "";
     var tmp = "";
     for (let i = 0; i < hexString.length; i += 2) {
        tmp += "%" + hexString.charAt(i) + hexString.charAt(i + 1);
     }
     return decodeURI(tmp);
 }

五、心率測量（Heart Rate Measurement）詳解

同樣，首先我們拿到了所需的服務(wù)和特征如下。

export const HEART_RATE_SERVICE_UUID =
    "0000180D-0000-1000-8000-00805F9B34FB";
export const HEART_RATE_CHARACTERISTIC_UUID =
     "00002A37-0000-1000-8000-00805F9B34FB";

在設(shè)備連接后，通過onBLECharacteristicValueChange和notifyBLECharacteristicValueChange訂閱特征值變化。

export const blueToothGetHeartRate = (
  deviceId: string,
  onHeartRateChange: (newHeartRate: number) => void
) => {
  Taro.onBLECharacteristicValueChange(function (characteristic) {
    const heartRateValue = getHeartRateValue(characteristic.value);
    onHeartRateChange(heartRateValue);
  });
  Taro.notifyBLECharacteristicValueChange({
    state: true, // 啟用 notify 功能
    deviceId,
    serviceId: HEART_RATE_SERVICE_UUID,
    characteristicId: HEART_RATE_CHARACTERISTIC_UUID,
  });
};

此時(shí)我們已經(jīng)能夠獲取到心率帶發(fā)送的心率數(shù)據(jù)如下。

圖片

但是此時(shí)如果按照上文解析設(shè)備名稱的方式，將其轉(zhuǎn)化為字符串，將得到一串亂碼。

圖片

所以需要根據(jù)協(xié)議文檔（https://www.bluetooth.com/specifications/specs/heart-rate-service-1-0/）來解讀這幾個(gè)數(shù)據(jù)。

標(biāo)志字段：

  • 二進(jìn)制：10110、十進(jìn)制：22、十六進(jìn)制：16
  • 其中位0為心率格式位，決定心率數(shù)據(jù)是uint8（位0 === 0）還是unit16（位0 === 1）

圖片

  • 位1、位2為傳感器接觸狀態(tài)位。11表示支持皮膚接觸檢測且接觸正常。
  • 位3為能量消耗狀態(tài)位，0表示能量消耗字段不存在.
  • 位4為RR-Interval狀態(tài)位，1表示存在一個(gè)或多個(gè) RR-Interval 值。

心率數(shù)值：

  • 二進(jìn)制：1100101、十進(jìn)制：101、十六進(jìn)制：65
  • 當(dāng)心率小于255時(shí)，unit8足以。但如果需要支持更高的心率值（某些動(dòng)物），則需要為unit16

圖片

  • 此時(shí)我們根據(jù)標(biāo)志字段0，已經(jīng)能夠獲取到需要的心率值：101。那么還剩下兩個(gè)字段代表什么意思呢？

RR-intreval 心率間隔：

  • 從前面的標(biāo)志字段分析中，我們發(fā)現(xiàn)該設(shè)備不支持能量消耗狀態(tài)但支持RR-interval。且RR-interval可能是一位也可能是多位。那么我們該怎么讀取這個(gè)數(shù)字呢？
  • 首先我們顧名思義，心率間隔就是兩次心跳間的間隔時(shí)長，從上面的心率值推算：
  • 60*1000/101 ≈594ms
  • 接下來看這兩個(gè)數(shù)字。
  • 二進(jìn)制：1010010、十進(jìn)制：82、十六進(jìn)制：52
  • 二進(jìn)制：10、十進(jìn)制：2、十六進(jìn)制：02
  • 嘗試2*256+82 = 594，謎團(tuán)解開了～

圖片

六、總結(jié)與疑惑

至此整個(gè)藍(lán)牙心率設(shè)備數(shù)據(jù)獲取的實(shí)現(xiàn)就完成了，可以在使用節(jié)拍器的同時(shí)監(jiān)控自身的心率數(shù)據(jù)了。

圖片

整體來說整個(gè)開發(fā)過程還是比較簡單的，畢竟API文檔描述的非常清晰，主要時(shí)間耗費(fèi)在解讀心率數(shù)據(jù)這個(gè)過程，后來知道應(yīng)該從協(xié)議文檔出發(fā)解讀就好說了。

由于是在業(yè)余時(shí)間實(shí)現(xiàn)的上述能力，開發(fā)過程中存在不少疑惑沒來得及研究。這里先拋兩個(gè)問題出來，希望了解相關(guān)知識(shí)的同學(xué)能夠不吝賜教。

  • 在arraybuffer轉(zhuǎn)16進(jìn)制過程中("00" + bit.toString(16)).slice(-2);?，為什么要先"00" +?，然后再.slice(-2)?？直接bit.toString(16)是否可行？
  • 針對某米耳機(jī)，筆者暫時(shí)沒有在服務(wù)和特征中找到電量信息相關(guān)的數(shù)據(jù)，那么手機(jī)設(shè)備又是如何獲取到耳機(jī)電量的呢？

猜測電池服務(wù)和特性分別是0x180F Battery service 和 0x2A19 Battery Level ，但上圖耳機(jī)返回的service列表中沒找到該服務(wù)。

圖片

本文作者正在等待你的幫助。

參考資料

[1]藍(lán)牙低能耗——百度百科: https://baike.baidu.com/item/%E8%93%9D%E7%89%99%E4%BD%8E%E8%83%BD%E8%80%97

[2]一文讀懂藍(lán)牙技術(shù)從 1.0 到 5.0 的前世今生: https://zhuanlan.zhihu.com/p/37717509

[3]Assigned Numbers | Bluetooth? Technology Website: https://www.bluetooth.com/specifications/assigned-numbers/

[4]BLE相關(guān)協(xié)議（GAP&GATT）: https://www.jianshu.com/p/62eb2f5407c9

[5]Taro.openBluetoothAdapter(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth/openBluetoothAdapter

[6]Taro.getBluetoothDevices(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth/getBluetoothDevices

[7]Taro.onBluetoothDeviceFound(callback) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth/onBluetoothDeviceFound

[8]Taro.createBLEConnection(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/createBLEConnection

[9]Taro.getBLEDeviceServices(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/getBLEDeviceServices

[10]Taro.getBLEDeviceCharacteristics(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/getBLEDeviceCharacteristics

[11]Taro.readBLECharacteristicValue(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/readBLECharacteristicValue

[12]Taro.notifyBLECharacteristicValueChange(option) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/notifyBLECharacteristicValueChange

[13]Taro.onBLECharacteristicValueChange(callback) | Taro 文檔: https://docs.taro.zone/docs/apis/device/bluetooth-ble/onBLECharacteristicValueChange

[14]Web Bluetooth API - Web APIs | MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API

[15]通過 JavaScript 與藍(lán)牙設(shè)備通信: https://web.dev/i18n/zh/bluetooth/

[16]談?wù)凧S二進(jìn)制:File、Blob、FileReader、ArrayBuffer、Base64 - 掘金: https://juejin.cn/post/7148254347401363463#heading-9

責(zé)任編輯：武曉燕 來源： ELab團(tuán)隊(duì)
前端藍(lán)牙心率帶
相關(guān)推薦

2018-12-06 09:12:58

2020-06-12 09:20:33

前端Blob字符串

2020-07-28 08:26:34

WebSocket瀏覽器

2011-09-15 17:10:41

2022-10-13 11:48:37

Web共享機(jī)制操作系統(tǒng)

2009-12-10 09:37:43

2021-02-01 23:23:39

FiddlerCharlesWeb

2010-08-23 09:56:09

Java性能監(jiān)控

2011-05-29 17:04:10

筆記本體驗(yàn)

2020-09-15 08:35:57

TypeScript JavaScript類型

2022-11-04 08:19:18

gRPC框架項(xiàng)目

2021-12-29 11:38:59

JS前端沙箱

2021-10-17 13:10:56

函數(shù)TypeScript泛型

2021-12-22 09:08:39

JSON.stringJavaScript字符串

2012-11-23 10:57:44

Shell

2015-06-19 13:54:49

2020-08-11 11:20:49

Linux命令使用技巧

2015-10-23 08:51:18

應(yīng)用暗知識(shí)發(fā)現(xiàn)

2025-03-17 00:45:00

JavaScriptAPI頁面

2024-10-21 17:46:54

前端開發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)