Question

我正在研究一个称为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之类的建议，但它不起作用。因此，请建议我该如何处理？谢谢。

Answer 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/

示例应用

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

Answer 2

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

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

除非/直到进行此更改，否则这意味着您无法使用WebBluetooth检测信标。

如何使用Web Bluetooth查找信标？

2 个答案:

示例应用