如何使用网络蓝牙找到信标？答案

【问题标题】：How to find beacons using Web Bluetooth?如何使用网络蓝牙找到信标？
【发布时间】：2021-03-16 15:39:32
【问题描述】：

我正在开发一个名为 Web 蓝牙的 PWA，并尝试仅扫描过滤信标，并在配对后显示其 uuid、major、minor 值。所以这里是脚本代码：

<script>
         function onClickButton() {
            var known_service = "battery_service";
            return navigator.bluetooth.requestDevice({
                filters: [{ services: [known_service] }]

            })
                .then(() => {

                    navigator.bluetooth.addEventListener('advertisementreceived', event => {
                        var rssi = event.rssi;
                        var appleData = event.manufacturerData.get(0x004C);
                        if (appleData.byteLength != 23 ||
                            appleData.getUint16(0, false) !== 0x0215) {
                            console.log({ isBeacon: false });
                        }
                        var uuidArray = new Uint8Array(appleData.buffer, 2, 16);
                        var major = appleData.getUint16(18, false);
                        var minor = appleData.getUint16(20, false);
                        var txPowerAt1m = -appleData.getInt8(22);
                        console.log({
                            isBeacon: true,
                            uuidArray,
                            major,
                            minor,
                            pathLossVs1m: txPowerAt1m - rssi
                        });
                    });
                })
        }
    </script>

当我运行代码时，我收到错误提示

无法读取 null 的属性“addEventListener”。

我尝试了添加window.onload = function 之类的建议，但它不起作用。所以请建议我该怎么做？谢谢你。

【问题讨论】：

标签： ibeacon progressive-web-apps web-bluetooth

【解决方案1】：

您现在实际上可以使用蓝牙 API 的高度实验性功能来扫描信标。另请参阅日期为 2020 年 7 月 1 日的 this WC3 draft: "Web Bluetooth Scanning"。

您可以使用蓝牙 API 上的requestLEScan 命令进行扫描。为此，您需要 Chrome 浏览器 (>79) 并通过 Chrome 标志配置面板 (chrome://flags) 启用实验性 Web 平台功能。这是因为它还不是官方标准。似乎 Chrome 也是目前唯一支持此功能的浏览器（请参阅here an overview 不同的网络蓝牙功能及其在不同平台上的支持以及Scanning API in specific here）。

启用后，您可以执行以下操作（稍后我会改进此示例）：

let scan;
const bluetooth = navigator.bluetooth;
const options = {
  acceptAllAdvertisements: true,
};

const logEvent = (event) => {
  //TODO: Do something with your event
  console.log(event);
}

const start = (event) => {
  const promise = navigator.bluetooth.requestLEScan(options);
  promise.then((result) => {
    scan = result;
    bluetooth.addEventListener('advertisementreceived', logEvent);
  });
}

const stop = (event) => {
  if (scan.active) {
    scan.stop();
    bluetooth.removeEventListener('advertisementreceived', logEvent);
  }
}

请参阅此代码示例以供参考：

https://googlechrome.github.io/samples/web-bluetooth/scan.html?allAdvertisements=true

要在您的 Chrome 浏览器中快速测试，您可以查看以下示例：

https://reelyactive.github.io/web-ble-demo/

示例应用 Javascript

Here a JSFiddle with the code above 进行快速而肮脏的控制台日志测试。

Angular 应用示例

Here a link to a small Angular scanning application in StackBlitz 和 here the link to the code in the StackBlitz editor。目前我主要测试了 Eddystone，我仍然需要确认 iBeacon 广告的工作原理。

【讨论】：

【解决方案2】：

很遗憾，Chrome 尚未在任何平台上的 WebBluetoorh API 中实现蓝牙扫描。详情见状态页：

https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md#scanning-api

除非/直到这种变化，这意味着您无法使用 WebBluetooth 检测信标。

【讨论】：