FAMIUM Implementations of the Presentation API


// Quick Info
// List and descriptions of Presentation API implementations in FAMIUM
// Based on spec: W3C Presentation API, latest draft version
// Discussed in groups: W3C Second Screen CG, W3C Second Screen WG
// Available in framework: FAMIUM Multiscreen
// FAMIUM is a prototype implementation of upcoming Web and media technologies


Introduction

This document describes different implementations of the Presentation API introduced by the W3C Second Screen Presentation Community Group. These implementations are part of FAMIUM, an end-to-end prototype implementation for early technology evaluation and interoperability testing introduced by Fraunhofer FOKUS’ Competence Center Future Applications and Media (FAME).

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.

Presentation API implementation as JavaScript service

Implementation of the Presentation API for a specific technology requires in general native extension of the Browser to support the addressed technology. In FAMIUM we introduced the concept of Virtual Displays that can be opened in any modern web browser and act as secondary displays for the Presentation API. No native extension of the Browser is needed in this case. Instead, the following FAMIUM JavaScript Library (webcreens.all.min.js) that implements the Presentation API needs to be included in the web pages that use the API:

<script type="text/javascript" src="http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js"></script>

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.

<!-- sender.html -->
<!doctype html>
<html>
<head>
   <title>Sender Example</title>
   <script type="text/javascript" src="http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js"></script>
   <script type="text/javascript">
      navigator.presentation.onavailablechange = function(dict){
         if(dict.available){
            var session = navigator.presentation.requestSession("receiver.html");
            session.onmessage = function(msg){
               console.log("onmessage",msg);
            };
            session.onstatechange = function(){
               console.log("onstatechange",session.state);
               if(session.state == "connected"){
                  session.postMessage("foo");
               }
            }
         }
      };
   </script>
</head>
<body>
   <h1>Sender Example</h1>
</body>
</html>

receiver.html includes also the FAMIUM JavaScript library webscreens.all.min.js and uses navigator.presentation.onpresent to receive session requests from sender.html. The session can be used in the same way as for sender.html.

<!-- receiver.html -->
<!doctype html>
<html>
<head>
   <title>Receiver Example</title>
   <script type="text/javascript" src="http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js"></script>
   <script type="text/javascript">
      navigator.presentation.onpresent = function(evt){
         var session = evt.session;
         session.onmessage = function(msg){
            console.log("onmessage",msg);
            session.postMessage("bar");
         }
         session.onstatechange = function(){
            if(session.state == "disconnected"){
               window.close();
            }
         }
      };
   </script>
</head>
<body>
   <h1>Receiver Example</h1>
</body>
</html>

Run Example Application

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:

<script type="text/javascript" src="http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js"></script>
<script type="text/javascript">
   famium.webscreens.join('12345');

   // somewhere else in your code call leave if needed
   famium.webscreens.leave('12345');
</script>

Online Demo

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].

The following video shows how to develop and run a simple Hello World Multiscreen Application using FAMIUM JavaScript Library:

video

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:

Visit the Cordova Presentation API Plugin project page for more details on the implementation and to get the code and sample app. Screenshots of the sample app:

Controller
Presenting

FAMIUM Presentation API with Chromecast Support

FAMIUM Implementation of the Presentation API supports also displaying web content on Chromecast devices. A Chrome Browser with Google Cast Extension installed is required. It is necessary to activate Chromecast in the sender application by just setting the parameterchromecast=1 to load the necessary Chromecast JavaScript Libraries. There no need to set a value for the parameter room and no need to open a display manually. The URL http://example.com/sender.html#chromecast=1 can be used for the example application described above. It is also possible to use the room parameter even if Chromecast is enabled e.g. http://example.com/sender.html#chromecast=1&room=[room]. In this case the Chromecast device and any display in the same room are considered as targets of the Presentation API. The following video shows a Demo using Chromecast:

video

PS: The FAMIUM Display Chromecast Application is not published yet in the Chromecast Store, if you want to try this feature please contact louay.bassbouss@fokus.fraunhofer.de.

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

The FAMIUM Browser for Android provides in addition to the pure JavaScript Implementation of the Presentation API as described above also support for other protocols like WiDi, Miracast,Google Cast and Network Service Discovery (mDNS/DNS-SD). In this case, it is not necessary to specify the room parameter manually (The room can still be used in addition to the supported protocols). FAMIUM uses the underlying Android API to open FAMIUM Display on each connected screen. The following video shows a Demo of FAMIUM Browser on Android by connecting it to Wireless Display.

video

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. video

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

Downloads

  • FAMIUM Presentation API JavaScript Library: You can download the FAMIUM Presentation API JavaScript Library from here http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js or just include it directly in your application using <script type="text/javascript" src="http://famium.fokus.fraunhofer.de/js/webscreens.all.min.js"></script>. The FAMIUM Presentation API JavaScript Library is required for all pages (sender and receiver) that use the Presentation API.

  • 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.
  • FAMIUM Presentation API for iOS

    • coming soon ...
  • FAMIUM Presentation API for Desktop Platforms

    • FAMIUM Browser
      • Windows (v0.0.1): FAMIUM Browser for Windows can be downloaded from here famium-browser-win32-v0.0.1.zip. Just unzip and run famium-browser.exe.
      • Linux: coming soon ...
      • Mac: coming soon ...
    • FAMIUM Display
      • Windows (v0.0.1): FAMIUM Display for Windows can be downloaded from here famium-display-win32-v0.0.1.zip. Just unzip and run famium-display.exe.
      • Linux: coming soon ...
      • Mac: coming soon ...

Contact

  • Dr. Stephan Steglich, Fraunhofer FOKUS, Director of Competence Center "Future Applications and Media - FAME": stephan.steglich@fokus.fraunhofer.de
  • Louay Bassbouss, Fraunhofer FOKUS, Project Manager at Competence Center "Future Applications and Media - FAME": louay.bassbouss@fokus.fraunhofer.de
  • www.fokus.fraunhofer.de/go/famium

.