Putting ESP32 Sensor Data in the Browser With Web Serial
※本記事にはアフィリエイトリンクを含む場合があります。内容は広告の有無に影響されません。
結論
The Web Serial API requires a secure context and a user gesture to start a connection, so you must be on localhost or HTTPS and open the port from something like a button click.
What we built
An ESP32 plugged into a PC over USB, with a web app (Next.js) connecting directly to the serial port through the Web Serial API and showing the incoming sensor values as a live dashboard of graphs and numbers.
No dedicated application to install — open the browser and the data is there.
Why the web
- Nothing to install — opening a URL is all it takes. Easy to show someone, easy to hand out
- Freedom in the UI — everything React already gives you (charts, layout) applies directly, so you can build further than an off-the-shelf GUI tool
- The Web Serial API connects the browser straight to a USB serial port, closing the distance between a microcontroller and the web
Constraints
Web Serial has three constraints you cannot ignore. Check them before you start designing.
| Constraint | Detail |
|---|---|
| Browsers | Chrome and Edge only. Not Safari |
| Secure context | Only works on localhost or HTTPS |
| Connection origin | The port must be opened from a user gesture (no auto-connect) |
The third one shapes the design. You cannot have “opens the page and connects by itself”, so the UI is built around a connect button.
Decide these on the ESP32 side first
Baud rate and wire format (CSV or JSON). Starting without fixing them means rewriting the parsing on the receiving side repeatedly.
Where this setup fits
It works well when you are touching both hardware and web. If you want to concentrate on experiments on the microcontroller side, being able to push the display to an install-free browser is a different level of efficiency.
Conversely, because it is limited to Chrome and Edge, it is a poor fit when you cannot choose the audience’s browser. In that case a native application, or having the microcontroller push over HTTP, is the more honest option.
よくある質問
Q1Which browsers does it work in?
Chrome and Edge only. It does not work in Safari. It is a poor fit for anything where you cannot constrain which browser the audience uses.
Q2Can it connect automatically when the page loads?
No. Web Serial requires port selection to originate from a user gesture. Put a connect button on the page and open the port from that click.
Q3What should I decide on the ESP32 side first?
The baud rate and the wire format. Fixing CSV or JSON up front keeps the parsing on the receiving side simple. Changing it later means changing both sides.
この記事の根拠
- ドキュメントファイル
本文の主張は、上の記録に書かれていることだけです。運用しているリポジトリは非公開のため リンクは張れませんが、どのファイルの何行目を、どのコミット時点で見て書いたかは 記事ごとに残しています。推測で書いた箇所はありません。