 The gentleman to my left putting his phone on silent mode is Dan Jenkins He's I understand he's chief ape Yeah, oh, yeah nimble ape at nimble ape. He is the chief ape, which is pretty special It's time to get physical with web Bluetooth in the browser Give a warm welcome to Dan Jenkins Cool, can everyone hear me? Yeah good all good, okay? So I'm Dan Jenkins Dan underscore Jenkins on Twitter if you want to follow me get my count up. That's good The other stuff is less interesting. So let's move on. So yeah, this talks about getting physical physical No, no one. No, that's really funny anyway so You get it good So who's who's ever wished that they can go in Stand next to an object a physical object in the physical world and Be able to click on that object to find out more information about that thing using the web so Who's seen something like this with QR codes? So that's the Hard Rock Cafe in San Francisco that's Another QR code from the prison in San Francisco. Anyway So QR codes QR codes are everywhere But they're really annoying aren't they you have to download an app To be able to use it Or maybe you might use a progressive web app that's already out there I don't know if there's any talks about progressive web apps. If you're interested come come see me So Yeah, you fumble around in your pocket and you download an app that you're only going to use like the ones And then maybe in like a month's time You'll scan another QR code, but QR codes are actually inherently insecure as well because they could kind of Send you somewhere completely Wrong like so you scan a QR code on the back of a Electricians van like how do you know that it's actually going to take you to the website of the electrician van? You don't like so you they're actually very very insecure so Yeah, there are many many many many places that we want to be able to Interact with something whether or not that's a bus stop there's a there's a physical bus stop and And it has information like that bus route and it knows When the next bus is coming etc etc etc at a museum at at the cinema so We we can now we can talk we can connect to physical things around us, and it's called the physical web So the physical web bridges the real world and the digital world the web You can walk up something today that's emitting a physical web URL And you can interact with it takes you to a website and you can use it you can you can go get more information so Like what if we what if the BB8 Sphero? emitted a URL and you could go and play a game with the Sphero and You kind of you've you've gone to the device and the device has shown you where to go to play that game To interact with it and it's taking you there an Advertising sign well, I mean there's a website on this advertising sign. Why should I have to like type that URL in I'm gonna interact with it movie posters So How how can we go about doing this today in real life? you can use this in on Android and on iOS and You we have what are called beacons Eddystone beacons and they emit a low-level URL using the Eddystone format Chrome slash Android depending on your Your I your your OS Picks up on that URL and does some magic with it and then notifies you shows it to you And then it says there's something physical near you and you can go and interact with it So demo like let's let's stop talking about it if you've got Android on your phone, then you can you can Take out your phone today put location on and Bluetooth on and you should Theoretically in the next couple of minutes You should see like three web beacons I think it's three one one of the emf schedule So you can interact with the schedule. My phone is actually broadcasting this Another one for my talk slides Maybe there's only two at the moment. I'll put more on later so Yeah, you can do this with Android or iOS on Android you have to have location and Bluetooth turned on and It used to be that Chrome did all this work and now Android does it for you using Android nearby and so you'll get a Notification on native Notification to tell you about the URLs On iOS you need to have your Bluetooth turned on and you need to have Chrome notifications added into your Notification center so this is an example of I this is how I'm broadcasting URLs without physical beacons It's called beacon toy on on Android But I could have quite easily put a URL onto one of these This is a this is a beacon and you can set up how how powerful it is, etc Less powerful and the battery lasts longer But people within it will only get to people within a certain area Whereas you can have it emit lots of power using lots of power and the battery will die very very quickly So, yeah, you should see you should see on the left here You should see what what you should be seeing. Hopefully someone tell me you're seeing this in yes good awesome so So yeah in that in that screenshot. We've got the schedule and BB8 control. So that's something for later So, yeah, how do we use this? So the beacon emits a Eddy stone URL the mobile device scans for those URLs in the background and displays a notification Before it displays the notification it sends it up to Google when Google does some stuff But gets gets displayed to you as a notification and the user taps that notification and it takes you to the website There are some limits, which I can talk to you more about in a sec so, yeah, Eddy stone Eddy stone is a is a standard and There's quite a few different Eddy stone formats that you can have. This is the URL format So it's an open message format a few different parts to Eddy stone, but we care about the URL and Eddy stone URLs have 18 bytes worth of information. That's not a lot of information and so typically what we end up doing is shortening URLs using like Google URL shortener and then When the phone reads it it reads that redirect and actually shows you the correct URL But the the actual device needs to only send 18 a maximum of 18 bytes Eddy stone itself has is supported by over 30 vendors in the world and They're actually doing crazy crazy things like I think so one of these you can buy and you can buy one of these That's like completely unutterly waterproof and it lasts for 10 years In in a really really small device So that's pretty neat Eddy stone is also compatible with iBeacon. I mean no one actually talks about iBeacon anymore But it is out there So yeah, if you want to know more about it, then there's a link to it So yeah, Chrome so Chrome on iOS Does does the scanning on Android? It does less work now. It's all passed on to Onto the underlying OS. It was different about two months ago and it all got switched So Chrome only supports HTTPS URLs. So that's one limitation Chrome the Chrome team are driving the web towards a secure web And so you can only broadcast a URL if it's HTTPS Chrome then sends those URLs up to up to Google. They have a proxy service And that proxy service does some magic does like it removes duplicates so if I had five beacons in this room right now all all Sending the same URL then it would Google would actually get rid of those duplicates for us Does more than just duplicates Like spam if someone reports a URL as a spam URL then then Google will actually stop it getting back back to you as a notification Does that I think it does some other stuff as well like can reorder the notifications depending on like Where you are and anyway And it's not just Google that could run these proxy services Like if Firefox Implemented this into Firefox or opera are implementing it then they run their own proxy services It's not it's not a Google kind of black box that no one knows about So yeah, the proxy service then sends it back to Chrome or the OS and Chrome slash nearby shows a notification and that's and that's it But obviously to be able to send it up to Google you need to have data So earlier on today, I have a phone that doesn't have any data on it And I hadn't hooked it up to the Wi-Fi and so I wasn't getting any notifications Android is very clever now and it says oh, you're not getting any notifications because you haven't got any data And so it's actually quite useful So yeah, you could you could have this in a parking meter or or a train or a bus or a vending machine And then you can start interacting with it. You can like see current statuses, etc So when you add in progressive web apps into so I talked about progressive web apps earlier a little bit They're they're like they're the next thing for web for mobile web And so yeah when you add in progressive web apps your reason for building native apps now kind of dwindles because These things are being used today before Before this was kind of implemented in crime, etc You would have had to have a native app that kind of searched for Bluetooth devices, etc And showed you some some information But yeah physical web beacons are being used today in London we have buses that have your have beacons on board and so those beacons are unique to the bus and You go to a URL that is unique to the bus and It tells you information about the bus and so we get a nice here's a route 10 Etc and we're at this place And do you want a reminder for when you get to a certain stop? So this is this is a progressive web app in itself But the fact that you can now kind of access it you don't have to search Google and you don't have to know the URL You've gone to a physical thing in this case a bus and you've able to you're able to just kind of tap on the URL because it's related And as we can see today, I said my phone is actually emitting URLs right now One of them is the the slides a link to the slides that I've already put online Another one is the emf schedule So there's much more much more that we can start doing with the browser To make it physical So there's a thing called web Bluetooth and this is something that I'm very very excited about I think it's actually going to completely change how we How we can start actually writing useful Apps web web apps that kind of talk to real-life things and the web has always been very very separate And now it's kind of merging into all these all these physical things that we can now start doing So your browser can now connect to Bluetooth low-energy devices directly So this is being this is being written into Chrome and the opera team are also working on it Firefox had an element of this in Firefox OS, but it's never made it into Firefox itself But now that Firefox OS is kind of dying slash dead I expect it to kind of to start getting there So it's a it's a specification and and people are working on it today So yeah using JavaScript we can now connect to physical devices around us and control them So back in December when Star Wars got released I bought a BB-8 And I played around with it What I ended up doing was controlling my BB-8 using web audio So I'm going to show you a quick video that has some audio So hopefully this is going to yeah The audio is not very loud, but there you go. So you can see I'm playing the Imperial March using web audio And then I'm analyzing the Imperial March as it plays and when a beat change or a note change happens I send a signal to my BB-8 using web Bluetooth to change the color and to dance a little bit Yeah, the first time I did this ironically I actually used Imperial March and about five hours later It got taken down a few two Because there's four sports, but never mind So yeah, there's a blog post on my on my website if you're interested But Yeah, let's take a look at some real-life demos here today that we can actually start playing around with I've got a micro bit here So the micro bit is a really cool device It has Bluetooth built into it has accelerometers built into it and it has a nice LED panel built into it and so If Phil can come over here you don't have to come up. Here's a phone So I'm so I'm gonna enable a beacon for the BB-8 demo so Hopefully if you press refresh at the top it will happen quicker And so hopefully if the internet works and everything hasn't failed You should get to a little page That tells you to connect Micro bit. Yeah Got it and it should tell you I never never trust Phil to do anything for you So oh, I enabled the wrong thing. So it's my fault So I'm just scanning again for demos Demos they never work Okay, I'm gonna skip that step And I'm just gonna go straight to the website Micro Micro bit dot eng rock If you don't know what eng rock is go Google it and you'll love it so So I've got no one will be able to see this really But I've got a page here that says micro bit LED scrolling text And so I can send some text to my micro bit using Bluetooth So if I send that oh, it's not working Send could not connect to my Bluetooth device. Why not? Chrome beta so you have to have a flag enabled in Chrome at the moment So This worked earlier Micro bit micro bit dot. Oh, I know why I know why I wasn't on HTTPS so you have to be on an HTTP HTTPS page because We like security now And it's really important So HTTPS Microbit dot eng rock dot IO So hopefully now Come on send so on my phone It's come up with a prompt and said what device do you want to connect to? I? select the micro bit and And then I can send it some text to to display using web Bluetooth so That's a standard Service That's a standard service within within the micro bit You can just send text and it will automatically kind of do all the magic to put it into LED And into LED form. So that's the micro bit using web Bluetooth So yeah, go buy a micro bit. They're really really cool and the fact that the 12 quid is a bargain a drone The drone can't do too much damage So I mean let's give it a go Let's give it a quick go. So I've just enabled it and then I've just plugged in the battery scan So I'm trying to do it properly this time. So here we go drone demo So it came up as a notification and I can connect to it and it's scanning and it's there So I'm going to pair to it Connecting connecting connecting connecting Connecting connected so now so that's using that's using the browser Like there's no native code here. There's no native app. The browser told my drone over BLE to take off I can tell it to flip Okay Some propellers came off. I can't I won't try and fix that right now But the really the nice one is is a What's this and? I'm going to Just because just because it's cool. I mean Scanning BB8 BB8 connect so it's gonna BB8 Yeah, so I'm connected apparently but the lights turned off which is a bit Connect pair there we go. So I can control the color of BB8 I can make it green or I can make it blue. I can aim the BB8 So I can tell it What's the back? So this is very much like the native app And then I can drive it Using using JavaScript That's pretty cool. Like I don't care who you are. That's cool Right. So that's that's the demos So how do we do it so BLE It's not just toys. Although toys are really fun to demo So heart rate trackers most heart rate trackers are BLE my Fitbit is BLE and so they all carry Standard services and so I can start kind of integrating them into my code So there's fitness trackers There's Bluetooth printers There's more games more toys. There's actually a lot of toys that BLE But there are yeah, there's a lot of devices out there that we can start kind of manipulating with JavaScript So I'm talking about BLE, but some people in the room probably might not know what BLE is So let's take a step back. So BLE is low low bandwidth And that's kind of its big thing. It can transmit 0.3 megabits per second and Compared to Bluetooth v3 Which is 54 megabits per second. That's a huge difference But the fact that it's low energy is the fact that it can only transmit so much There's a yeah, as I said, there's a set of standard services that we can talk to so there's there's a heart rate Service and you can go and interact with it and it's standard And so if you had a heart rate tracker from one brand and another heart rate tracker from another brand in theory The same code would work for both because you follow the same service Same with battery status. You can get battery status is a standard service But yeah, you can build your own services as well So that's what the Sphere team when they made BB-8 did there are no moving forwards and moving backwards and changing color Standard services, so they made their own Within BLE you have something called a GAT server You don't need to know what it stands for etc Basically within the GAT server you have services and they might be standard services or custom services And then you have characteristics within that service itself. So within the battery service. There's a battery level Characteristic, but there could be a battery temperature characteristic It's all handled by the service itself So let's take a look at the web Bluetooth API so it's promise-based in JavaScript and it's really really simple So you can see here. I'm doing navigators.bluetooth.requestDevice With some options. So this this has options and it says I Okay So I'm passing in I want heart rate services so We do a request device That prompts us puts up the little display on on the page and says what what device do you want to connect to? You select what device you want to connect to and then you can connect to it So yeah, there's the heart rate tracker and it prompts and it prompts up a little display and says which device do you want to? These devices match your filtering What do I want to display? What do I want to connect to? So we connect to it and then we can go get a primary service So the primary service in this case is a heart rate service And then we can go get a characteristic from that service So these are all just promises like I mean There's very little here like you'd end up probably like Expanding all of these and logging some things at the same time, but this is very very simple So you go get a characteristic heart rate measurement and then you get that characteristic as a value So that that characteristic you can you can then add an event listener to it to be told when it updates So the heart rate tracker is a great example of this your heart rate is constantly Change it were not constantly, but it's changing And so you get told you get pinged a message every single time that the value gets changed So you add a add an add event listener and then you start notifications You tell you have to tell it to start telling you about things But what if the device was broadcasting your a URL where it can be controlled from? So what if the BB-8? Sent its own URL And took you to a website took you to a website and From that website you can control the BB-8 exactly what I did Using my phone. Why can't the BB-8 do that instead? Well, that's possible today But we actually have No way of kind of bypassing that selection So you know that that prompt comes up and and says what device do I want to connect to? Well, I mean, I've just come from a URL from that device. Why should I have to then like select that device? That's kind of it sucks but The people making the specification have realized this and there's something coming to fix that you can now well soon You'll be able to do navigator.bluetooth.referring device from a When you in your JavaScript to tell you yeah, I came from a URL and it and it's this device And so you can connect straight to that device without having to prompt for for interaction So where can we start playing around with web bluetooth today? I mean two months ago. This was a very different story and two months ago. It was Android M&N Android L with Chromium don't even like unless you're really comfortable like you have to like unpack APK and and it's just it's just effort So unless you're really stuck on Android M at Android L like don't even bother But a month ago. There was Android M&N and L with with Chromium and Chrome OS and Linux I mean most my most of my developer friends We all we always we all use OS X because I mean we're web developers and we like OS X So developing with web bluetooth was actually really tough because you had to have a phone Doing all of the work for you and you had to then connect to USB cable And then you had to have Chrome like inspecting that tab as a remote device. It was that it was it was a pain but in the very In in the past month, I think OS X with Chromium 53 supports 99% of Everything that you can do within Android M&N and Chrome OS. The only thing you can't do is turn off notifications So some more information here. So yeah You can see there that Android supports everything, but it's Android itself doesn't actually support stop properly And OS X supports everything within Chrome 53 Chrome 53 is actually in beta right now. And so within the next month It should be within General Chrome that everyone can use but go start like if you want to go develop something go download Chrome beta And it's like really easy and it runs as a separate app. You don't you don't lose anything within Chrome Windows has very very little support and iOS has nothing But you still have to enable it within Chrome. So you go to Chrome colon slash slash flags, and then you enable web Bluetooth There that's a slight lie you can now have there are origin trials going on right now And so I could put any of my URLs that interact with web web Bluetooth Into that trial and you wouldn't have to enable that flag So that's real life kind of testing going on right now. And that's a really nice step forward Like I said earlier my demo didn't work because I wasn't using HTTPS. So it only works on HTTPS and It does work on localhost So there's the secure origin type thing within Chrome So that yeah, there are quite a few hoops to go through to actually develop something That integrates into web Bluetooth. There's less and less steps than there were two months ago And that's really nice to see So there's yeah, there's loads and loads of demos out there. So go to web Bluetooth cg.github.io forward slash demos a lot of the Google team are making these demos and Members of the community are making these demos my micro bit demo We'll be going on there once I fix the pull request But what devices are out there that we can actually program to do what we want to do So I already showed you the micro bit the micro bit is cool go by one But there's Arduino's I got a nice little Arduino from signal comp from Twilio. That has BL we built into it and so I can write today to like Go out onto the display Or so like if I did a LED type text thing you could go on to the display or Like this has a three-axis accelerometer and so when I chuck it up and down in the air It can show that on a web page or you can instruct it to go and Do something with IO pins to make something happen. I don't know So how do we know that they're really quite cheap in comparison to say a Tessel so a tessel you write node and you control hardware using node So this has loads and loads of modules that you can go out and buy so it has a BLE module and so I can Amit a URL and I can actually control a device Using BLE using the tessel. So this has like an accelerometer and it has ambient temperature and noise Yeah So if you want to get started and write node instead of something else tessel is very good The latest pie comes with BLE built-in as well. And so yeah, you can go buy yourself a pie If you want to get started with something Go buy a micro bit the 12 quid and they have loads of stuff built into it and you can go play with it So in the past two months. Yeah developing for web Bluetooth has become so so much easier Unless you're developing on Windows, but I mean I I don't feel sorry for you at all So yeah hardware with BLE is really really cheap now I think there's a board coming out. That's going to be five dollars that has BLE built into it And so you can go you can go build stuff yourself and you can control it using the web And as a web developer, that's really really exciting It's something that we haven't been able to do and we've always had to kind of offload it to a native app And then with progressive web apps coming along making the whole mobile web experience so much better We can we can actually start making these awesome experiences So yeah, you don't need Chrome OS now or Android. You can develop on OS X I mean, I forget that Linux was in that column. I mean who develops on Linux So There's this is a really nice thing This beacon has a different kind of thing on top of it and it's because it emits a Gatserver so it's a beacon and a Gatserver and so We have it the Gatserver runs a configuration service and so we get into this kind of Circle Circle of life Where the Eddy stone URL for this device is the URL to configure the device So I'm emitting the URL to configure the device It's emitted using Eddy stone and and it's picked up using physical web And then I go to that website and I can configure this beacon using web Bluetooth I can there's a whole circle there. I never have to Download a native app or anything like that. It's all within my web browser. So we can build things with the web now We've been able to build things with the web that are very very separate to the real world for a very very very long time And the web's getting better and better and better But there's less and less reasons to build Native apps now and I think we should all kind of as a web developer. This is so exciting And it takes away one of those things that like native developers kind of lord over you If you're really interested Then you can go to this URL. This is your this URL is a YouTube playlist of three amazing talks from Google I.O. About the physical web and web Bluetooth in one of them. There's a candy machine candy. That's so American there's a candy machine and it's you can control it using web Bluetooth and So you can go to your phone and I mean it doesn't take any money. I mean that's It's a bit of a problem But you can go to your phone and you can press a button and it shoots out loads of skittles I I know I think that's cool If you're Yeah, if you want to have a look at these slides again, then they're online using the URL that I'm broadcasting or I'll make it public and I'll tweet about it later on at at Dan Jenkins at down on school Jenkins Or it locally you can go to content.emf.camp forward slash tilde Dan Jenkins Getting physical with web Bluetooth in the browser And I guess just as a quick side note Nimboy are hiring developers So if you're interested in playing with this stuff as well as loads of other cool stuff Then come see me if you've got any questions Come see me outside. I guess because Questions in this kind of arena just don't work So yeah, come speak to me afterwards and yeah, thank you very much. Thank you