Presentation API

Final Report 21 July 2014

This Version:
Latest Published Version
Previous Version:
Send feedback to the community group's mailing list public-webscreens@w3.org, or create or browse open issues on GitHub. Also, you may join on the CG's IRC channel.
Version History:
Dominik Röttsches, Intel


This specification defines an API to enable web content to access external presentation-type displays and use them for presenting web content.

Status of this Document

This specification was published by the Second Screen Presentation Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups.

This report documents the use cases, requirements, examples and interfaces needed to enable web pages to display web content on secondary screens. It is an evolved version of the initial Presentation API that represents the result of discussions within the Second Screen Presentation Community Group so far. API semantics still need to be specified. The report may serve as starting point for a possible Working Group chartered to work on the same topic.

Table of Contents

  1. 1 Introduction
    1. 1.1 Use Cases
      1. 1.1.1 Presentations
      2. 1.1.2 Video and Image Sharing
      3. 1.1.3 Gaming
      4. 1.1.4 Media Flinging to Multiple Screens
  2. 2 Requirements
    1. 2.1 Functional Requirements
    2. 2.2 Non-Functional Requirements
  3. 3 Conformance
  4. 4 Terminology
  5. 5 Example
    1. 5.1 Open Questions
    2. 5.2 Usage on Remote Screen
  6. 6 Interfaces
    1. 6.1 NavigatorPresentation
    2. 6.2 AvailableChangeEvent
    3. 6.3 PresentEvent
    4. 6.4 PresentationSession
  7. References
  8. Acknowledgements

1 Introduction

This section is non-normative.

This specification 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).

Devices with limited screen size lack the ability to show content to a larger audience, for example a group of colleagues in a conference room, or friends and family at home. Showing content on an external large display helps to improve the perceived quality and impact of the presented content.

At its core, this specification 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.

This way of attaching to displays could be enhanced in the future through definition of a standard protocol for delivering these types of messages that display devices could choose to implement.

The API defined here is intended be used with UAs that attach to display devices through any of the above means.

1.1 Use Cases

1.1.1 Presentations

A user is preparing a set of slides for a talk. Using a web based service, she is editing her slides and speaker notes on the primary screen, while the secondary larger screen shows a preview of the current slide. When the slides are done, her mobile phone allows her to access them from an online service while on the go. Coming to the conference, using wireless display technology, she would like to present her slides on the stage screen from her mobile phone. The phone's touch screen helps her to navigate slides and presents a slide preview, while the projector shows her slides to the audience.

Requirements: R1, R3, R4, R5, R7

1.1.2 Video and Image Sharing

Using an online video or image sharing service, a user would like to show memorable moments to her friends. Using a device with a small screen, it is impossible to show the content to a large group of people. Connecting an external TV screen or projector to her device - with a cable or wirelessly - the online sharing service now makes use of the connected display, allowing a wider audience to enjoy the content.

The web page shows UI elements that allow the user to trigger displaying content on the secondary display (e.g a "send to second screen" ) only if there is at least one secondary screen available.

Requirements: R1, R3, R4, R5, R7

1.1.3 Gaming

Splitting the gaming experience into a near screen controller and a large screen visual experience, new gaming experiences can be created. Accessing the local display on the small screen device and an external larger display allows for richer web-based gaming experiences.

Requirements: R1, R3, R4, R5, R7

1.1.4 Media Flinging to Multiple Screens

Alice enters a video sharing site using a browser on her tablet. Next, Alice picks her favorite video from the site, and the video starts to play on her tablet. While the video is playing Alice clicks a button "Share on different screen". The browser provides a user interface that lists all the screens Alice has around her home, asking her to select one. The screens are identified by names that are familiar to Alice. Alice picks one screen from the list, "Alice's big TV", and the video playback continues seamlessly on the selected screen. Next she decides to switch the playback to a different screen. She clicks the same button "Share on different screen" provided by the site, and the browser presents the user interface that lists all the screens. Alice picks another screen from the list, "Alice's kitchen TV", and the playback resumes on that screen. Video site also provides a feature to see the action (Alice is watching a soccer game) from different angle. Alice clicks a button "Select screen for additional angle", and the browser asks Alice similarly to select the screen to be used for playback. Alice picks "Alice's Projector" and the soccer game is shown on the projector from a different angle, in parallel to the content being played back on "Alice's kitchen TV".

Requirements: R1, R3, R4, R5, R6, R7

2 Requirements

2.1 Functional Requirements

Multi-Screen enumeration and named identification removed, after discussion on the mailing list, cmp. http://lists.w3.org/Archives/Public/public-webscreens/2014Feb/0021.html :

2.2 Non-Functional Requirements

3 Conformance

All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119. For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]

Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and terminate these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc.) used in introducing the algorithm.

Conformance requirements phrased as algorithms or specific steps may be implemented in any manner, so long as the end result is equivalent. (In particular, the algorithms defined in this specification are intended to be easy to follow, and not intended to be performant.)

4 Terminology

The term presentation display refers to an external screen connected to the device that the user agent runs on.

The terms event handlers and event handler event types are defined in [HTML5].

This document provides interface definitions using the [WEBIDL] standard.

5 Example

Running in a compliant user agent, code for presenting a page example.html on the presentation display looks as follows:

/* controller.html */

<button disabled>Show</button>

var presentation = navigator.presentation,
    showButton = document.querySelector('button');
presentation.onavailablechange = function(e) {
  showButton.disabled = !e.available;
  showButton.onclick = show;
function show() {
  var session = presentation.requestSession('http://example.org/');
  session.onstatechange = function() {
    switch (session.state) {
      case 'connected':
        session.onmessage = function() { /*...*/ };
      case 'disconnected':

The availability monitoring for secondary screens begins when the page adds an event listener for the availablechange event on the navigator.presentation object. If there are already available screens when the page adds the first event listener for the event, the UA synthesizes a single availablechange event to signal the availability.

Do we want to fire an event immediately after the page registers for it? What's a best practice method for asynchronous notifications of ths kind? See below in the Open Questions section.

It is an open issue whether to provide filter information as part of the request for notification of available screens. This could be useful when a particular application or capability is needed in order to display the contents of a presentation. One possible approach to this could be to provide the URL for the presentation and / or required options as part of the request for notification of available screens. If this was supported, only screens that satisfied the filter would trigger a notification.

The "Show" button's state (initially disabled) informs the user of the availability of secondary screen(s), and the button's state is updated if the availability changes. (The rationale of putting the actual boolean information into a property of the event e.available is to allow the implementation to optimize power consumption for network discovery of remote wireless screens. If this information was provided in a globally accessible flag, the network discovery could never be suspended for keeping the flag up to date.)

Once the user clicks the "Show" button, the show() function is called.

By calling navigator.presentation.requestSession(url), the script on the page tries to launch or resume a presentation on a secondary screen. Based on the url argument, the UA looks for existing sessions and available screens, and presents a screen picker user interface to the user. Out of the list of existing sessions or available screens the user selects one item. If an existing session was selected, the session is resumed by establishing a communication channel. If a new screen was selected, the UA connects to the selected screen, brings up a new window on the selected screen, starts to show the content denoted by the url argument, and the UA establishes a communication channel with this window.

When the navigator.presentation.requestSession(url) function is called, the UA immediately returns a session object to the script which represents a handle to the current presentation session, used for communication and state handling.

If the user has selected a screen, the content is shown and a communication channel was established, the state of the session object changes from "disconnected" to "connected", which signals the presentation session is up and running, and the opener page can communicate with the presentation page. For communication with the presentation page, the session object's postMessage() is used to send, and the onmessage event handler to receive messages.

If the user cancels the screen selection and never selects a screen, no state transition happens and the session object remains in the "disconnected" state.

5.1 Open Questions

Do we need to insert into the description an additional permission prompt to grant the page access to the "one ore more screens are available" Information?

If there are already connected screens when the page subscribes to the onavailablechange event, we can handle this in two ways: We can synthesize one initial event to notify the page about available screens as soon as the first event handler is installed (as described). Or we can add another message like navigator.presentation.getAvailable(function(available) { } ); to notify the page about available screens using this one-time asynchronous getter. Which way should we go?

Do we need an additional state like resumed in order to identify resumed session? It seems that this could be handled on the page level. The opener page could ask the presentation page whether it is "new" or "resumed".

5.2 Usage on Remote Screen

For addressing the requirement of communication between originating page and presentation page/screen, we can now use the same session object on the remote side.
navigator.presentation.onpresent = function(e) {
  // Communicate with opener page.
  e.session.onmessage = function() {/*...*/};

  e.session.onstatechange = function() {
    switch (this.state) {
      case "disconnected":
        // Handle disconnection from opener page.

When the content denoted by the url argument in the requestSession() example above is loaded, the page on the presentation screen receives a PresentEvent, with a session property representing the session. This session is a similar object as in the first example. Here, its initial state is "connected", which means we can use it to communicate with the opener page using postMessage() and onmessage.

We can also monitor the connection state by listening for statechange events. When the state changes to "disconnected" the page is made aware of the fact that communication with the opener page was lost, but it can continue to display the current content. The communication can be re-established when a new present event fires on the navigator.presentation object.

6 Interfaces

The interfaces described herein address the requirements outlined in the Use Cases section, and specifically, also consider the Media Flinging to Multiple Screens use case unaddressed by the previous version of the Presentation API. This section describes the interfaces to the extend discussed in the Second Screen Presentation Community Group. Readers are encouraged to consult the Example section together with this section for a more complete understanding of the technical parts of this specification.

interface NavigatorPresentation : EventTarget {
  PresentationSession requestSession(DOMString url);
  attribute EventHandler onavailablechange;
  attribute EventHandler onpresent;

partial interface Navigator {
  readonly attribute NavigatorPresentation presentation;

6.2 AvailableChangeEvent

Fired at the primary screen's NavigatorPresentation object, when screen availability changes.

[Constructor(DOMString type, optional AvailableChangeEventInit eventInitDict)]
interface AvailableChangeEvent : Event {
  readonly attribute boolean available;

dictionary AvailableChangeEventInit : EventInit {
  boolean available;

6.3 PresentEvent

Fired at the secondary screen's NavigatorPresentation object, when the presentation session is established.
[Constructor(DOMString type, optional PresentEventInit eventInitDict)]
interface PresentEvent : Event {
  readonly attribute PresentationSession session;

dictionary PresentEventInit : EventInit {
  PresentationSession session;

6.4 PresentationSession

An object representing the established presentation session.

enum PresentationSessionState { "connected", "disconnected" /*, "resumed" */ };

interface PresentationSession : EventTarget {
  readonly attribute PresentationSessionState state;
  void postMessage(DOMString message);
  void close();
  attribute EventHandler onmessage;
  attribute EventHandler onstatechange;


HTML5, Robin Berjon, Steve Faulkner, Travis Leithead et al.. W3C.
Key words for use in RFCs to Indicate Requirement Levels, Scott Bradner. IETF.
Web IDL, Cameron McCormack. W3C.


Thanks to Wayne Carr, Louay Bassbous, Anssi Kostiainen, 闵洪波 (Hongbo Min), Anton Vayvod for help with editing, reviews and feedback to this draft.