What if you could use JavaScript to control stuff in your home like lightning, garage doors, HVAC, TVs and audio systems? Although the most popular products and solutions like the Apple AirPlay, Google Chromecast and Nest Termostat rely on proprietary protocols, there are plenty of devices that support the UPnP standard, which should allow cross-vendor compatibility. The W3C Device APIs Working Group released a draft of a JavaScript API for Network Service Discovery aiming those devices. Opera already released an experimental build that implements the proposed API which hopefully it would be soon supported by Firefox and Blink. In this talk, we will know more about UPnP/DLNA and explore some of the possibilities to integrate them with our current technology stack. We will run some demos through experimental browsers and we will learn how to use Node.js and a Raspberry Pi to build a low-cost UPnP gateway to bridge the gaps for the current browsers and empower the audience to come up with their own crazy applications.

1. JAVASCRIPT POWERING THE DREAM OF
THE CONNECTED HOME
Rodrigo Fernandez
HTML5 Developer Conference
May 2014

2. ABOUT ME
• From Brazil
• BSEE
• Currently with @WalmartLabs, Carlsbad, CA
– Business Tools and Services
• Previously with PacketVideo (NTT Docomo)
– DRM
– UPnP/DLNA
– BEAM

3. AFFORDABLE COMPONENTS
• Sensors
– Temperature
– Humidity
– Gases
– Light
– Presence
– Movement
– Cameras
• Actuators
– Switches
– Relays
– Servos
• Network
– Wired / Wireless
• CPU / Memory

4. SMART APPLIANCES
• TVs
• Sound Speakers
• HVAC
• Locks/Gates/Doors
• Refrigerators
• Microwaves
• Ovens
• Vacuum cleaners

5. GREAT UNIVERSAL REMOTES

6. SOME USE CASES
• Browse for media from a mobile device and
play it on any TV
• Play music and open blinds at 7 AM
• Close the garage door if cell phone location is
more than 300 feet away from home
• Turn off the HVAC if two or more windows are
open longer than 5 minutes
• Control lighting and surveillance remotely

7. CLOUD INTEGRATION & AUTOMATION

8. PROPRIETARY SOLUTIONS
• Amazon Fire
• Apple AirPlay
• Belkin WeMo
• Google Chromecast
• Nest
• Phillips Hue
• Sonus
• Roku
• Z-Wave

9. UPNP
• It is a set of protocols that permits networked
devices to seamlessly discover each other's
and interoperate
• Started by Microsoft in late 1900s
• UPnP Forum formed in Oct. 1999
• Established as ISO/IEC standard in Dec. 2008
• Popular on printers, network routers, STBs,
game consoles, smart TVs, etc

10. UPNP DEVICE CATEGORIES
• Audio/Video
– Media Server
– Media Renderer
• Device Management
– Manageable Device
• Home Automation
– Solar Protection Blind
– Digital Security Camera
– HVAC
– Lighting Controls
• Networking
– Internet Gateway
– WLAN Access Point
• Printer
– Printer Enhanced
– Printer Basic
• Remote Access
– RA Client
– RA Server
– RA Discovery Agent
• Remoting
– Remote UI Client
– Remote UI Server
• Scanner
– Scanner
• Sensor Management
– Sensor Management
• Telephony
– Telephony

11. UPNP LAYERS
ADDRESSING
DISCOVERY
DESCRIPTION
CONTROL PRESENTATIONEVENTING

12. DLNA
• Series of guidelines for sharing digital media
on top of UPnP
• Established by Sony in Jun. 2003
• More restrictive than UPnP
– Containers (file formats)
– CODECs
• 3 Billion certified devices on the market

13. DIAL (DISCOVERY AND LAUNCH)
• Protocol that targets 2nd screen experiences
• Published by Netflix and YouTube in Dec. 2012
• Relies on UPnP and HTTP
– DIAL Service Discovery
– DIAL REST Service (XML/JSON)
• Supported by:
– Amazon Fire TV
– Google Chromecast
– Roku
– TiVo

14. SOUNDS A LOT OF WORK…

15. ATWOOD'S LAW
Any application that can be written in
JavaScript, will eventually be written in
JavaScript.

16. WHY NOT?

17. W3C NETWORK SERVICE DISCOVERY (NSD)
• Device APIs Working Group
– http://www.w3.org/TR/discovery-api/
– First draft: Oct 2012
– Current draft: Feb 2014
• Experimental builds
– Opera: http://bit.ly/1ih2MHL
– WebKit by Canon Labs: http://bit.ly/1ih2UqA
• Intent to implement
– Firefox: http://bit.ly/1ih32Xj
– Blink: http://bit.ly/1ih3eWA
– WebKit: WTF!?
• Concerns about security

18. LATEST DRAFT

19. EXAMPLE

20. DEMO
Opera Labs

21. WITH NSD
BROWSER
NSD
SSDP
TCP UDP

22. BRIDGING THE GAP
BROWSER
VIRTUAL NSD
WEBSOCKETS
HUB
WEBSOCKETS
SSDP
TCP UDP

23. PINGUELA

24. RASPBERRY PI MODEL B

25. ALTERNATIVE: TESSEL

26. BEWARE OF CORS
• Setting a custom header in a XHR request
triggers preflight
• Preflight consists in an OPTIONS request sent
by the browser before sending the actual
request in order to determine if it is safe to
continue
• Guess how many devices handle OPTIONS?
• Use a proxy to prevent issues

27. DEMO
Hub powered by Node.js

28. BEYOND NSD
• W3C
– Device APIs WG: http://bit.ly/1ih3sgf
– Web and TV IG: http://bit.ly/1ih3x3B
– 2° Screen Presentation CG: http://bit.ly/1ih3BAe
– Web of Things (WoT): http://bit.ly/1ih3Efo
• UPnP+
– Protocol bridging
• UPnP Cloud
– Devices connect to a cloud server using XMPP
• webinos
– Built with OSS and leverages web technologies
– Focus on TV, automotive, health and home automation

29. GO AND HACK YOUR HOME!

30. THANK YOU!
rodrigo@fnnd.es
http://bit.ly/js-connected-home