Web Bluetooth APIを試す

Web bluetooth APIを試した時のメモ

概要

ブラウザからBluetoothにアクセスできるWeb Bluetooth API を試してみた時に作ったプログラムを貼っておきます。

準備

ペリフェラル機器

BLEは通信なので、通信相手が必要です。
市販機器を使うと仕様を調べるのが大変なので、エイヤッと自分で作っりました。
といっても Raspberry Pi Pico W にmicropythonのF/Wを書き込んでプログラム実行するだけ。
(使用したmicropython F/Wは「MicroPython v1.23.0 on 2024-06-02」です)

以前に書いたRaspberry Pi Pico Wでmicropython with Visual Studio Code が参考になるかも。 と言ってもWi-Fiとか要らないからパクり先のリンク貼ってあるだけだけど。

ということで、以下のソースを Raspberry Pi Pico で実行しておきます。
(特にH/W依存なことはしてないので、ESP32でも動くかも)

BLEの処理については「micropython aioble」とかでググってください。
でも、公式のサンプル動かした例ばっかりであんまりないんだよなぁ…

==懺悔==
UUIDはどっかのサンプルの値をちょこっといじったものです。
(調べたら温度計用のUUIDでした)
本来ならUUIDをちゃんと生成しないといけません。

Webサーバ

Web Bluetooth APIを使用するのは、HTMLファイルをHTTPSサーバからロードしなければならない仕様のようです。 (httpやfileでは不可)
ファイル1個だけなので、どこかのサーバの片隅に置くとかでも良いと思います。
ローカルでサーバを立てるならApacheとかnginxとかで立ててください。

[!NOTE] WindowsでApacheを使うならWindowsのApacheサーバーでSSL あたりが参考になりました。
ただし、仮の証明書を作るバッチファイルで、Apacheのインストール先がc:¥Apache24 以外の場合は 以下の設定を追加しておく必要があります。

SET OPENSSL_CONF=Apacheのインストール先≫\conf\openssl.cnf

インストール先をm:\Apache24にした場合の変更例はこんな感じ。

--- aaa.txt     2024-07-29 06:58:34.154735900 +0900
+++ make-snakeoil-cert.bat      2024-07-26 05:09:37.394502700 +0900
@@ -1,8 +1,11 @@
 REM openssl.exe
-SET OPENSSL=c:\Apache24\bin\openssl.exe
+SET OPENSSL=m:\Apache24\bin\openssl.exe
+
+REM openssl.cnf
+SET OPENSSL_CONF=m:\Apache24\conf\openssl.cnf

 REM 証明書用データの出力場所
-SET ROOTDIR=c:\Apache24\certs
+SET ROOTDIR=m:\Apache24\certs

 REM サーバーのドメインまたはIPアドレス
 SET IPADDRESS=localhost

HTMLファイル

Web Bluetooth API のサンプルプログラムを以下に示します。
これをHTTPSサーバに置いておきます

実験

ペリフェラルプログラムを動作させておき、 ブラウザで上記HTMLファイルを開きます。

アクセスするPCやスマホはBLE対応のBluetoothが搭載されている必要があります。
ブラウザはChromeかEdge(は試してないけど)で。(firefox不可)

WindowsPCとAndroidスマホのChromeは動作確認しました。
macとiPhoneは持ってないので試してません。

次に「接続」ボタンをクリック、「XXXXXがペア接続を要求しています」ダイアログが出るので 「mpy-sensor」を選択し、「ペア設定」をクリックします。

接続されると DATA1 に受信したデータを表示します。
DATA1はNotificationありのデータ読み取りです。
Notificationイベントを受けてデータを読み取ります。
上は1行を常に書き換えるタイプ。
下は過去分を含め10行程度表示(それ以前は削除)するタイプです。
受診自体は1回でページの書き換え処理を2通り行っています。

DATA2はNotificationなしのデータ読み取りです。
READボタンをクリックすると読み取った値を表示します。

測定間隔のテキストボックスに数値を入力し、「WRITE」をクリックすると DATA1の取得間隔を変更できます。
値は100~5000が有効で、範囲外の値が設定されると範囲内の値に補正されます(補正はペリフェラル川で行っています)。

接続を終了するには「切断」をクリックします。

操作例

操作例の動画