WebBluetooth使ってみた

WebBluetoothについて勉強する機会があったので、BLE（Bluetooth Low Energy）プリンタを使って試してみました。
今回はWebブラウザに入力したテキストをBLEプリンタに印刷させるプログラムを作成しました。
ソースコードはGithubにあります。
https://github.com/Kenty250/WebBluetoothTest

WebBluetooth概要

Webブラウザ（JavaScript）からBLE通信ができる
HTTPS上でのみ動作する
すべてのWebブラウザが対応しているわけではない
対応状況はCan I useで確認可能。
今回試したのはAndroidのChromeブラウザです。

ATT/GATTについて

ATT(Attribute Protocol)はBLE通信で双方が持つ属性(Attribute)データを確認するプロトコル
GATT(Generic attribute profile)はATTを用いてデータを構造化する方法とアプリケーション間でのデータのやり取りの方法を定義する
BLEのアプリケーションではデータ転送にGATTを使用する

この辺は以下のWebページが参考になりました。
GATTとは

WebBluetooth（というかBLE）について調べていると、「Service」とか「Characteristic」といった言葉が出てきますが、これらはGATTを構成する要素を指しています。

BLE通信の流れ（ペアリングまで）

BLE通信のペアリングまでの大まかな流れは以下のような感じです。

今回はプリンタを操作したいので、セントラル（デバイスをスキャンする）側のプログラムを作成します。
プログラムとしては、上図の②と③を実装する必要があります。
JavaScriptのコードは以下になります。

printButton.addEventListener('click', function () {
  // ペアリングしていなければプリンタをスキャン・ペアリングしてから印刷
  if (printCharacteristic == null) {
    // Bluetoothデバイスを取得（取得したデバイスが画面に表示される）
    navigator.bluetooth.requestDevice({
      // ペアリングするBluetoothデバイスを取得する際のフィルタを設定(JSON形式)
      filters: [{
        // プリンタのService UUIDでフィルタをかけ、スキャンの時に関係ないBluetooth端末が表示されないようにする
        services: ['000018f0-0000-1000-8000-00805f9b34fb']
      }]
    })
    .then(device => {
      // ユーザが選択したBluetoothデバイスと接続
      return device.gatt.connect();
    })
    // プリンタのServiceを取得
    .then(server => server.getPrimaryService("000018f0-0000-1000-8000-00805f9b34fb"))
    // プリンタServiceのWriteProperty(Characteristic)を取得
    .then(service => service.getCharacteristic("00002af1-0000-1000-8000-00805f9b34fb"))
    .then(characteristic => {
      // characteristicを保持
      printCharacteristic = characteristic;
      sendTextData();
    })
    .catch(handleError);
  }
  // ペアリング済みならば印刷処理のみ実施
  else
  {
    sendTextData();
  }
});

GATTはサーバ－クライアント方式のアーキテクチャで、ServiceやCharacteristicを持つペリフェラルがGATTサーバになります。

// プリンタのServiceを取得
    .then(server => server.getPrimaryService("000018f0-0000-1000-8000-00805f9b34fb"))

セントラルが親機でペリフェラルが子機みたいなイメージがあるのですが、GATTではペリフェラルがサーバでセントラルがクライアントになるので、この辺で私はちょっと混乱しました。。。

UUIDはServiceやCharacteristicにアクセスするための固有のIDです。
標準のUUIDはBluetooth SIGで定義されていて、以下のWebサイトで確認できます。
https://www.bluetooth.com/specifications/assigned-numbers/

UUIDは無料スマホアプリで確認することもできます。
LightBlueを使ってBLEプリンタのUUIDを確認したところ、標準UUIDの共通部分が省略されていました。

BLE通信の流れ（データ送信）

続いて、データ送信です。
大まかな流れは以下のような感じです。

データを送信する場合は、データ送信先のデバイスの特定の領域（Characteristic）にデータを書き込むイメージです。
データを受信する場合は逆で、取得したいService-Characteristicのプロパティから値を読み取ることでデータを取得できます。

JavaScriptのコードは以下になります。

function sendTextData() {
  let encoder = new TextEncoder("utf-8");
  // '\u000A\u000D'はラインフィード＋キャリッジリターン(5つ連続しているのは紙送りのため)
  let text = encoder.encode(message.value + '\u000A\u000D\u000A\u000D\u000A\u000D\u000A\u000D\u000A\u000D');
  // writePropertyにテキストを書き込み
  return printCharacteristic.writeValue(text);
}

アプリの動作

WebBluetoothはHTTPS上でのみ動作するため、クラウドの勉強も兼ねてAWSに動作環境を構築しました。
アプリ自体はHTML+CSS+JavaScriptなので、Amazon S3にホスティングして、AWS Certificate ManagerでリクエストしたSSL/TLS証明書をAmazon CloudFrontに統合することでHTTPS通信に対応しました。
インフラ関係の手順は本題ではないので省略しますが、構成図は以下になります。

今回できなかったこと

本当は画像も印刷したかったのですが、AndroidだとBLEのMTUが20byteしかない（拡張できる？）らしく、うまくいかなかったのでテキストだけのアプリになりました。
送信データを20byteずつBLEプリンタに送ってみましたが、プリンタ側でうまく印刷できず画像が崩れてしまいました。

BLEのMTUはセントラル（GATTクライアント）によって異なるようで、512byteずつ画像データを送信するとMacのChromeからは印刷できるけどAndroidのChromeからだと画像が崩れる、ということが起きました。（このとき使用したアプリ）

GATTクライアントのMTUの最大サイズを取得することもできるみたいですが、BLEプリンタ側で20byteずつ受信した画像データをうまく印刷できないので、どのみちAndroidのChromeでBLEプリンタに画像を印刷させるのは難しそうです。
おそらくBLE自体、通知を送ったりセンサデータを取得したりといった低容量のデータ送信をメインに想定していると思うので、画像を印刷しようとしたのがそもそも良くなかったのかもしれません。

【WebBluetooth】WebブラウザからBLEプリンタを操作してみた