 All right Thank you for coming. I know this place is a little bit hard to find it took me about 10 minutes to to get here myself I accidentally went to some other place and then came over here But yeah Thanks a lot for for attending this talk The talk that I have it's its name is very hard into navigation and the physical web Adventures in JavaScript and Bluetooth beacons. Now, this is a big title and I only have 20 minutes So I'm gonna, you know be a little bit fast in case you have any questions I'll appreciate it if we can You know answer that after the talk So that you know, we save a little bit of time So a little bit about me How many people have heard of opera Awesome, I know a lot of people might not be using it right now. So if you are great if you're not downloaded today How many people have used extensions by the way any any browser? Oh Nice, so I'm PM of extensions in opera I Welcome you to download opera and use extensions I'm also Part of the developer relations group in in opera especially part of Asia And I'm also part of a few W3C groups like the mobile web for social development group in which we take a look at how people using mobile technologies and developing economies and a few others as well I also work with W3C India very closely And speaking of the W3C You know who this guy is of course you do Tim who yep, okay, awesome. You don't get a prize for that by the way So yes This is Tim Berners-Lee he invented the web, but this is not the main image that I want to show you This is the one that I want to show you So can anyone guess what this black computer? Can anyone guess the company this black computer is This is sir, yes Very close so this black monitor that you're seeing over there That's that's a next computer when when Steve Jobs was actually fired from Apple he went on to make next computers and this is actually one of those computer and This is the computer in which Tim Berners-Lee made the world's first web browser and the world's first web server This is actually now a historical artifact like it's in a museum so yeah, and the reason why I wanted to show you this is because I Wanted to just stress how far we have come Just just the humble origins of the web, you know at that time and look at the web now You know, it's completely You know blossom you could say just like all the flowers over there So when we talk about the web and we talk about the strength of the web What we mean No, the main things are going to me when it comes to the strength of the web is reach and openness You know you have you know different fragmentations of operating systems, you know You have IS Android, whatever and you have you can make apps for them But you'll be limited by the app stores that each and every one provides you'll be limited by the moderation rules And all the restrictions that each and every platform provides The most unrestrictive platform of all time is the web You know and when it comes to openness, this is also something which is unique You know talk about web standards the W3C and everything else it even surpasses open source We're talking about open standards a closed-source browser will implement the same standards Open-source browser will also implement the same as you know CSS JavaScript standards, right? So when it comes to openness the web also wins Now we've talked about the web we've talked about where we have come from What's the present situation right now? Right now there's a tremendous growth of new wirelessly controllable devices on the market We're using a technology called BLE or Bluetooth LE Bluetooth smart. How many people have heard of BLE? awesome, so You probably also know that to control how do you control a BLE device right now? What do you have to do? Yeah, and Yeah, and how do you do this by installing in? Yeah For normal users what they have to do is to they have to actually install an app all the time Like I have a bunch of apps right now on my phone All about these things So the problem is that there's an explosion of all these devices You know and they're all controllable. They're all interactable But you have to install an app for each and every one one of them You know even if there's a device which you know is just a one-time use we'll have to install an app Have you seen the updates on your how many people use Android? Have you seen the app updates not like fresh installs just the updates? Just take a look sometimes. It's like one app update would be like 50 MB per amp Sometimes it's like a hundred MB. Why would you want to do this for something? Which is like a one-time use or you know something like this a much better idea would be a URL for every device You have a URL a unique one You come across a device go there You interact with it close the tab Done Right isn't that a much better way to interact and this is the idea behind what we call the physical web So the physical web is you know kind of like almost like a movement just like you have it. It's kind of like almost similar to that And the whole idea is that each and every device or each and every thing will have its own unique URL And if you want or the maker of that thing wants they can make that URL You can go there. You can interact with that device. You know it's totally up to you and it uses this web's power which is You know sharing of your else Now this might seem very similar to another technology Well qr codes how many people have used qr codes or regularly? Regularly use Okay, three people like four people regularly use qr codes, but how many people have actually used qr codes sometime in their lives Okay, everyone so Why is that so? There are a few problems with qr codes first. It's not interactive You know is there if you want to change it? What do you do? You know you're kind of like stuck basically It requires a camera now You know that's a given that nowadays most camera phones have most phones have cameras and they're good cameras But there are many places where you know the cameras suck And also and this is something which is important is that if you are visually impaired or if you're totally blind You know you can't even know that there's a qr code somewhere let alone scan it and do something with it Right It's not seamless if you want to change it You have to physically take down the paper print out a new qr code and stick it once again right, so qr codes just don't Just aren't practical So that's why you know having a beacon or having some kind of thing which has an actual URL Which you walk across there's notification on your phone saying hey, you know you walked across this This is the URL go check it out if you want and you do it You know just on your browser. This is a much better technique Now the way you do it is using something called the additional protocol. How many people have heard of it? one two three so Previously most beacons most BLE beacons these to support a protocol called I beacons No, it was supported by Apple and everything then Google came along and said hey we think the physical web thing is great and for that we need URLs and This is the protocol which is being used so if you want to have a BLE beacon right now and You want to have like a URL associated with it generally speaking go for beacons which have any stone support written over there That's kind of like important right now it is like for example, Eskimo's they support what I beacon and Any stone I have these small sensor of beacons USB ones you can just plug it in over here and they also support both I beacon and any stone So the physical web why is it useful? Have you ever gone to a museum and used an audio guy? So, you know the drill right you go to a you know a sculpture or a painting. There's a number over there You enter that number you put on your headphones and then you listen, right? Now this is a little bit cumbersome You know much better technique would be you just go there do nothing There's a notification pops up saying hey, you're near this you want to hear more about it say yes go to URL Listen girl, that's it. The URL can even be an internet thing right So there's a number of use cases for this the the image on the right is someone calculating kind of like or estimating I would say distance between the phone and the beacon Right using something called the RSSI level. We'll talk about that later on There are a few other use cases I Made a small contact sharing app for like for example conference booths. So How many people have gone to an actual conference booth and talk to people or have been part of it? Okay, so Out of the people out of like say 10 people you meet you probably only have like a sustained relationship With them for like twice or twice or two or three times, right? You probably follow them on LinkedIn or you know add them on LinkedIn or follow them on Twitter or something if you add them, you know The sooner you add them the better it is that you know, you'll have a sustained relationship if you give your business card to that guy and Two or three days have passed you're probably not gonna bother adding that guy Right. See you. I know So what if you are near conference booth, you know, once again another notification pops up There's a URL you go there you enter your Twitter or you connect on LinkedIn right there The chances of you both keeping in touch is much better So these this is kind of like a nice use case. I also have a small Beacon on one of my key rings so You know sometimes, you know keys get lost and usually it's somewhere Inside the room that you probably haven't looked right and with this The app that I have I can just click on it. It does a small beep and I know where exactly it is in the room And one more use case is movie posters just like you know in paintings You can come near and you kind of like know more about it the same thing with movie posters movie posters nowadays are static But what if you go near it? You open up its URL and you can then you know see it's YouTube trailer or something like this But the one use case that I did try out recently was treasure hunt So me and my buddies what we did was Actually, I did this and my buddies actually went on the hunt was in my neighborhood I placed a bunch of these Bluetooth beacons about five of them And each of them had a unique URL And what my buddies job was to basically scan the entire neighborhood and Look out for these URLs and each and every each and every URL had a particular clue And if you combine all of those clues and form a sentence it it would be obvious which sentence it is the first one to do that would get a price and For me the price was basically I offered them dinner so Yeah, it's very easy to make like fun stuff like this like treasure hunts We've done this like twice or twice. It's pretty nice. So That's great One more thing Apart from the physical web or you can say it's a pop. It's a part of the physical web. It's called web Bluetooth API How many people have heard of it by the way? one two three four so The web Bluetooth API is something which is quite new And what it does is it allows you to kind of like connect to devices which which are you know exposing their services or blue to tally The great thing is that it works inside the browser Not even you don't even need no JS, you know, it just normal HTML CSS JavaScript It works inside the browser The thing is it's a very new API So right now it works in Android 6 and above, you know, it doesn't work in you know, Android 4 and Android 5 and below Right, so if someone has stock Android right now The latest version they can they can try it out right now It's how many people have a nexus by the way, I'm just curious Okay, so you can definitely try it out It's partially partially implemented right now, but still there's a lot of stuff And there's a lot of devices that you can that you can pair with For example, for some reason oral B has a BLE toothbrush I Don't know how like maybe there are people who are really interested in like how many strokes they're doing in the brush I don't know they have a developer program as well. You can sign up. I checked So yeah, of course you can you can actually Pair with that and do some stuff, but something more interesting is Which I'm gonna talk about right now, how many people by the way have seen Star Wars the newest one Okay, what was your favorite character doesn't have to be human What was your favorite character like the BBA anyone else whose favorite character was the BBA Okay, just one guy, but my favorite character was also the BBA and I actually have a small BB-8 with me So let's see if we can actually control a small BB-8 Using web bluetooth. I hope this works if it doesn't then it's gonna stop I What I have is a progressive web application Which means that it's a normal web app websites, which has a few more extra powers So that it behaves a little bit more like native So let's see started up This is how it looks like Yeah, that's why This is this is just using web technology This is working inside the browser no native So if you want to check out the code it's Opera software or kick off that IO slash TV Yes, right now Working together on the Right, so it's you can use right now. It's a beta version of opera cranberries But if you can also use it in chrome as well, I don't know the version But yeah, you can use it over there as well. So Yeah Yeah, this was the demo by the way I Didn't build this This is Yes, this is this is fair. Oh, by the way Fero, yes It's the same company that was talked about in a few other talks earlier. Yeah You can do stuff like this you can control toys There are a few other demos in which people have kind of like controlled like parrot drones So you can kind of like control drones and stuff as well And the way in which you do it by the way, this was my backup video in case it didn't work So the web Bluetooth API let's focus a little bit more on that and how are actually we're doing this So the first thing that you need to know is that user action is required. So We don't want this to be done automatically We don't want this to be done in the background You want explicit user permission for the website to actually control a device, right? Make sense So for this with what we've done is to make sure that it it's implemented When a click event is there or some other user face event is there. It's going to be HTTPS only But a lot of these most of privacy sensitive APIs are now moving to HTTPS only, right? Whether your service workers whether it's a web manifest all of these and even web RDC now is HTTPS only Right now. It's only partially implemented there even right now. It's pretty impressive, but later on it's going to be even more impressive The way in which I control this was hooking into something called gap services So it stands for genetic attribute services and what they are are basically a standardized set of services that hardware makers can expose to other developers like for example Your how many people use a Fitbit or like a up 24 or something like this like a fitness band or something So a lot of these devices a lot of these fitness bands might expose like a gas service for the heart rate, right? Yes, and Your your phone might expose a gas service for the battery level for example So if you delve deep into the code, this is what you do basically first of all you call navigator to do to the request Right and over there you can you can kind of like have a filter that I only want Devices which match this filter in this case. I only want devices which match which provide a service called battery service, right? then You call device that can connect which actually connects to the device then you call And that battery service get its characteristics read its value by the way, the value will generally always be as a As a data view or an Arab buffer. So if you're not familiar with it, there are docs on web platform As well as MDN that you can check out So how do how to kind of like use? JavaScript code to work with Arab buffers or data views A Detailed introduction to this is an article that I wrote its dev.oper.com slash web dash Bluetooth slash intro There's also another demo that I made that I don't have the device for it right now But I'll just ask you how many people call themselves coffee nerds over here Okay, so how many people know what's considered the best temperature range for coffee hot coffee? Oh Awesome. Yeah, so so the temperature that people generally say is between 91 and 96 And if it's you know, if it's not in that range, then it's not supposedly create coffee So what I've made over here is a web app which we hook into one of these Bailey enabled thermometers And if you have coffee you can just put it over there and I'll just show you whether your coffee is good enough or not No So what it does is if it's between 91 and 96 it just says it's great if it's less than 91 It says, you know your coffee sucks, and if it's more than 96 it says, you know cool down through so One more thing that I wanted to talk about was something called what people say indoor navigation One of the ways in which you can do this This is not the only way but one of the ways in which you can do this is to scan for the rssi value The rssi is the received signal strength that you get So theoretically speaking theoretically speaking not practically Theoretically speaking the nearer you are to an object the more the rssi value You'll have the farther you are from the object the less Signal strength you'll have right, but once again, this is theoretically speaking So what you want to do is to basically use this formula rssi is equal to minus 10 log d plus a in this case Rssi if we know and we also know the tx pyro level it's easier to calculate d or it having an approximation of the distance Right and the code for it would be this It's quite simple you call navigator blue dot request device And then when you have the device say device dot ad data dot rssi ad data is is is a is a Is an object type which advertises which lists the advertisement data which means rssi as well as takes power levels Now this isn't implemented yet But when it is it's going to be hopefully soon Engineers are working on it and at least in chromium When it's when it's implemented then it'll be very very easy to do something like this But one thing Well getting from point a to point b is one thing, you know, but doing it nicely is another way It still doesn't solve what I thought what I call the dangerous balcony problem And this can be solved using geofencing very easily with these rssi levels You don't have to be really really precise just to be within range So imagine if there's a blind person and there's and he's walking in a room and there's a balcony attached But that balcony is dangerous. You don't want anyone to go there. What do you do? You know It would be nice if the closer the person comes to the balcony You know if it's within a certain threshold, there's a notification which pops up saying hey, this is dangerous. Please go back Right, so this can be done very easily by You know by this You can have like you can have a way in which you can detect the rssi level if it's more than a particular threshold send a notification and of course with with actual indoor navigation There's a thing called trying there's wi-fi triangulation and then there's something called trilateration, which is this Which is basically placing three different beacons at least three different beacons all across the room And finding out kind of like a range A circumference and where they actually intersect. That's probably the position where you are But keep in mind this is all theoretical because rssi values Are quite variable across the room like even if there's a human being in between You know that can severely affect the you know the the value of the rssi Right, so the best way to to make sure that you have like a somewhat good Estimation of the rssi is to place them where there's no obstructions like for example the ceiling somewhere or the high The high walls Right in those cases is less likely that there's going to be an obstruction So The missing parts that we have right now with the web bluetooth API is first Scanning for rssi and takes power levels, but that will come Second is for an actual right now browsers could kind of like detect eddy's own URLs That work has been done But you know the next step is actually web pages to detect beacons rssi levels to scan for beacons themselves And you know get get the rssi as well as the eddy's own URL. That'll be really interesting But the most most needed stuff now that we have this technology is to ask hardware makers To instead of having proprietary apis and having proprietary native apps To just expose their services using GAT so that people like us can actually make web applications And make progressive web apps just like we saw with the pba toy and you know Work with it. So yeah, this is uh, how am I doing on time? I think when Yeah, so my wrapping up is this Uh, thank you so much Uh, if you have any questions, I'm here. We can. Yeah. Thank you. Thank you We can think about three questions. Anyone. Do you want to fire the first one? It should be the questions with the rest, okay, so the question is can browsers right now search for eddy's own URLs The opera had Implementation a labs build in which we did that in which uh, if they're like beacons around which had eddy's own URLs You you kind of like saw them right away We're also working on making sure that A slightly different implementation, but the same concept That if you're coming across At least one url beacon then a notification pops up saying hey you come across a beacon do you want to visit? If you don't want to visit ignore it That's that's one of the things which is right now the spec is on github and one of the issues One of the most followed issues is actually this For html and javascript developers to actually scan for beacons themselves That was one of the things that I listed in the missing parts So that is also coming that isn't implemented yet, but it's going to come Okay, so the question was So the question was about authentication About about authentication of GAT services like you don't want everyone to connect to it What do you want to do over there? So we we actually Internally talked a lot about it and what needs to be done by hardware makers is to probably have Another GAT service expose another GAT service Where they ask the person initially to use a native app to kind of like make their password And then once that happens that everything has to be First authenticated using that GAT service and then further it will be exposed So this is something which hardware makers will probably have to implement themselves But I expect that to be Yeah, so before the last question take note of his particulars the candy email Yeah, sure If you can if you want to email me feel free if you want to follow me on twitter. I'm you know, I generally Answer people on twitter as well quite a lot And I'll be posting links on twitter as well. Okay, last yes I don't know I'm not from apple. So I have literally no idea what they're doing I can only talk about chromium because we're working on chromium and chromium effects both Chrome and opera So I can just I can just say that chrome engineers and opera engineers are working together Thank you once again