HTML Slidy remote

Implementation details

The source code is available on GitHub under a W3C Software license.

Presentation API shim

Under the hoods, the demo uses a JavaScript shim of the Presentation API that supports:

Google Cast devices

Support for Google Cast devices requires Google Chrome with the Google Cast extension

Second screens attached through a video port

Support for these second screens requires that you run this page in a modified version of Chromium specifically prepared to demo the Presentation API.

Supported attachment methods include regular video ports (HDMI, VGA) as well as wireless equivalent (e.g. Miracast, WiDi).

If there are more than one second screen available, the demo selects the first one.

Separate window

This is used as a fallback when the shim cannot find available second screens

Note that your Web browser is likely going to block this attempt to open a pop-up window by default! It should offer a way to authorize it though.

How the demo works

When the user requests to present the given slide show, this page calls navigator.presentation.requestSession to open the appropriate HTML Slidy receiver application on a second screen. The call returns a PresentationSession object. The page then uses that object to have the HTML Slidy receiver application open the requested slide show and to send Slidy commands afterwards.

The HTML Slidy receiver application is an empty page that listens to messages it receives from navigator.presentation.onmessage. When it receives the appropriate message, it loads the requested slide show in a child iframe that takes up 100% of the viewport and controls the Slidy instance of the slide show within that iframe in reaction to further presentation messages it receives.

Due to usual security restrictions, the origins of the HTML Slidy receiver application and of the slide show must match. The receiver application would not be able to control the slide show otherwise. This page only knows of two HTML Slidy receiver applications:

• The receiver that ships with this page, bound to https://tidoust.github.io
• A receiver that runs on the W3C Web site, bound to https://www.w3.org

You may extend the code to support receiver applications on other domain names. Both HTML Slidy receiver applications have been registered with Google and may run on any Chromecast device.

Why use an iframe on the receiving side?

Since the iframe triggers the same origin constraint, it would be tempting to drop it altogether. It could be done in theory provided HTML Slidy is updated to listen to navigator.presentation.onmessage events.

In practice, this would require slide shows to use that updated (and likely unstable) version of HTML Slidy, which is probably not a good idea for actual slide shows. Also note that there is no way to run arbitrary receiver applications with Google Cast devices for the time being: any receiver application must first be registered with Google. Having to register all existing slide shows would be somewhat tedious.

Slidy commands

Slidy commands can be sent to the second screen using the Slidy remote that this page will display once the presentation session has started. Key presses and gestures are also supported.

There are a few known restrictions at this stage:

• no way to scroll the current slide on the second screen
• no way to interact with the table of contents
• no way to interact with contents on the slide show (e.g. video controls)

Contact

For feedback on the demo or on the Presentation API itself, use the public-webscreens@w3.org mailing-list (with public archive) or get in touch with Francois Daoust if you do not wish your comment to appear in public.

Feel free to use GitHub issue tracker to report bugs and feature requests.

Acknowledgements

This work was done with support from the European Commission under grant agreement no: 610404 (MediaScape).