Web Bluetooth 開發心得

搭配 Arduino 建立建構可互動 Web System

Mar 5, 2022

之所以研究 Web Bluetooth 是因為想遠端控制 Braidiy，一種下廚時搭配教學影片的 Web 系統，因為下廚時通常手油油的或是手機放的遠遠的不好碰觸，所以開始思考如何透過遠端按鈕去操作系統。

準備

雖然主角是 Web Bluetooth，但這篇文章主要是提供一個整體方案，所以咱們先從硬體開始處理。

首先，主角是過年大掃除翻出來的藍牙晶片，搭配一些電子零件行買的按鈕組成，材料如下：

流程設計

起初是想透過 WebSocket 進行雙向控制，因此我考量了以下幾點：

突然間我就感到一陣疲倦，我只是不想手油油的碰到手機而已…卻得付出驚人的成本。

因此決定透過 Bluetooth 溝通，只要走的通，上面的鳥事通通可以無視。

Bluetooth？那務必獲取更高的作業系統權限，代表只要透過 Cordova 包版成 App 就可以了，畢竟 Braidiy 還有在 GooglePlay 上架呢。

但不知道為什麼怎麼設置都拿不到 Bluetooth 的權限，天真以為一天能搞定的我花了兩天都沒有進展，正當感到絕望之際，發現了 WebBluetooth API。

硬體

韌體設計思路很簡單，不接收任何資料，只不斷讀取指定 pin 的電壓，在按下按鈕瞬間就把低電壓的 pin 帶入藍牙傳輸的變數中即可。

程式碼如下：

電力供應方案，不知道為什麼 6v 串在一起的電池會導致不斷重開機，不過7697 有 Micro USB，所幸就拿行動電源作為 5v 電力提供的來源惹。

最後再翻開 LinkIt 7697 的文件，把線插進對應 pin 再接到任意 gnd 即可。

最終成品如下：

Web Site

設計思路是這樣的，從背景不斷輪詢 Bluetooth 傳遞的資料，然後解析現在已案下的按鈕，再透過 event 發送給應用端，改變現在播放的區塊。

Windows 系統上要透過 getCharacteristics 去取得另一組 uuid 才能連線成功，而 android 只要配對韌體定義的即可，這點我蠻不解的，有誰可以告訴我為什麼？

至於 Braidiy 是如何應用的這裡不做贅述，你都在看這麼這麼新潮的文章了，應該不需要說明太多，這裡只展示已封裝的模塊，稍微看一下應該就知道如何運作：

展示

結論

Web Bluetooth API 是一個強大的工具，可以讓 Web 應用有更多的可能，可惜的是，依照蘋果公司的策略應該是不可能讓 IOS 支援，因此很難使用在現階段的商業軟體上。

但或許能在某些特殊場合用上，例如公司內部的硬體控制、遙控器，或是小型物聯網系統的建立等等，透過這個方法都比建立一個正規的溝通手段還要方便許多，也可以當作 MVP 的先行方案等等。