DEV Community

Cover image for The amazing powers of the web: Web Serial API

The amazing powers of the web: Web Serial API

Diego Coy on April 09, 2020

The Web Serial API The Web Serial API allows us to interact with serial devices by sending and receiving data from within a web browser....
Collapse
 
c00lnerd profile image
c00lnerd

I would like to use this to connect to HC-05, HC-06 devices for controlling arduinos boards.
Your web app doesn't seem to see those when I try to connect,
What do I need to do?

Collapse
 
unjavascripter profile image
Diego Coy

Indeed the example code is quite basic, you would need to update the arduino code to return the sensor readings and handle it on the browser side by catching the messages received by the read function. I'll check if I still have one of those sensors and maybe add it to the example code.

Collapse
 
alexbaro_pt profile image
alessandro

Great Job, you have saved my life

Collapse
 
eliasorggro profile image
eliasorggro

that's great dude !
really made my day
I'm wondering how to use this with a react application ...

Collapse
 
virtualillie profile image
Lillie Bahrami

Hey Diego, thanks for the great tutorial! I'm running your demo with an Arduino Duemilanove right now and am getting the error "error reading data: TypeError: Cannot read property 'read' of undefined" when I try to send messages. Any idea what could be causing that? Thanks again!

Collapse
 
unjavascripter profile image
Diego Coy

Hi Lillie, It seems like I didn't add a Serial message to be send back in the Arduino code. I just updated the repo and the example. Give it a try and let me know how it goes.

Collapse
 
virtualillie profile image
Lillie Bahrami

Works like a charm! Thank you Diego, excited to use this in my own projects :)

Thread Thread
 
unjavascripter profile image
Diego Coy

Please let me know what you create :D

Collapse
 
andresgamez profile image
Ændres Gámez

Hello Diego! Thanks for this, it's awesome and easy to implement. I just have one question...
When I run the project locally it works perfect but when I load it into a Elastic Beanstalk app running with ruby it seems like my browser doesn't have enabled "enable-experimental-web-platform-features" but it is enable. Any reason for this? Thanks in advance.

Collapse
 
unjavascripter profile image
Diego Coy

Hi, did you add an Origin Trial token to your app?

The enable-experimental-web-platform-features makes the API available for your browser when developing locally. Once you deploy it you'll need an Origin Trial token to make the browser load the API. Check developers.chrome.com/origintrials...

Collapse
 
andresgamez profile image
Ændres Gámez

It's working fine. Thanks man!
Another thing I had to do in order to use Serial API was adding a SSL certificate to my site.

Thread Thread
 
unjavascripter profile image
Diego Coy

Great to know! Yep, these new APIs require the web app to use HTTPS to be made available because they can be a risk if not loaded securely.

Collapse
 
mgorbet profile image
Matt Gorbet

I think either the experimental API was changed or your code is broken, because it doesn't run (either from here or gitHub) for me, but if I change 'baudrate' to 'baudRate' in your script it begins to work.

(I posted an issue on your github as well)

Collapse
 
oleksiiivanov profile image
Oleksii Ivanov

I definitely should blow away dust from my arduino xD. Good Job 👍

Collapse
 
unjavascripter profile image
Diego Coy

Thanks! Please do and let me know what you create :)