Network Service Discovery API support in Opera

By Daniel Davis, Rich Tibbett

Introduction

According to Nielsen, as of 2009 nearly 60% people in the US used their TV and internet simultaneously for an average of 2.5 hours per person per month. That's around 128 million people and just over 19 billion minutes of simultaneous viewing per month! It's not surprising, then, that we've seen a surge of interest in multi-screen development recently. As part of this, we've submitted a draft specification to the W3C entitled Network Service Discovery API which aims to ease discovering and sharing data between devices.

What is the Network Service Discovery API?

The Network Service Discovery API enables web pages to communicate with devices advertising themselves on the network via different discovery protocols in a peer-to-peer configuration. It abstracts away the underlying complexity of Service Discovery protocols and returns back one or more UPnP or Zeroconf services in the network via a single API call. Now you can use JavaScript to find a UPnP server locally, browse its content and send that content to a UPnP client. A web page can act as a third-party control point and pass messages between connected services in the most appropriate format for that service.

Download a build

We have implemented this API in an Opera Labs build for desktop, available for you to download and experiment with. You can download the build most suited for your platform here:

Note: For this API to work, you must enable two features in this build:

  1. Go to opera:config -> Enable Service Discovery API, check the box and click Save.
  2. Go to opera:config -> Allow Cross Network Navigation, check the box and click Save.

What does this build do?

This build is based on the Network Service Discovery API specification snapshot dated 4th October 2012 with the following caveats:

Focusing on UPnP, communication is possible with XML messaging relayed via the XMLHttpRequest API. Here is an example SOAP request to browse files within the remote directory of a UPnP Media Server:

<?xml version="1.0" encoding="utf-8"?>
    <s:Envelope s:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
      <s:Body>
        <u:Browse xmlns:u="urn:schemas-upnp-org:service:ContentDirectory:1">
          <ObjectID>0</ObjectID>
          <BrowseFlag>BrowseDirectChildren</BrowseFlag>
          <Filter>*</Filter>
          <StartingIndex>0</StartingIndex>
          <RequestedCount>100000</RequestedCount>
        </u:Browse>
      </s:Body>
    </s:Envelope>

The most common use case at this stage is to search for media files on a server and play them in a renderer on a separate client. The API can even be used to change the volume on a UPnP-enabled TV. There are a few more use case suggestions in the spec and we're looking forward to seeing what innovative services you can come up with.

How do I use it?

It's probably best to look at a basic example by breaking it down into a few simple steps:

  1. Call the navigator.getNetworkServices() method, passing it a list of well-known service types to look for.
  2. If successful, specify a callback function to execute. Its argument is an array of found services.
  3. Commands are sent to to your chosen service's URL usually using an XMLHttpRequest (but the API also allows you to theoretically connect devices via Web Sockets).
  4. If necessary, the service's response can be parsed and then acted upon by your web application.

To simplify the process, we have also created the Plug.Play library which acts as a UPnP service layer abstraction on top of navigator.getNetworkServices(). The library's home page includes a detailed breakdown of the steps mentioned briefly above - how to use navigator.getNetworkServices() and how to then, optionally, use the library to invoke UPnP actions and process responses.

Can I see any demos?

We've prepared a couple of simple demos to demonstrate the discovery concept. The first is a media player demo which acts as a middle-man between media servers and renderers The second is a web-based UPnP inspector so you can monitor and edit messages to and from UPnP devices. Of course, to test these out you need UPnP services available on your network. Wikipedia has an extensive list of UPnP media servers and clients, both hardware and software.

Are these builds production-ready?

No. The main issue is that there is no UI or privacy mechanism at this point — in other words, web pages have full access to all UPnP services on your local network and a call to getNetworkServices will return all services that match the requested service type. Because of this, the Service Discovery API needs to be enabled manually in opera:config in the builds provided on this page, as mentioned earlier.

Ultimately, this API will ship with a opt-in interface to allow users to authorize a web page to connect with one or more services that the page has requested. We are currently hard at work imagining this user interface. When we have a good user experience story to tell for this API we will provide updates on this blog.

Anything else to be aware of?

A couple of things:

  • The getNetworkServices method will look for services for up to three seconds. The time limit is because of the current lack of UI but it can be adjusted in opera:config -> Service Discovery Time Ms.
  • There is a bug in VirtualBox on Windows that causes all multicast communication to be blocked, including but not limited to UPnP discovery. If you have VirtualBox installed on your system, disable the "VirtualBox Host-Only Ethernet Adapter" network interface and restart Opera (or, in rare cases, the whole system).

If you have problems

If you have trouble getting the demos or your own code to work, there are number of things that could be the cause. Here are some steps to take to fix the problem.

  1. The first thing to check is that you have enabled the two essential options in opera:config. See the download section for details.
  2. If that doesn't work, it could be an issue with the UPnP device you're using. We've noticed differences in UPnP support even within a single product line of TVs, for example. Please try with another UPnP device if possible, or test using a UPnP server and renderer installed on your own PC first.
  3. Another cause could be file formats. UPnP renderers are restricted by the formats they can decode and play so trying media files in various formats may help.
  4. If the problem still persists then please leave a comment at the bottom of this article or a message in the Dev.Opera forums.

What's next?

We are currently discussing and iterating on the current Network Service Discovery specification in the W3C Device APIs Working Group. If you would like to contribute to development of this specification, you should join the public mailing list.

One future improvement we are considering is to enable web pages to register themselves as services and advertise themselves on the local network. This would mean they could communicate with other devices in a network peer-to-peer, even between web pages on different devices!

Conclusion

As this is the first implementation of an early specification, any developer feedback is extremely valuable. We'd be grateful if you could let us know in the comments section below about your experiences with these builds, as well as ideas you may have for other use cases and improvements we could make. One improvement that has lots of potential is support for Zeroconf, meaning web pages could talk to iTunes, AirPlay devices, etc.

Multi-screen capability is a fast-moving technology so watch this space!

This article is licensed under a Creative Commons Attribution 3.0 Unported license.

Comments

  • photo

    Martin Kadlec

    Tuesday, October 23, 2012

    Hi, when I first tried to open both demos (UPnP inspector and media player) at once Opera crashed. E-Mail in crash report is harou2 (at) gmail . com ... after Opera restarted I opened each of them separately and it seems to work fine.
  • photo

    Martin Kadlec

    Tuesday, October 23, 2012

    Also I get this error in the media player demo:

    [23.10.2012 15:47:40] JavaScript - http://people.opera.com/danield/webapps/nsd-demo/
    Event thread: click
    Uncaught exception: ReferenceError: Undefined variable: togglePlayback
    Error thrown at unknown location in <anonymous function>(event) in http://people.opera.com/danield/webapps/nsd-demo/:
    /* no source available */
  • photo

    Daniel Davis

    Tuesday, October 23, 2012

    Thanks for the quick feedback Martin.
    I can't reproduce the crash issue but we can analyse the report you've sent.
    As for the click error, I've removed the guilty onclick handler. I think I'll look into adding proper click events so that it can be used without a keyboard as well.
  • photo

    m910q

    Tuesday, October 23, 2012

    The link "home page" goes to a 404 page: http://richtr.github.com/UPnPServiceWrapper/
  • photo

    Martin Kadlec

    Tuesday, October 23, 2012

    Daniel Davis: Thx, later I had another +-10 crashes (I sent only two reports), so it is not a random thing. If you won't be able to fix it based on the crash report then just send me a mail and I'll send you callstack and memory dump.
  • photo

    Andreas Bovens

    Tuesday, October 23, 2012

    m910q, thanks for the catch. Fixed now.
  • photo

    JanGen

    Wednesday, October 24, 2012

    Funny, can easily browse my photo's from a Galaxy S in Opera with the media player demo just by starting the Allshare (Samsung) DLNA app.
    No crash seen
    Ubuntu 64
  • photo

    Andreas Bovens

    Thursday, October 25, 2012

    JanGen - interesting. Do you think you can post a video somewhere?
  • photo

    h143570

    Thursday, October 25, 2012

    This would partially explain the demise of Unite.
  • photo

    m910q

    Sunday, November 4, 2012

    I have created a proof of concept site, which will get some info from your UPnP supported router.
    You can view the mappings of ports, and remove them. (Adding might be added later on)

    Site: http://m910q.net/UPnP/router.html
    I have only been able to test it on my Linksys E4200 router.

    Example of how it should look, if it works: http://m910q.net/UPnP/example.png

    I did not have any issues with Opera at all, while creating this.
  • photo

    Marcin Simonides

    Tuesday, November 6, 2012

    This is something that could by used in my experimental TeleTube DLNA extension: http://teletube.studio4plus.com/upnp.html
  • photo

    Netdesign

    Friday, November 9, 2012

    Great!!!
  • photo

    Jim

    Saturday, November 24, 2012

    STOP PUTTING EVERYTHING UNDER USER PREF!!!

    It has become an increasing long list and it contains options that no longer work or are duplicated in other parts of opera:config

    Let a Opera fan help if you have to but please stop throwing everything into this increasingly long and unreadable list.
  • photo

    javierbarellano

    Tuesday, December 17, 2013

    what about builds for mobile devices....

    thanks for the great work!
No new comments accepted.