CODEWITHSUNDEEP
ibeaconprogressive-web-appsweb-bluetooth
Tej Chaugule
Tej Chaugule

Reputation: 21

How to find beacons using Web Bluetooth?

I am working on a PWA called Web Bluetooth and trying to scanfilter only beacons and after pairing to display its uuid, major, minor values. So here is the script code :

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

When I run the code, I get the error saying

Cannot read property 'addEventListener' of null .

I have tried suggestions like add window.onload = function and it doesn't work. So please suggest as to how do I go about this ? thank you.

Upvotes: 2

Views: 4328

Answers (2)

davidgyoung
davidgyoung

Reputation: 64916

Unfortunately, Chrome has not released Bluetooth scanning in the WebBluetoorh API on any platform.

As of August 2023 this does exist as an experimental feature on Android and MacOS versions of Chrome that you must unlock manually in Chrome to use.

See the status page for details:

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

Bottom line: You may be able to use this as a tool on a personal device, but you cannot use this on an app you share because you cannot others to enable experimental Chrome features. Unless this feature is enabled and working on a browser, you cannot detect beacons using WebBluetooth.

Upvotes: -1

Wilt
Wilt

Reputation: 44326

You can actually scan for beacons now using the highly experimental features of the bluetooth API. See also this WC3 draft: "Web Bluetooth Scanning" dated the 1 July 2020.

For scanning you use the requestLEScan command on the bluetooth API. For this to work you need a Chrome browser (>79) and enable the Experimental Web Platform Features through the Chrome flags configuration panel (chrome://flags). This is because it is not yet an official standard. Seems also that Chrome is currently the only browser supporting this feature (see here an overview of different web bluetooth features and their support on different platforms and the Scanning API in specific here).

enter image description here

Once enabled you can do something like (I will improve this example later):

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

See for reference this code example:

And to quickly test in your Chrome browser you could check this example:

Example app Javascript

Here a JSFiddle with the code above for a quick and dirty console log test.

Example Angular application

Here a link to a small Angular scanning application in StackBlitz and here the link to the code in the StackBlitz editor. For now I mostly tested for Eddystone, I need to still confirm workings for iBeacon advertisements.

Upvotes: 4

Related Questions