2

我正在开发一个名为 Web Bluetooth 的 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，但它不起作用。所以请建议我该怎么做？谢谢你。

4

2 回答 2

4

现在，您实际上可以使用蓝牙 API 的高度实验性功能来扫描信标。另请参阅WC3 草案：“Web 蓝牙扫描”，日期为 2020 年 7 月 1 日。

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

在此处输入图像描述

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

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);
  }
}

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

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

示例应用 Javascript

这是一个带有上面代码的 JSFiddle，用于快速而肮脏的控制台日志测试。

示例 Angular 应用程序

这里是 StackBlitz 中一个小型 Angular 扫描应用程序的链接，这里是 StackBlitz 编辑器中代码的链接。现在我主要测试了 Eddystone，我仍然需要确认 iBeacon 广告的工作原理。

于 2020-11-27T06:50:32.300 回答
0

不幸的是，Chrome 尚未在任何平台上的 WebBluetoorh API 中实现蓝牙扫描。有关详细信息，请参阅状态页面：

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

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

于 2019-02-20T13:19:27.557 回答