Detecting IoT devices in web browser?

Question

Recently I bought a couple of wifi relays from Xiaomi. While they have been solid so far, I really dislike Xiaomi's app. But, I do like the idea that it actually works both in LAN and over the internet. When in LAN they are very quick to turn on and off, considering Xiaomi's servers are in China.

So I want to roll my own ESP8266 based relay (I know I can get the hardware ready made, so that's a bonus). My issue is, how can I automatically detect the relays on my network from a web page?

From an "App" I could use SSDP, mDNS-SD or UPNP to detect things. But I haven't found info on wether this is possible from the web browser (Chrome on Android basically). Since I changed my weather station web page to be a Progressive Web App, I've been hooked. I really like the idea of things just being webpages and not apps you have to install. And PWAs fill the gap with offline mode too.

It's strange though, that the "difficult" part (turning the relays on and off from outside the LAN) is trivial to solve via a MQTT server. But I'd prefer not to rely on the external MQTT server. If I'm on the LAN, I want to talk to the relays directly. If not, then send the command through MQTT.

I could, of course, rely on the server to query the relays, but in that case I'd need an internet connection (if my MQTT server is on the "cloud"), or a home hosted server. I do have a server at home, and even if I didn't, a raspberry pi could easily fill the gap. But the ideal would be not to even need a server when talking to the devices over LAN (Wifi in this case). I prefer to keep it P2P as much as possible, and only use MQTT as a fall back for when i'm on WAN (MQTT solves the problems of CG-NAT and port forwarding).

Answer 1

I'm not aware of any generic local discovery capability built in to a browser. In fact I would consider any capability to be a security venerability as it would allow attackers to profile the your network remotely unless it had a manual interaction step to start it, which would really slow down the workflow I think you are aiming for.

I can think of 2 things that come close:

1. The Chromecast discoverability baked into the Chrome. This used to be a separate plugin before it was rolled in. But this still requires a manual step to where the user triggers a search and then a manual selection the device details to be passed back to the page/javascript. (this uses SSDP under the covers iirc)

2. The WebBluetooth scan support. This follows a similar model to the Chromecast discovery, The user has to initiate the scan, then they have to manually pick from the devices found by the browser which details get passed back to the javascript in the page.

I have used the WebBluetooth approach to discover a local light switch (I have a BLE app on a pi zero controlling a Belkin WeMo bulb https://github.com/hardillb/physical-web-lightswitch). It works but it's not seamless as it requires at least 2 user interactions to discover a single device.

While it doesn't meet your all local requirement I think using the cloud broker approach even for when operating locally it will be a smoother user experience.

Answer 2

If you have a web interface on a device, and configure it to have an MDNS hostname via an MDNS responder service such as bonjour or avahi, then from featureful operating systems you can just point your browser at

https://livingroomlight.local

Or whatever you configured it to call itself.

This will work out of the box with browsers running on OSX, iOS and most Linuces, all of which support MDNS hostname resolution at system level.

However, this will not work from Windows unless you install add-on MDNS support, and it will not work with stock Android browsers though it is possible to make custom browser apps for Android which support it.

Discovering unknown instances on the network is not typically supported by a browser, but is typically supported via operating system APIs and command-line tools like dns-sd (OSX) and avahi-browse (Linux).

So while it doesn't appear obvious that a browser can find your devices, if you can simply remember what you called one of them you can connect to it, and it could potentially show you links to all of its peers, by doing an MDNS search itself.

Or you can fire up a terminal and get yourself an answer. For that matter you could run a local daemon which would do an MDNS search and show you the result as a page of links served only on the loopback interface, and thus not accessible to any other machine.