コンテンツへスキップ

WebブラウザからBluetooth接続できるWeb Bluetoothを試す

by : 2017/10/10

HTML5の新しいAPIの中でも特に先進的なAPIがWeb Bluetoothです。Google Chrome60以降、Androidのブラウザでも56以降でしかサポートされていないAPIになります。しかしWebブラウザがBluetooth通信をサポートする各種デバイスと通信できることで様々な使い道が考えられます。

今回はそんなWeb Bluetoothの簡単な使い方を紹介します。

コードについて

Web Bluetoothを扱う場合にはPromise処理が連続して行われます。例えば今回はバッテリーレベルを取得します。

まずWeb Bluetoothをサポートしているかどうかは navigator.bluetooth の有無で判定します。

navigator.bluetooth

view raw
index.js
hosted with ❤ by GitHub

次にバッテリーサービス(battery_service)をサポートしているデバイスを探します。

navigator.bluetooth.requestDevice({
filters: [{
services: ['battery_service']
}]})

view raw
index.js
hosted with ❤ by GitHub

この時点でGoogle ChromeにBluetoothデバイスを一覧するダイアログが表示されます。この中から接続したいデバイスを選択します。

接続がうまくいくとデバイス情報が返ってきますので、接続の認証処理を行います。

.then(device => {
return device.gatt.connect();
})

view raw
index.js
hosted with ❤ by GitHub

接続がうまくいったら、バッテリーサービスを取得します。

.then(server => {
return server.getPrimaryService('battery_service');
})

view raw
index.js
hosted with ❤ by GitHub

さらにバッテリーサービスからデータを読み書きするためのキャラクタリステックを取得します。

.then(service => {
return service.getCharacteristic('battery_level');
})

view raw
index.js
hosted with ❤ by GitHub

キャラクタリステックが取得できたら、そのデータを読み取ります。

.then(characteristic => {
return characteristic.readValue();
})

view raw
index.js
hosted with ❤ by GitHub

最後に読み取ったデータを数値に変換して完了です。

.then(value => {
let batteryLevel = value.getUint8(0);
console.log(`> バッテリーレベルは${batteryLevel}%です`);
})

view raw
index.js
hosted with ❤ by GitHub

そうするとログメッセージが表示されます。

> バッテリーレベルは46%です

view raw
index.js
hosted with ❤ by GitHub


エラーが出た場合にはcatchメソッドを用意しておけば、そこがコールされます。データの読み取りについてはとても簡単にできます。Bluetoothには提供するサービス(プロファイル)が多数あり、それによって実装方法も異なってきますので注意してください。

バッテリーサービスについてはWeb Bluetooth / Battery Level Sampleにて確認できます。また、AndroidアプリのBLE Peripheral Simulatorを使うことで可変できるバッテリー情報を送信できます。お試しください。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。