Web Serial API

[00:00:00]
>> At this point, we're gonna kinda move into the slightly just experimental part of the show real quick just to kinda show you I think something kind of cool that's worth looking at. I don't need to Face Theremin running in the background anymore, is there is this thing called the web serial API.

[00:00:16]
And basically, like we talked about before, in Node.js, the original Node.js stuff that we saw before, there was serial port and then Fermata, and then Johnny-Five. And so what the web serial API does is basically serial port, but totally from the browser with no server side code whatsoever, right?

[00:00:37]
And so it is super interesting. In that Arduino starter kit, like I said before, the last project in that book is somebody was like, hey, take this thing and put it on a remote and control your remote from an Arduino, right? But you could theoretically send serial messages now from your browser to that remote, right?

[00:01:00]
And so, again, the interesting combination is where all this stuff comes together. So I have a little kind of example project in here. And there's not really any to-dos in here, but if we go, actually, I'll do this from VS Code. If we go into this web serial one, again, there are a whole bunch of other small projects in here.

[00:01:21]
And there's a repo code completed examples. Some of them are just setups with some buttons and stuff along those lines. Some of them kinda show you the implementation. But if you want it, there's a folder for getting the tilt center working, temperature, a lot of ones we didn't do together today.

[00:01:35]
Cuz, again, if you've gotten the light sensor working, do you know the process of getting the temperature sensor working? We could have just done that over and over and over again. But there are some extra places to play. But also if you saw, none of these really involve that much code, right?

[00:01:50]
We get the hardware working, the library gives us a lot of really great abstractions. We go into web-serial. There is a lot of boilerplate code in here. It is one of those things with a lot of the browser APIs. There are lots of libraries that we use on top of it, but we can kinda take a look and see.

[00:02:07]
And so if we look in lib, there's kind of the basic setup of this. There's a lot of stuff that you need to involve. And for the most part, Johnny-Five is probably your friend. I'm just kinda showing you that there are cool technologies doing this from the browser.

[00:02:19]
Hoping that if it inspires something in your neuro-frontal cortex that you wanna go and explore, awesome. For the most part, the stuff with Johnny-Five is the real kinda cool part. But this is something I discovered in my travels that I thought, hey, I'm not gonna keep it to myself.

[00:02:36]
You do need to make sure that it is one of the browsers that support it, also known as not Safari. I think I showed you in the very beginning, it's basically just the Chromium-based browsers as well. But there is the ability kind of basically you get a navigator.serial, which, again, is like serial port, we can request the port.

[00:02:55]
And if you look at the code for node serial port, you will notice some similarities in here, right? Now, this is incredibly low level. Again, with serial port, Fermata, Johnny-Five, the argument here is maybe one day, in the same way that those are stacked on top of each other, we might get a full browser-based version as well that we can interop with, too.

[00:03:16]
But you get the writer and the reader, and you are writing bytes, right, to this thing, right? And in fact, in this code, I am only gonna write a one or a zero to turn that built-in LED. We're going all the way back to the basics here. But basically, what we can say is on the click of the button, we take the serial, we're gonna write a bit of 1, cuz that's very easy to write.

[00:03:40]
I don't have to worry about serialization or anything like that. And then have it read the response back, and then on off, turn a 0. And so all that happens in the Arduino code is that same basic blink that we kinda saw before, which is we open up the serial port on 9600 baud, right?

[00:03:58]
We write a 1 over the serial buffer. If it reads that, it will turn the LED on, if it gets a 0, off. But it happens with zero node involved whatsoever. It is simply the Arduino running in the browser with directly from the web, which I think is incredibly cool, if it would work.

[00:04:17]
So with that, I am gonna now that I've closed Arduino completely, cuz I did the classic way that you solve all your problems in life, which is I turned it off, and I turned it back on. So I got a lot of hope. But looking at the Arduino code, it is very similar to what we saw in the very first moments.

[00:04:35]
The only difference is because I wrote it, I forgot that there was that LED built-in global variable and I just put the number 13 in there, because that's the same thing. And then I open up a serial port and basically parsed it as an int. If it is 1, turn the LED on.

[00:04:53]
And, yeah, we respond with that. And it is reading the println, if I can get it to work. And if it's a 0, turn the LED off. I literally do not know. I think it's trying to write both. I think it's cuz I put it in a folder.

[00:05:09]
I have an amazing idea, which I will find out. This is me trying to be organized, New Sketch. I think it's trying to send both those files cuz they're in the same folder. That is my hypothesis. So I am just gonna simply send this file over, and everything works.

[00:05:27]
Today I learned that it will try to send an entire folder to the Arduino. So that's the thing we all got to learn together. And this is with the sensor. I actually don't want that one. I want the web serial one that I did before. And so I'll actually paste that one in instead.

[00:05:47]
We'll send it over to the device. Now, hypothetically, batting 1000 right now, but we'll see. Web server should start up. Now, Chrome these days used to be just like, hijack the web audio API and do whatever you want. Now Chrome is like, hey, they have to hit a button first, and also we need to not do this in Safari.

[00:06:28]
So pull that back up. We'll connect, I can pick, you can see. That doesn't look like my Arduino, but we'll find out. So you can see I have at this point connected to a device, which it didn't see the Arduino, but will. LED on, I got a little bit of brokenness there, but the built-in LED has now gone on.

[00:06:55]
So it sends it, not necessarily as a string, it's sending a byte stream. So it looks like I console log the first part of the stream, and then we broke off the second one, but the built-in LED did go on. And I can send the off, and the LED off part of the stream came through over the serial port, right?

[00:07:12]
No node involved whatsoever, just the browser talking directly to the Arduino board from there as well.