Access serial devices directly from the browser

Some days ago, Gustavo Tamanaka (https://github.com/gtamanaka) told me about the new Web Serial API , which is experimental in Google Chrome, but something we have been waiting for a long time. Basically, it allows a JavaScript application running on the browser to directly access the Serial / USB-Serial port without any extension or additional driver / software. This is something really interesting, because it does not require special hardware or UID as WebUSB requires. I tested it with several devices, and all worked smoothly: ESP8266, ESP32, Arduino Uno, Arduino Mega and some USB-Serial converter modules based on CH341, CP210x and PL3332 / FT32.

The feature is very recent and its specification can be found in this W3C Communicty Draft:
https://wicg.github.io/serial/

I played a bit with these nice examples:

PlotSer (Plot a real time graph from data received on the serial port) https://labs.vaadin.com/plotser/

Web-Serial-API (Send data to a LED or receive analog reading from Arduino) https://github.com/svendahlstrand/web-serial-api

After that, I thought that a really useful simple tool would be an online Serial Terminal, such as miniterm, minicom, PuTTY, TeraTerm or other desktop serial terminal application, but online! And after some coding, it works. You can simply access one of the URLs below and access your serial port! 🙂

Working examples:

https://ain.ufscar.br/aroca/web-serial-terminal/

https://bipes.net.br/aroca/web-serial-terminal/

I took me some time to figure this, but note that due to security concerns, it will only work if served from a HTTPS server or locally from the filesystem. If the content is served from HTTP, the serial object will not be available and the button will be disabled.

Another important point: it works on vanilla/standard Google Chrome, but Experimental Web Platform Features must be enabled in
chrome://flags (#enable-experimental-web-platform-features).

Source Code:
https://github.com/rafaelaroca/web-serial-terminal

One of my main interests in this technology was to integrated it on project BIPES (http://www.bipes.net.br/), an open source tool to easily program several devices using Blocks (Blockly) and/or Python (MicroPython) all directly from the browser. The original BIPES communicates with the embedded devices using WebREPL protocol from MicroPython, which only works over HTTP. In that way, I had some trouble with HTTP (WebREPL) versus HTTPs (Web Serial API), so one solution was to have two BIPES versions – one with Web Serial and one with WebREPL:

BIPES with WebREPL (Wifi / network access to embedded devices) http://bipes.net.br/beta2/ui/#

BIPES with Web Serial API (USB connection to embedded devices) https://bipes.net.br/beta2serial/ui/#

(note that WebREPL version must be accessed with HTTP and Web Serial version must be accessed using HTTPS)

Finally, I forked the WebREPL (https://micropython.org/webrepl/) online client from MicroPython, which is really useful for the MicroPython community. Forked it into
https://github.com/rafaelaroca/webrepl and added Web Serial feature! Now it is possible to use WebREPL over network or directly by using USB Cable. The only sad part is the HTTP x HTTPs issues, depending on how you want to use WebREPL.

Hope this post is useful for someone 🙂

Cheers!

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s