The main purpose of the Presentation API is to enable web pages to access external presentation-type displays and use them for presenting web content. It aims to make secondary displays such as a projector or a connected TV available to the web and takes into account displays that are attached using wired (HDMI, DVI or similar) and wireless technologies (MiraCast, Chromecast, DLNA, AirPlay or similar). At its core, the specification of the Presentation API enables an exchange of messages between a requesting page and a presentation page shown in the secondary display. How those messages are transmitted is left to the UA in order to allow for use of display devices that can be attached in a wide variety of ways. For example, when a display device is attached using HDMI or MiraCast, the UA on the requesting device can render the requested presentation page in that same UA, but instead of displaying in a window on that same device, it can use whatever means the operating system provides for using those external displays. In that case, both the requesting page and the presentation page run on the requesting device and the operating system is used to route the presentation display output to the other display device. The second display device doesn't need to know anything about this spec or that the content involves HTML5. Alternately, some types of external displays may be able to render HTML5 themselves and may have defined their own way to send messages to that content. In that case, the UA on the requesting device would not need to render the presentation page itself. Instead, the UA could act as a proxy translating the request to show a page and the messages into the form understood by the display device.
Since the Presentation API abstracts from all the technologies described above and specifies only the interfaces, there are different ways to implement it depending from the target platform of the controlling device and the presenting display as well as from the technologies and protocols used behind. In next sections we will introduce different implementations of the Presentation API as part of the FAMIUM Framework covering most important platforms and protocols. The main purpose of the FAMIUM implementation is the early experimentation with the Presentation API and evaluation of its features. Multiscreen Applications developed using the FAMIUM implementation of the Presentation API should work in the same way and without any modifications in Web Browsers that implement the Presentation API natively in the future.
The following subsections describes how to develop and run a simple Multiscreen Application using the FAMIUM Implementation.
Develop Example Application
The following HTML examples sender.html and receiver.html illustrate the usage of the API. sender.html is the web page for the controlling device and receiver.html is the web page to be displayed on the secondary display.
sender.html requests to present receiver.html on a secondary display using navigator.presentation.requestSession("receiver.html"). After a session is created and connected, sender.html can use session.postMessage(...) and session.onmessage to send and receive messages to or from receiver.html. session.onstatechange can be used to monitor the state of the session if it is connected or disconnected.
To run the Example application, both HTML files sender.html and receiver.html need to be hosted on a web server (e.g. http://example.com) in the same folder (public URLs could be for example http://example.com/sender.html and http://example.com/receiver.html). In next step one or more Virtual Displays need to be opened in a Browser on any device using the following URL: http://famium.fokus.fraunhofer.de/display.html#room=[room]&name=[name]. [room] and [name] need to be replaced with the actual values e.g. http://famium.fokus.fraunhofer.de/display.html#room=12345678&name=MyDisplay. The parameter room assigns one or more virtual displays into a group. The parameter name specifies a friendly name of the Display. A display in a room can be found only by applications in the same room. To assign the example application above to a room, the sender application need to be opened in a web browser using the following URL: http://example.com/sender.html#room=[room]. [room] needs to be replaced with the actual room value e.g. http://example.com/sender.html#room=12345678. In this case the example application will find the virtual display MyDisplay since both are in the same room.
Joining and Leaving rooms using FAMIUM API
Instead of specifying the value of the room as hash parameter in the URL, FAMIUM offers an API to join or leave rooms. It is possible to join multiple rooms at same time. The following Example shows how to use the join and leave functions:
Demo Applications are available online http://famium.fokus.fraunhofer.de/apps#room=[room]. Please replace room with the actual room value. To run the Demo applications it is necessary to open at least a Virtual Display as described above using the following URL http://famium.fokus.fraunhofer.de/display.html#room=[room]&name=[name].
How it works
The main idea behind the FAMIUM implementation of the Presentation API is the following:
The FAMIUM JavaScipt Client establishes a WebSocket connection (fallback to other solutions like XHR or Polling if WebSockets is not supported) to a central server (famium.fokus.fraunhofer.de) maintained by Fraunhofer FOKUS.
Each display instance establishes also a connection to the same server.
The FAMIUM server consists of components like ConnectionManager, DiscoveryManager, SessionManager and CommunicationManager to process requests and notify clients (Applications or Displays).
Presentation API implementation as Apache Cordova Plugin
This Cordova Presentation API Plugin implementation supports currently the following platforms and technologies, utilizing the single UA approach and streaming the contents of a second WebView to the external display:
PS: The FAMIUM Display Chromecast Application is not published yet in the Chromecast Store, if you want to try this feature please contact firstname.lastname@example.org.
FAMIUM Presentation API for Android
FAMIUM provides two Applications FAMIUM Browser and FAMIUM Display for Android that support the Presentation API. Both require Android >= 4.2.2. FAMIUM Browser is designed to run on Android Smartphones and Tablets while FAMIUM Display is designed to run on Android HDMI Dongles or TV Platforms that support Android, but can be also installed on Android Smartphones and Tablets as for FAMIUM Browser.
FAMIUM Browser for Android
FAMIUM Display for Android
As mentioned above, the FAMIUM Display is designed to run on Android TVs or Android Dongles that can be connected to TV through HDMI port, but also on Android Tablets and Smartphones. FAMIUM Display for Android provides in addition to the FAMIUM Display for traditional Web Browsers (http://famium.fokus.fraunhofer.de/display.html#room=[room]&name=[name]) Network Service Discovery Support. FAMIUM Display advertises a Service in the local Network using mDNS/DNS-SD. A FAMIUM Browser running on a device in the same Network discovers all FAMIUM Displays and offers them as possible target displays in the Presentation API. The following video shows a demo with FAMIUM Browser running on Android Tablet that displays web content through the Presentation API on a FAMIUM Display running on an Android Dongle connected to TV through HDMI port.
FAMIUM Presentation API for Desktop Platforms
Similar to FAMIUM Browser and FAMIUM Display for Android, FAMIUM provides FAMIUM Browser and FAMIUM Display for Desktop Platforms. FAMIUM Browser on Android or Desktop discovers any FAMIUM Display on Android or Desktop in the same Network. Furthermore FAMIUM Browser for Desktop Platforms provides some experimental extensions of the Presentation API like media playback on UPnP MediaRenderers. To activate this feature the parameter upnp=1 must be appended to the URL of the sender application e.g. http://example.com/sender.html#upnp=1
FAMIUM Presentation API for any Browser/Platform
FAMIUM Browser: no download is required. Any modern web Browser can be used. room parameter must be specified.
FAMIUM Display: no download is required. FAMIUM Display can be opened in any modern Browser using http://famium.fokus.fraunhofer.de/display.html#room=[room]&name=[name]. room and name must be replaced with actual values.
FAMIUM Presentation API for Android
FAMIUM Browser (v0.0.1): FAMIUM Browser for Android can be downloaded from here famium-browser-v0.0.1.apk. Requirement: Android>=4.2.2.
FAMIUM Display (v0.0.1): FAMIUM Display for Android can be downloaded from here famium-display-v0.0.1.apk. Requirement: Android>=4.2.2.