index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>
      Remote Playback API
    </title>
    <script src="https://www.w3.org/Tools/respec/respec-w3c" async
    class="remove">
    </script>
    <script class="remove">
    var respecConfig = {
        specStatus: 'ED',
        edDraftURI: 'https://w3c.github.io/remote-playback/',
        shortName:  'remote-playback',
        group: 'secondscreen',
        editors: [
          {
            w3cid: 68454,
            name: 'Mark Foltz',
            company: 'Google',
          },
        ],
        formerEditors: [
          {
            w3cid: 45389,
            name: 'Mounir Lamouri',
            company: 'Google',
          },
          {
            w3cid: 68811,
            name: 'Anton Vayvod',
            company: 'Google',
          },
        ],
        sotdAfterWGinfo: true,
        license: "w3c-software-doc",
        // previousMaturity: 'WD',
        // previousPublishDate: '2015-11-02',
        otherLinks: [
          {
            key: 'Test suite',
            data: [
              {
                value: 'GitHub web-platform-tests/remote-playback',
                href: 'https://github.com/web-platform-tests/wpt/tree/master/remote-playback'
              },
              {
                value: 'w3c-test.org/remote-playback/',
                href: 'https://w3c-test.org/remote-playback/'
              }
            ]
          }
        ],
        group: 'secondscreen',
        github: 'https://github.com/w3c/remote-playback',
        crEnd: '2017-11-30',
        implementationReportURI: 'https://www.w3.org/wiki/Second_Screen/Implementation_Status#Remote_Playback_API'
      };
    </script>
    <style>
    /* Note formatting taken from Presentation API spec for consistency in the
       Second Screen WG */
    .note { border-left-style: solid; border-left-width: 0.25em; background: none repeat scroll 0 0 #E9FBE9; border-color: #52E052; }
    .note em, .warning em, .note i, .warning i { font-style: normal; }
    p.note, div.note { padding: 0.5em 2em; }
    span.note { padding: 0 2em; }
    .note p:first-child { margin-top: 0; }
    .note p:last-child { margin-bottom: 0; }
    p.note:before { content: 'NOTE: '; }
    .non-normative { border-left-style: solid; border-left-width: 0.25em; background: none repeat scroll 0 0 #E9FBE9; border-color: #52E052; }
    p.non-normative:before { content: 'Non-normative: '; font-weight: bolder;}
    p.non-normative, div.non-normative { padding: 0.5em 2em; }
    .algorithm li {
        margin-bottom: 0.5em;
    }
    .interface dd, .parameters dt {
        margin-bottom: 0.5em;
    }
    code { color: orangered; }
    table { border-collapse: collapse; border-style: hidden hidden none hidden; }
    table thead, table tbody { border-bottom: solid; }
    table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
    dfn { font-weight: bolder; font-style: normal; }
    .copyright { font-size: small; }
    .issue[id^='issue-'] > *:not([role='heading']) { display: none; }
    </style>
  </head>
  <body data-cite="HTML DOM URL SECURE-CONTEXTS">
    <section id="abstract">
      <p>
        This specification defines an API extending the {{HTMLMediaElement}}
        that enables controlling remote playback of media from a web page.
      </p>
    </section>
    <section id="sotd">
      <p>
        This document builds on the group's experience on presenting web
        content on external presentation-type displays, and re-uses patterns
        and design considerations from the Presentation API specification
        whenever appropriate [[PRESENTATION-API]].
      </p>
      <p>
        Although this document is still a <strong>work in progress</strong> and
        is subject to change, the Working Group believes that the API surface is
        stable. Most of the remaining issues listed on the <a href=
        "https://github.com/w3c/remote-playback/issues/">issue tracker</a> are
        considered minor at this stage except for
        Issue <a href="https://github.com/w3c/remote-playback/issues/41">#41</a>.
      </p>
      <p>
        Issue <a href="https://github.com/w3c/remote-playback/issues/41">#41</a>
        discusses the set of media playback features that remote playback
        devices are expected to support. The group will seek further developer
        feedback and implementation experience to identify any interoperability
        issues around these features when used during remote playback, and will
        further clarify the specification based on feedback received.
      </p>
      <p>
        For other issues or concerns, it is possible to <a href=
        'https://github.com/w3c/remote-playback/issues/new'>file a bug</a> or
        send an email to the <a href=
        'https://lists.w3.org/Archives/Public/public-secondscreen/'>mailing
        list</a>. For small editorial changes like typos, sending a pull request
        is appreciated.
      </p>
      <p>
        The Working Group invites everyone to review this document, and will
        work with relevant groups at W3C to conduct horizontal reviews on
        accessibility, internationalization, privacy, security and technical
        architecture principles.
      </p>
      <p>
        No feature has been identified as being <strong>at risk</strong>.
      </p>
      <p>
        The Second Screen Working Group will develop a test suite for the
        Remote Playback API during the Candidate Recommendation period and
        prepare an implementation report. For this specification to advance to
        Proposed Recommendation, two independent, interoperable implementations
        of each feature must be demonstrated, as detailed in the <a href=
        "#candidate-recommendation-exit-criteria">Candidate Recommendation exit
        criteria</a> section.
      </p>
    </section>
    <section id='conformance'>
      <p>
        This specification defines conformance criteria that apply to a single
        product: the user agent that implements the interfaces that
        it contains.
      </p>
      <p>
        Implementations that use ECMAScript to expose the APIs defined in this
        specification MUST implement them in a manner consistent with the
        ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].
      </p>
    </section>
    <section class="informative">
      <h2>
        Introduction
      </h2>
      <p>
        This specification aims to make <a>remote playback devices</a> such as
        connected TVs, projectors or audio-only speakers, available to the Web
        and takes into account playback devices that are attached using wired
        (HDMI, DVI, or similar) and wireless technologies (Miracast,
        Chromecast, DLNA, AirPlay, or similar).
      </p>
      <p>
        Devices with limited screen size or quiet speakers lack the ability to
        playback media content to a larger audience, for example, a group of
        colleagues in a conference room, or friends and family at home. Playing
        media content on an external larger and/or louder <a>remote playback
        device</a> helps to improve the perceived quality and impact of the
        played media.
      </p>
      <p>
        At its core, this specification enables a page that acts as the
        <a>browsing context</a> to initiate and control remote playback of a
        particular media element on a selected <a>remote playback device</a>.
        How the remoting is initiated and controlled is left to the UA in order
        to allow the use of <a>remote playback devices</a> that can be attached
        in a wide variety of ways. For example, when a <a>remote playback
        device</a> is attached using HDMI or Miracast, the same UA that acts as
        the <a>browsing context</a> renders the remote media. Instead of
        playing the media on the same device, however, it can use whatever
        means the operating system provides for using the external <a>remote
        playback device</a>. In such a case, both the <a>browsing context</a>
        and the media player run on the same UA and the operating system is
        used to route the player output to the <a>remote playback device</a>.
        This is commonly referred to as the <dfn>media
        mirroring</dfn> case. This specification imposes no requirements on
        the <a>remote playback devices</a> connected in such a manner.
      </p>
      <p>
        If the <a>remote playback device</a> is able to play the media and
        communicate with the <a>browsing context</a> but is unable to fetch the
        media, the <a>browsing context</a> needs to fetch the media data and
        pass it on to the <a>remote playback device</a> for rendering. This is
        commonly referred to as <dfn>media remoting</dfn> case.
      </p>
      <p>
        If the <a>remote playback device</a> is able to fetch and play the media
        and communicate with the <a>browsing context</a>, the <a>browsing
        context</a> does not need to fetch or render the remoted media. In this
        case, the UA acts as a proxy that requests the <a>remote playback
        device</a> to play the media itself by passing the necessary data like
        the media source. This is commonly referred to as the <dfn>media
        flinging</dfn> case. This way of attaching to displays could be
        enhanced in the future by defining a standard protocol for delivering
        these types of messages that remote playback devices could choose to
        implement.
      </p>
      <p>
        The API defined here is intended to be used with UAs that attach to
        <a>remote playback device</a> devices through any of the above means.
      </p>
    </section>
    <section class='informative'>
      <h2>
        Use cases and requirements
      </h2>
      <p>
        The use cases and requirements of this specification are captured in a
        separate document available <a href=
        'https://github.com/w3c/remote-playback/blob/gh-pages/use-cases.md'>here</a>.
      </p>
    </section>
    <section>
      <h2>
        Examples
      </h2>
      <p>
        This section shows code examples that highlight the usage of the main
        features of the Remote Playback API. In these examples,
        `player.html` implements the player page controlling the
        remote playback and `media.ext` is the media file to be
        played remotely. Both the page and the media are served from the domain
        `https://example.org`. Please refer to the comments in the
        code examples for further details.
      </p>
      <section>
        <h3>
          Monitor availability of remote playback devices example
        </h3>
        <pre class="example">
&lt;!-- player.html --&gt;
&lt;!-- The video element with custom controls that supports remote playback. --&gt;
&lt;video id="videoElement" src="https://example.org/media.ext" /&gt;
&lt;button id="deviceBtn" style="display: none;"&gt;Pick device&lt;/button&gt;
&lt;script&gt;
  // The "Pick device" button is visible if at least one remote playback device is available.
  const deviceBtn = document.getElementById("deviceBtn");
  const videoElem = document.getElementById("videoElement");

  function availabilityCallback(available) {
    // Show or hide the device picker button depending on device availability.
    deviceBtn.style.display = available ? "inline" : "none";
  }

  videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
    // Availability monitoring is not supported by the platform, so discovery of
    // remote playback devices will happen only after remote.prompt() is called.
    // Pretend the devices are available for simplicity; or, one could implement
    // a third state for the button.
    deviceBtn.style.display = "inline";
  });
&lt;/script&gt;
        </pre>
      </section>
      <section>
        <h3>
          Starting remote playback of a video example
        </h3>
        <pre class="example">
&lt;!-- player.html --&gt;
&lt;script&gt;
  deviceBtn.onclick = () => {
    // Request the user to select a remote playback device.
    videoElem.remote.prompt()
      // Update the UI and monitor the connected state.
      .then(updateRemotePlaybackState);
      // Otherwise, the user cancelled the selection UI or no screens were found.
  };
&lt;script&gt;
        </pre>
      </section>
      <section>
        <h3>
          Monitoring remote playback state changes
        </h3>
        <pre class="example">
&lt;!-- player.html --&gt;
&lt;script&gt;
  // The remote playback may be initiated by the user agent,
  // so check the initial state to sync the UI with it.
  if (videoElem.remote.state == "disconnected")
    switchToLocalUI();
  else
    switchToRemoteUI();

  videoElem.remote.onconnecting = switchToRemoteUI;
  videoElem.remote.onconnect = switchToRemoteUI;
  videoElem.remote.ondisconnect = switchToLocalUI;

  // Handles both 'connecting' and 'connected' state. Calling more than once
  // is a no-op.
  function switchToRemoteUI() {
    // Indicate that the state is 'connecting' or 'connected' to the user.
    // For example, hide the video element as only controls are needed.
    videoElem.style.display = "none";

    // Stop monitoring the availability of remote playback devices.
    videoElem.remote.cancelWatchAvailability();
  };

  function switchToLocalUI() {
    // Show the video element.
    videoElem.style.display = "inline";
    // Start watching the device availability again.
    videoElem.remote.watchAvailability(availabilityCallback);
  };
&lt;script&gt;
        </pre>
      </section>
    </section>
    <section>
      <h2>
        API
      </h2>
      <section>
        <h3>
          Common idioms
        </h3>
        <p>
          A <dfn>local playback device</dfn> is the device the <a>browsing
          context</a> is running on along with the default video/audio outputs
          the device has.
        </p>
        <div class="note">
          A <a>local playback device</a> might have extra outputs, like an
          external display or speakers/headphones. As long as the switch of
          what output to use happens outside of the user agent on the
          system level, the playback is considered to happen on a <a>local
          playback device</a> for the purpose of this spec.
        </div>
        <p>
          A <dfn data-lt="remote playback devices">remote playback device</dfn>
          is any other device but the <a>local playback device</a> that the
          <a>browsing context</a> can use to play media on.
        </p>
        <p>
          A <dfn>media element state</dfn> is the set of all single
          <dfn data-cite="HTML#media-element">media element</dfn>
          properties observable by the page and/or the user via the
          user agent implementation. The new properties introduced by
          this spec are not considered part of the <a>media element state</a>
          for convenience.
        </p>
        <div class="example">
          For example, the `paused` attribute or the pause/resume
          button reflecting that state on the default controls of the media
          element would be a part of <a>media element state</a>.
        </div>
        <p>
          A <dfn>local playback state</dfn> is the user agent implementation of
          <a>media element state</a> for the particular <a>media element</a>
          for playback on the <a>local playback device</a>.
        </p>
        <p>
          A <dfn>remote playback state</dfn> is the user agent implementation
          of <a>media element state</a> for the particular <a>media element</a>
          for playback on the certain <a>remote playback device</a>.
        </p>
        <p class="note">
          For a good user experience it is important that the <a>media element
          state</a> doesn't change unexpectedly when the
          {{RemotePlayback/state}} changes. It is also important that <a>remote
          playback state</a> is in sync with the <a>media element state</a> so
          when the media is paused on the
          <a>remote playback device</a> it looks paused to both the user and
          the page.
        </p>
        <p>
          The <a>task source</a> for the tasks mentioned in this specification
          is the <a data-cite="HTML#media-element-event-task-source">
          media element event task source</a>.
        </p>
      </section>
      <section>
        <h3>
          <dfn>RemotePlayback</dfn> interface
        </h3>
        <pre class='idl'>
          [Exposed=Window]
          interface RemotePlayback : EventTarget {
            Promise&lt;long&gt; watchAvailability(RemotePlaybackAvailabilityCallback callback);
            Promise&lt;undefined&gt; cancelWatchAvailability(optional long id);

            readonly attribute RemotePlaybackState state;

            attribute EventHandler onconnecting;
            attribute EventHandler onconnect;
            attribute EventHandler ondisconnect;

            Promise&lt;undefined&gt; prompt();
          };

          enum RemotePlaybackState {
            "connecting",
            "connected",
            "disconnected"
          };

          callback RemotePlaybackAvailabilityCallback = undefined(boolean available);
        </pre>
        <p>
          A {{RemotePlayback}} object allows the page to detect availability
          of, connect to and control playback on <a>remote playback devices</a>.
        </p>
        <p>
          The <dfn>RemotePlaybackState</dfn> enum represents possible connection
          states to a <a>remote playback device</a>.
        </p>
        <p>
          The <dfn>RemotePlaybackAvailabilityCallback</dfn> returns the current 
          <a>remote playback device availability</a>.
        </p>
        <section data-link-for="RemotePlayback">
          <h4>
            Observing remote playback device availability
          </h4>
          <p>
            A {{RemotePlaybackAvailabilityCallback}} is the way for the page to
            obtain the <dfn>remote playback device availability</dfn> for the
            corresponding <a>media element</a>. If the user agent can <a>monitor
            the list of available remote playback devices</a> in the background
            (without a pending request to {{RemotePlayback/prompt()}}), the
            {{RemotePlaybackAvailabilityCallback}} behavior defined below MUST
            be implemented by the user agent. Otherwise, the promise returned by
            {{RemotePlayback/watchAvailability()}} MUST be rejected with
            {{NotSupportedError}}.
          </p>
          <section>
            <h5>
              The set of availability callbacks
            </h5>
            <p>
              The user agent MUST keep track of the <dfn>set of availability
              callbacks</dfn> registered with each <a>media element</a> through
              the <dfn data-dfn-for="RemotePlayback">watchAvailability()</dfn>
              method. The <a>set of availability callbacks</a> for each
              {{RemotePlayback}} object is represented as a set of tuples
              <em>(|callbackId:long|, |callback:RemotePlaybackAvailabilityCallback|)</em>,
              initially empty, where:
            </p>
            <ol>
              <li>
                |callbackId| is a positive integer unique among all ids
                returned by {{RemotePlayback/watchAvailability()}} in a
                given <a>browsing context</a>;
              </li>
              <li>
                |callback| is a {{RemotePlaybackAvailabilityCallback}} object.
              </li>
            </ol>
            <p>
              Since there's one and only one {{RemotePlayback}} object per
              each <a>media element</a>, <a>set of availability callbacks</a>
              of a <a>media element</a> is the same set as the <a>set of
              availability callbacks</a> of the {{RemotePlayback}} object
              referred to by the element's <a data-link-for=
              "HTMLMediaElement">remote</a> property.
            </p>
            <p>
              The combined set of all <a data-lt=
              "set of availability callbacks">sets of availability
              callbacks</a> of all {{RemotePlayback}} objects known to the
              <a>browsing context</a> is referred to as <dfn>global set of
              availability callbacks</dfn>.
            </p>
          </section>
          <section>
            <h5>
              The list of available remote playback devices
            </h5>
            <p>
              The user agent MUST keep a <dfn>list of available remote
              playback devices</dfn>. This list contains <a>remote playback
              devices</a> and is populated based on an implementation specific
              discovery mechanism. It is set to the most recent result of the
              algorithm to <a>monitor the list of available remote playback
              devices</a> or an empty list if the algorithm hasn't been run
              yet.
            </p>
            <p>
              The user agent MAY not support running the algorithm to
              <a>monitor the list of available remote playback devices</a>
              continuously, for example, because of platform or power
              consumption restrictions. In this case the promise returned by
              {{RemotePlayback/watchAvailability()}} MUST be rejected with
              {{NotSupportedError}}, the <a>global set of availability
              callbacks</a> will be empty and the algorithm to <a>monitor the
              list of available remote playback devices</a> will only run as
              part of the <a>initiate remote playback</a> algorithm.
            </p>
            <p>
              When the <a>global set of availability callbacks</a> is not
              empty, the user agent MUST <a>monitor the list of
              available remote playback devices</a> continuously, so that pages
              can keep track of the last value received via the registered
              callbacks to offer remote playback only when there are available
              devices.
            </p>
            <p class="note">
              The user agent is expected not to <a>monitor the list of available
              remote playback devices</a> when possible, to satisfy the <a href=
              "https://github.com/w3c/remote-playback/blob/gh-pages/use-cases.md#power-saving-friendly">
              power saving non-functional requirement</a>. For example, the
              user agent might choose not to run the monitoring
              algorithm when the <a>global set of availability callbacks</a> is
              empty, when every page that has <a>media elements</a> with non-empty
              <a>set of availability callbacks</a> is in the background.
            </p>
            <p>
              Some <a>remote playback devices</a> may only be able to play a
              subset of <a data-cite="HTML#media-resource">media resources</a>
              because of functional, security or hardware limitations. Examples
              are set-top boxes, smart TVs or networked speakers capable of
              rendering only certain formats of video and/or audio. We say that
              such a device is a <dfn>compatible remote playback device</dfn>
              for a <a data-cite="HTML#media-resource">media resource</a>
              if the user agent can reasonably guarantee that the
              remote playback of the media specified by the resource will
              succeed on that device.
            </p>
            <p class="note">
              The user agent can use the {{HTMLTrackElement/srclang}}
              attribute of the <code>[^track^]</code> element as a hint of
              the language of the text track data to help identify a
              <a>compatible remote playback device</a>.
            </p>
            <p>
              The <a data-cite="HTML#media-resource">media resources</a>
              of a <a>media element</a>, that were considered by the user agent
              to find a <a>compatible remote playback device</a>, are called the
              <dfn>availability sources set</dfn>.
            </p>
            <p>
              The <a data-cite="HTML#media-resource">media resource</a> of
              a <a>media element</a> that is used to <a>initiate remote
              playback</a> on the selected <a>remote playback device</a> is
              called the <dfn>remote playback source</dfn>.  A remote playback
              source MUST belong to the media element's <a>availability sources
              set</a>.
            </p>
            <p>
              The mechanism to choose the <a>remote playback source</a> from
              the <a>availability sources set</a> is implementation-specific,
              but the user agent SHOULD consider every resource in
              the <a>availability sources set</a> as a potential <a>remote
              playback source</a>.
            </p>
            <div class="note">
              The algorithm to select the <a>remote playback source</a> for a
              selected device depends on the user agent and supported <a>remote
              playback device</a> types. For example, in case of <a>media
              mirroring</a> the user agent can simply follow the
              {{HTMLMediaElement}}'s <a data-cite="HTML#concept-media-load-algorithm">
              resource selection algorithm</a>.  However, if <a>media
              remoting</a> or <a>media flinging</a> is used, the best media
              source can depend on the selected <a>remote playback device</a>
              fetch and playback capabilities.
            </div>
            <p>
              If the user agent cannot determine a <a>remote playback source</a>
              appropriate for the <a>remote playback device</a>, it is
              RECOMMENDED that the user agent send metadata (for example,
              the <a data-cite="HTML#attr-source-type">extended MIME type</a>)
              about all resources in the <a>availability sources set</a> to
              the <a>remote playback device</a> so it can run its own
              <a data-cite="HTML#concept-media-load-algorithm">resource
              selection algorithm</a> and choose the <a>remote playback
              source</a>.
            </p>
            <p>
              Remote playback is <dfn>unavailable</dfn> for the
              <a>media element</a> if the <a>list of available remote playback
              devices</a> is empty or none of them is compatible with any source
              from <a>availability sources set</a> for the <a>media
              element</a>. Otherwise, remote playback is
              <dfn>available</dfn>. A `boolean` set to `false` if the remote
              playback is <a>unavailable</a> for the <a>media element</a> or
              `true` if it is <a>available</a> is called
              <dfn>availability</dfn> for the <a>media element</a>.
            </p>
            <p>
              If the user agent stops
              <a data-lt="monitor the list of available remote playback devices">
              monitoring the list of available remote playback devices</a>
              (for example by a user control or for power saving), it SHOULD
              invoke all callbacks in the <a>global set of availability
              callbacks</a> with `false` so that pages can update
              their user experience appropriately.  It SHOULD also set
              the <a>availability</a> value for all <a>media elements</a>
              to `false` so that availability information can
              be propagated correctly if the user agent later resumes
              <a data-lt="monitor the list of available remote playback devices">
              monitoring the list of available remote playback devices</a>.
            </p>
          </section>
          <section>
            <h5>
              Getting the <a>remote playback devices</a> availability
              information
            </h5>
            <p>
              When the {{RemotePlayback/watchAvailability()}} method is
              called, the user agent MUST run the following steps:
            </p>
            <dl>
              <dt>
                Input
              </dt>
              <dd>
                |callback:RemotePlaybackAvailabilityCallback|, the callback that
                will get fired with availability information.
              </dd>
              <dt>
                Output
              </dt>
              <dd>
                |promise:Promise|, a {{Promise}}.
              </dd>
            </dl>
            <ol>
              <li>
                Let |promise| be a new {{Promise}}.
              </li>
              <li>
                Return |promise|, and run the following steps below:
              </li>
              <li>
                If the <a data-link-for="HTMLMediaElement">disableRemotePlayback</a>
                attribute is present for the <a>media element</a>, reject the |promise|
                with {{InvalidStateError}} and abort all the remaining steps.
              </li>
              <li>
                If the user agent is unable to <a>monitor the list of
                available remote playback devices</a> for the entire lifetime of
                the <a>browsing context</a> (for instance, because the user has
                disabled this feature), then run the following steps <a>in parallel</a>:
                <ol>
                  <li>
                    Fulfill |promise|.
                  </li>
                  <li>
                    <a>Queue a task</a> to invoke the |callback| with
                    `false` as its argument.
                  </li>
                  <li>
                    Abort all remaining steps.
                  </li>
                </ol>
              </li>
              <li>
                If the user agent is unable to continuously <a>monitor the
                list of available remote playback devices</a> but can do it for a
                short period of time when <a data-lt="initiate remote playback">
                initiating remote playback</a>, then:
                <ol>
                  <li>
                    Reject |promise| with a {{NotSupportedError}} exception.
                  </li>
                  <li>
                    Abort all remaining steps.
                  </li>
                </ol>
              </li>
              <li>
                Let |callbackId:long| be a positive integer unique among
                all the |callbackIds| previously returned by these
                steps in the <a>browsing context</a> of the <a>media
                element</a>.
              </li>
              <li>
                Create a tuple <em>(|callbackId|, |callback|)</em> and
                add it to the <a>set of availability callbacks</a>
                for this <a>media element</a>.
              </li>
              <li>
                Fulfill |promise| with the |callbackId| and
                run the following steps <a>in parallel</a>:
                <ol>
                  <li>
                    <a>Queue a task</a> to invoke the |callback| with
                    the current <a>availability</a> for the <a>media
                    element</a>.
                  </li>
                  <li>If the user agent is not <a data-lt=
                  "monitor the list of available remote playback devices">monitoring
                  the list of available remote playback devices</a>, run the
                  algorithm to <a>monitor the list of available remote playback
                  devices</a>.
                  </li>
                </ol>
              </li>
            </ol>
            <p class="note">
              A simple algorithm for assigning |callbackId| values is
              to keep a counter for each <a>browsing context</a> and
              incrementing it in step 6.
            </p>
            <div class="note">
              To avoid leaking information that could fingerprint the user, the
              user agent is expected not to assign a |callbackId| that
              uses any persistent information from the browser profile or a
              <a>remote playback device</a>.
            </div>
          </section>
          <section>
            <h5>
              Monitoring the list of available remote playback devices
            </h5>
            <p>
              If the <a>set of availability callbacks</a> is non-empty, or
              there is a pending request to <a data-lt="prompt">
              initiate remote playback</a>, the user agent
              MUST <dfn>monitor the list of available remote playback
              devices</dfn> by running the following steps:
            </p>
            <ol>
              <li>
                Retrieve available remote playback devices (using an
                implementation specific mechanism) and let |newDevices:list|
                be this list.
              </li>
              <li>
                For each <a>media element</a> known to the <a>browsing
                context</a>:
                <ol>
                  <li>
                    If the <a data-link-for="HTMLMediaElement">disableRemotePlayback</a>
                    attribute is present for |mediaElement:HTMLMediaElement|, abort all
                    the remaining steps for this tuple and continue to the next one.
                  </li>
                  <li>
                    Set |newAvailabilityValue:boolean| to the value of
                    <a>availability</a> for the <a>media element</a> calculated
                    using the |newDevices| list instead of the <a>list
                    of available remote playback devices</a>.
                  </li>
                  <li>
                    If the current <a>availability</a> is not equal to
                    |newAvailabilityValue|, then for each <em>(|callbackId:long|,
                    |callback:RemotePlaybackAvailabilityCallback|)</em>
                    of the element's <a>set of availability callbacks</a>:
                    <ol>
                      <li>
                        <a>Queue a task</a> to invoke |callback| with
                        |newAvailabilityValue| as its argument.
                      </li>
                    </ol>
                  </li>
                </ol>
              </li>
              <li>
                Set the <a>list of available remote playback devices</a> to
                the value of |newDevices|.
              </li>
            </ol>
          </section>
          <section>
            <h5>
              Stop observing remote playback devices availability
            </h5>
            <p>
              When a <dfn data-dfn-for="RemotePlayback">cancelWatchAvailability()</dfn>
              method is called, the user agent MUST run the following steps:
            </p>
            <dl>
              <dt>
                Input
              </dt>
              <dd>
                |id:long|, the callback identifier.
              </dd>
              <dt>
                Output
              </dt>
              <dd>
                |promise:Promise|, a {{Promise}}.
              </dd>
            </dl>
            <ol>
              <li>
                Let |promise| be a new {{Promise}}.
              </li>
              <li>
                Return |promise|, and run the following steps below:
              </li>
              <li>
                If the <a data-link-for=
                "HTMLMediaElement">disableRemotePlayback</a> attribute is present
                for the <a>media element</a>, reject |promise| with
                {{InvalidStateError}} and abort all the remaining steps.
              </li>
              <li>
                If the parameter |id| is `undefined`,
                clear the <a>set of availability callbacks</a>.
              </li>
              <li>
                Otherwise, if |id| matches the |callbackId:long|
                for any entry in the <a>set of availability callbacks</a>, remove
                the entry from the set.
              </li>
              <li>
                Otherwise, reject |promise| with
                {{NotFoundError}} and abort all the remaining steps.
              </li>
              <li>
                If the <a>set of availability callbacks</a> is now empty and
                there is no pending request to
                <a data-lt="prompt">initiate remote playback</a>, cancel any
                pending task to <a>monitor the list of available remote
                playback devices</a> for power saving purposes.
              </li>
              <li>
                Fulfill |promise|.
              </li>
            </ol>
            <div class="note">
              The mechanism used to monitor <a>remote playback devices</a>
              availability and determine the compatibility of a <a>remote
              playback device</a> with the selected <a>availability sources
              set</a> is left to the user agent.
            </div>
          </section>
        </section>
        <section data-link-for="RemotePlayback">
          <h4>
            Prompt user for changing remote playback state
          </h4>
          <p>
            When the <dfn data-dfn-for="RemotePlayback">prompt()</dfn> method is
            called, the user agent MUST run the following steps:
          </p>
          <dl>
            <dt>
              Input
            </dt>
            <dd>
              None, but the algorithm references the <a>media element</a>, its
              <a data-lt="RemotePlayback">remote</a> property and its
              <a>availability sources set</a>.
            </dd>
            <dt>
              Output
            </dt>
            <dd>
              A {{Promise}}.
            </dd>
          </dl>
          <ol>
            <li>
              Let |promise:Promise| be a new {{Promise}}.
            </li>
            <li>
              Return |promise| and continue running these steps
              <a>in parallel</a>.
            </li>
            <li>
              If the <a data-link-for=
              "HTMLMediaElement">disableRemotePlayback</a> attribute is present
              for the <a>media element</a>, reject the |promise| with
              {{InvalidStateError}} and abort all the remaining steps.
            </li>
            <li>
              If there is already an unsettled promise from a previous call to
              {{RemotePlayback/prompt()}} for the same <a>media element</a> or
              even for the same <a>browsing context</a>, the user agent MAY reject
              |promise| with an {{OperationError}} exception and abort all
              remaining steps.
              <div class="note">
                The rationale here is that the user agent might show a dialog
                that's modal to either the <a>media element</a> or the
                <a>browsing context</a>. In such a case, the second call to
                {{RemotePlayback/prompt()}} would not be able to show any UI.
              </div>
            </li>
            <li>
              If the document's [=navigable/active window=] does not have
              [=transient activation=], reject |promise| with an
              {{InvalidAccessError}} exception and abort these steps.
            </li>
            <li>
              OPTIONALLY, if the user agent knows a priori that remote playback
              of this particular <a>media element</a> is not feasible (independent
              of the current <a>`state`</a> or the <a>list of available remote
              playback devices</a>), reject |promise| with a {{NotSupportedError}}
              and abort all remaining steps.
              <div class="note">
                An example of this situation is when the user agent only
                supports <a>media flinging</a>, and the media element's source
                is not a {{URL}} that can be passed to a
                <a>remote playback device</a>.
              </div>
            </li>
            <li>
              If the user agent needs to show the <a>list of available remote
              playback devices</a> and is not <a data-lt= "monitor the list of
              available remote playback devices">monitoring the list of
              available remote playback devices</a>, run the steps to
              <a>monitor the list of available remote playback devices</a> <a>in
              parallel</a>.
            </li>
            <li>
              If remote playback is <a>unavailable</a> and will remain so
              before the request for user permission is complete,
              reject |promise| with a {{NotFoundError}} exception and
              abort all remaining steps.
            </li>
            <li>
              Request user permission to <dfn>change remote playback
              state</dfn>.
              <div class="note">
                An example UI to request permission would allow the user to
                pick a new <a>remote playback device</a>, switch between local
                or remote playback devices, or <a>disconnect from a remote
                playback device</a>.
              </div>
              <div class="note">
                The user may have already selected a <a>remote playback
                device</a> for a related purpose, for example, to mirror the
                contents of the display or the current page. In that case, the
                user agent may choose to skip the UI to select a device and
                proceed immediately to the next step.
              </div>
            </li>
            <li>
              If the user picked a <a>remote playback device</a> |device:remote
              playback device| to <dfn>initiate remote playback</dfn> with, the
              user agent MUST run the following steps:
              <ol>
                <li>
                  Set the <a>state</a> of the |remote:RemotePlayback| object
                  to <a data-link-for="RemotePlaybackState">connecting</a>.
                </li>
                <li>
                  Fulfill |promise|.
                </li>
                <li>
                  <a>Queue a task</a> to <a>fire an event</a> named
                  <a>connecting</a> at the <a data-lt=
                  "RemotePlayback">remote</a> property of the <a>media
                  element</a>. The event must not bubble, must not be
                  cancelable, and has no default action.
                </li>
                <li>
                  <a>Establish a connection with the remote playback device</a>
                  |device| for the <a>media element</a>.
                </li>
              </ol>
              <p class="note">
                By picking a <a>remote playback device</a> the user <em>grants
                permission</em> to use the device.
              </p>
            </li>
            <li>
              Otherwise, if the user chose to disconnect from the <a>remote
              playback device</a> |device|, the user agent MUST run the
              following steps:
              <ol>
                <li>
                  Fulfill |promise|.
                </li>
                <li>
                  Run the <a>disconnect from a remote playback device</a>
                  algorithm for the |device|.
                </li>
              </ol>
            </li>
            <li>
              Otherwise, the user is considered to <em>deny permission</em> to
              use the device, so reject |promise| with {{NotAllowedError}}
              exception and hide the UI shown by the user agent.
            </li>
          </ol>
          <div class="note">
            The details of implementing the UI and device selection are left to
            the user agent; for example it can show the user a dialog and allow
            the user to select an available device (<em>granting
            permission</em>), or cancel the selection (<em>denying
            permission</em>). In most cases, available devices will advertise
            a user friendly name along with locale and text direction
            information for that name. The user agent is encouraged to render
            this user friendly name, using its locale and text direction when
            they are known.
          </div>
        </section>
        <section>
          <h4>
            The <dfn data-dfn-for="RemotePlayback">state</dfn> attribute
          </h4>
          <p>
            The {{RemotePlayback/state}} attribute represents the
            {{RemotePlayback}} connection's current state. It can take one of
            the values of {{RemotePlaybackState}} depending on the connection
            state:
          </p>
          <ul>
            <li>
              <dfn data-dfn-for="RemotePlaybackState">connecting</dfn> means
              that the user agent is attempting to <a>initiate remote
              playback</a> with the selected <a>remote playback device</a>. This
              is the initial state when the `promise` returned by
              {{RemotePlayback/prompt()}} is fulfilled. The local playback of
              the media element continues in this state and media commands still
              take effect on the <a>local playback state</a>.
            </li>
            <li>
              <dfn data-dfn-for="RemotePlaybackState">connected</dfn> means that
              the transition from local to remote playback has finished and all
              media commands now take effect on the <a>remote playback
              state</a>.
            </li>
            <li>
              <dfn data-dfn-for="RemotePlaybackState">disconnected</dfn> means
              that the remote playback has not been <a data-lt="initiate remote
              playback">initiated</a>, has failed to initiate or has been
              stopped. All media commands will take effect on the <a>local
              playback state</a>. The remote playback can be initiated through a
              call to {{RemotePlayback/prompt()}}.
            </li>
          </ul>
        </section>
        <section data-link-for="RemotePlayback">
          <h4>
            Establishing a connection with a remote playback device
          </h4>
          <p>
            When the user agent is to <dfn>establish a connection with
            the remote playback device</dfn>, it MUST run the following steps:
          </p>
          <dl>
            <dt>
              Input
            </dt>
            <dd>
              |remote:RemotePlayback|, the {{RemotePlayback}} object that is to be
              connected.
            </dd>
            <dd>
              |device:remote playback device|, the <a>remote playback device</a> to
              connect to.
            </dd>
          </dl>
          <ol>
            <li>
              If the {{RemotePlayback/state}} of |remote| is not equal
              to {{RemotePlaybackState/"connecting"}}, abort all the remaining
              steps.
            </li>
            <li>
              Request connection of |remote| to |device|.  The implementation of
              this step is specific to the user agent.
            </li>
            <li>
              If connection completes successfully, <a>queue a task</a> to
              run the following steps:
              <ol>
               <li>
                 Set the {{RemotePlayback/state}} of |remote| to
                 {{RemotePlaybackState/"connected"}}.
                </li>
                <li>
                  <a>Fire an event</a> named <a>connect</a> at |remote|.
                </li>
               <li>
                 Synchronize the current <a>media element state</a> with the
                 <a>remote playback state</a>. The implementation of this step
                 is specific to the user agent.
                </li>
              </ol>
            </li>
            <li>
              If connection fails, <a>queue a task</a> to run the following
              steps:
              <ol>
                <li>
                  Set the <a data-lt="state">remote playback state</a> of
                  |remote| to {{RemotePlaybackState/"disconnected"}}.
                </li>
                <li>
                  <a>Fire an event</a> named {{RemotePlayback/disconnect}} at |remote|.
                </li>
              </ol>
            </li>
          </ol>
          <p>
            The user agent SHOULD pause local audio and video output of the
            media element while the <a>remote playback state</a> is
            {{RemotePlaybackState/"connected"}}.
          </p>
          <p>
            If the user agent
            is <a data-cite="HTML#expose-a-user-interface-to-the-user"> exposing
            a user interface to the user</a> for the media element (i.e., using
            default controls), the user agent SHOULD convey the fact that
            the <a>remote playback state</a> is
            {{RemotePlaybackState/"connected"}} through an icon or other means.
          </p>
          <div class="note">
            The mechanisms that are used to connect the user agent with the
            <a>remote playback device</a>, select the <a>remote playback
            source</a>, and initiate playback are all implementation choices of
            the user agent. The connection will likely have to provide a two-way
            messaging abstraction capable of carrying media commands to the
            remote playback device and receiving media playback state in order
            to keep the <a>media element state</a> and <a>remote playback
            state</a> in sync (unless <a>media mirroring</a> is used).
          </div>
          <div class="note">
            The user agent is encouraged to pass locale and text direction
            information to the <a>remote playback device</a> when possible, so
            that the <a>remote playback device</a> can adjust its user interface
            and operational functions to locale-specific attributes that reflect
            the user's preferences. For example, the <a>remote playback
            device</a> can use that information to choose the same default text
            track as the user agent, as well as to set the HTTP
            `Accept-Language` header it sends to fetch media resources.
          </div>
          <div class="note">
            The user agent should not render output from the media element while
            it is in a {{RemotePlaybackState/"connected"}} state and its content
            is being rendered on a <a>remote playback device</a>.
          </div>
        </section>
        <section data-link-for="RemotePlayback">
          <h4>
            Browser initiated remote playback
          </h4>
          <p>
            A user agent MAY support <a data-lt=
            "establish a connection with the remote playback device">connecting
            to a remote playback device</a> from the browser. This can be done by
            adding appropriate media controls to <a data-cite=
            "HTML#expose-a-user-interface-to-the-user">the user interface that is
            exposed to the user</a>, or when the user activates system-wide
            mirroring of the display.  This feature is known as <dfn>browser
            initiated remote playback</dfn>. A user agent that supports
            <a>browser initiated remote playback</a> SHOULD initiate the remote
            playback only when the user has expressed an intention to do so via
            a user gesture, for example by clicking a button in the browser.
          </p>
          <p>
            If the user agent supports <a>browser initiated remote playback</a>,
            the <a>state</a> attribute MUST reflect the current state of the
            connection to the <a>remote playback device</a>.  When the browser
            initiates or terminates remote playback, it MUST fire the corresponding
            events by following the algorithms to <a>establish a connection
            with the remote playback device</a> and
            <a>disconnect from a remote playback device</a>.
          </p>
          <p>
            If the <a data-lt="browser initiated remote playback">browser will
            initiate remote playback</a> on a newly created media element, it
            SHOULD initialize the value of its <a>state</a> attribute to
            {{RemotePlaybackState/"connecting"}} and then follow the steps
            to <a>establish a connection with the remote playback device</a>.
          </p>
          <div class="note">
            A user agent that implements browser initiated remote playback
            should consider how it interacts with other browser policies that
            affect media playback, such as which <a>media elements</a>
            are <a data-cite="HTML#allowed-to-play">allowed to play</a>
            and background media playback optimizations.
          </div>
        </section>
        <section>
          <h4>
            Media commands and media playback state
          </h4>
          <p>
            The {{HTMLMediaElement}} interface interacts with the remotely
            played media as soon as the connection with the <a>remote playback
            device</a> is established.
          </p>
          <p>
            When the {{RemotePlayback/state}} of a {{RemotePlayback}} object is
            {{RemotePlaybackState/"connected"}}, the following conditions relate
            the <a>local playback state</a>, the <a>media element state</a>, and
            the <a>remote playback state</a>:
          </p>
          <ul>
            <li>
              The user agent MUST send all media commands issued on the
              associated {{HTMLMediaElement}} object to the <a>remote playback
              device</a> in order to change its <a>remote playback state</a>;
            </li>
            <li>
              The <a>remote playback device</a> SHOULD implement all media
              commands sent by the user agent;
            </li>
            <li>
              The <a>remote playback device</a> SHOULD send updates of
              the <a>remote playback state</a> to the user agent that
              affect any attribute exposed through the <a>media element
              state</a>;
            <li>
              The user agent MUST process all updates of the
              <a>remote playback state</a> received from the <a>remote playback
              device</a> and update the <a>local playback state</a> of the
              media element accordingly.
            </li>
          </ul>
          <p>
            If sending any command fails, the user agent MAY
            <a>disconnect from a remote playback device</a>.
          </p>
          <div class="note">
            <p>
              The <a>remote playback device</a> can implement a subset
              of the capabilities of the playback engine of the user
              agent, and some {{HTMLMediaElement}} APIs do not always
              make sense to use during remote playback. In this case, the
              <a>local playback state</a> is expected to reflect as closely
              as possible the actual <a>remote playback state</a> after a
              media command that is not supported during remote playback.
            </p>
            <p>
              For example, after calling {{HTMLMediaElement/fastSeek()}}
              while connected to a <a>remote playback device</a> that does not
              support it, the {{HTMLMediaElement/seeking}} attribute of the
              {{HTMLMediaElement}} is expected to remain `false` and no
              <a data-cite="HTML#event-media-seeking">`seeking`</a> event is to be fired.
            </p>
          </div>
        </section>
        <section>
          <h4>
            Disconnecting from a remote playback device
          </h4>
          <p>
            When the user agent is to <dfn>disconnect from a remote
            playback device</dfn>, it MUST do the following:
          </p>
          <dl>
            <dt>
              Input
            </dt>
            <dd>
              |remote:RemotePlayback|, the {{RemotePlayback}} object
              representing the playback to be stopped.
            </dd>
            <dd>
              |device:remote playback device|, the <a>remote playback device</a>
              to disconnect from.
            </dd>
          </dl>
          <ol>
            <li>
              If the <a data-link-for="RemotePlayback">`state`</a>
              of |remote| is `disconnected`, abort all remaining steps.
            </li>
            <li>
              <a>Queue a task</a> to run the following steps:
              <ol>
                <li>
                  Request disconnection of |remote| from |device|. The
                  implementation of this step is specific to the user agent.
                </li>
                <li>
                  Change the |remote|'s `state` to `disconnected`.
                </li>
                <li>
                  <a>Fire an event</a> named {{RemotePlayback/disconnect}} at |remote|.
                </li>
                <li>
                  Synchronize the current <a>media element state</a> with the
                  <a>local playback state</a>. The implementation of this step
                  is specific to the user agent.
                </li>
              </ol>
            </li>
          </ol>
          <p>
            If the remote playback device is abruptly disconnected during
            playback (for example, by power loss or a network disconnection),
            the user agent SHOULD run the steps to <a>monitor the list of
            available remote playback devices</a> before the steps to
            <a>disconnect from a remote playback device</a>.  This allows
            callbacks in the <a>set of availability callbacks</a> to be invoked
            before the {{RemotePlayback/disconnect}} event is fired, so the page can update
            itself to show resumption of playback is not possible.
          </p>
          <div class="note">
            The remote playback device might not actually stop playback of the
            media when requested by the user agent; it depends on the
            implementation of the user agent and the remote playback device.
            In this case, stopping remote playback means that the user agent
            merely disconnects from the remote playback device and the
            <a>media element</a> switches to the `disconnected` state.
          </div>
        </section>
        <section>
          <h4>
            Event Handlers
          </h4>
          <p>
            The following are the <a>event handlers</a> (and their corresponding
            <a>event handler event types</a>) that must be supported, as
            <a>event handler</a> IDL attributes, by objects implementing the
            {{RemotePlayback}} interface:
          </p>
          <table data-dfn-for="RemotePlayback">
            <thead>
              <tr>
                <th>
                  Event handler
                </th>
                <th>
                  Event handler event type
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <dfn>`onconnecting`</dfn>
                </td>
                <td>
                  <dfn data-dfn-type="event">`connecting`</dfn>
                </td>
              </tr>
              <tr>
                <td>
                  <dfn>`onconnect`</dfn>
                </td>
                <td>
                  <dfn data-dfn-type="event">`connect`</dfn>
                </td>
              </tr>
              <tr>
                <td>
                  <dfn>`ondisconnect`</dfn>
                </td>
                <td>
                  <dfn data-dfn-type="event">`disconnect`</dfn>
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </section>
      <section data-dfn-for="HTMLMediaElement">
        <h3>
          Extensions to {{HTMLMediaElement}}
        </h3>
        <pre class='idl'>
          partial interface HTMLMediaElement {
            [SameObject] readonly attribute RemotePlayback remote;

            [CEReactions] attribute boolean disableRemotePlayback;
          };
        </pre>
        <p>
          The <dfn>remote</dfn> attribute MUST
          return the {{RemotePlayback}} instance associated with the
          <a>media element</a>.
        </p>
        <section data-link-for="HTMLMediaElement">
          <h4>
            The <dfn>`disableRemotePlayback`</dfn> attribute
          </h4>
          <p>
            Some pages may wish to <a>disable remote playback</a> of a media
            element; for example, they may prefer to use a <a data-cite=
            "PRESENTATION-API#interface-presentationrequest">`PresentationRequest`</a>
            to present a complete document on a presentation screen. To support
            this use case, a new `disableRemotePlayback` attribute is added to
            the list of content attributes for `audio` and `video` elements.
          </p>
          <p>
            A corresponding <a>disableRemotePlayback</a> IDL attribute which
            reflects the value of each element's `disableRemotePlayback`
            content attribute is added to the `HTMLMediaElement` interface.
            The <a>disableRemotePlayback</a> IDL attribute MUST
            <a data-cite="HTML#reflecting-content-attributes-in-idl-attributes">
            reflect</a> the content attribute of the same name.
          </p>
        </section>
        <section data-link-for='HTMLMediaElement'>
          <h4>
            Disabling remote playback
          </h4>
          <p>
            If the <a>disableRemotePlayback</a> attribute is present
            on the <a>media element</a>, the user agent MUST NOT play
            the media element remotely or present any UI to do so.
          </p>
          <p>
            When the <a>disableRemotePlayback</a> attribute is added to
            the <a>media element</a>, the user agent MUST run the steps
            to <dfn>disable remote playback</dfn>:
          </p>
          <ol>
            <li>Reject any pending promises returned by the
            {{RemotePlayback}} methods with {{InvalidStateError}}.
            </li>
            <li>Clear the <a>set of availability callbacks</a> for the media
            element.
            </li>
            <li>If its <a data-link-for="RemotePlayback">state</a> is not
            `disconnected`, run the <a>disconnect from a remote
            playback device</a> algorithm for the <a>remote playback device</a>
            the media element is connected or connecting to.
            </li>
          </ol>
        </section>
      </section>
    </section>
    <section class="informative">
      <h2>
        Security and privacy considerations
      </h2>
      <section>
        <h3>
          Personally identifiable information
        </h3>
        <p>
          Firing the `callback` provided via the
          {{RemotePlayback/watchAvailability()}} method reveals one bit of
          information about the presence (or non-presence) of a
          <a>remote playback device</a> typically discovered through the local
          area network. This could be used in conjunction with other
          information for fingerprinting the user. However, this information is
          also dependent on the user's local network context, so the risk is
          minimized.  Also, by design, the human readable name of a <a>remote
          playback device</a> is not revealed to the page.
        </p>
        <p>
          The API enables <a data-lt="monitor the list of available remote
          playback devices">monitoring the list of available remote playback
          devices</a>. How the user agent determines the compatibility and
          availability of a <a>remote playback device</a> with a <a>media
          element</a>'s <a data-cite="HTML#media-resource">resource</a>
          is an implementation detail. If a user agent matches a
          <a data-cite="HTML#media-resource">media resource</a>
          to a particular type of device to determine its availability,
          this feature can be used to probe information about which
          <a>remote playback device</a> the user has without user consent.
        </p>
        <p>
          The user agent should not <a>monitor the list of available remote
          playback devices</a> if the user disables background monitoring
          through a browser setting.
        </p>
      </section>
      <section>
        <h3>
          User interface guidelines
        </h3>
        <dl>
          <dt>
            Origin display
          </dt>
          <dd>
            <p>
              When the user is asked permission to use a <a>remote playback
              device</a> during the steps to <a>change remote playback
              state</a>, the user agent should make it clear what origin the
              request is coming from.
            </p>
            <p>
              Display of the origin requesting remote playback will help the
              user understand what content is making the request, especially
              when the request is initiated from a [=child navigable=]. For
              example, embedded content may try to convince the user to click to
              trigger a request to start an unwanted remote playback.
            </p>
            <p>
              Showing the origin that will be presented will help the user know
              if that content is from a <a>potentially trustworthy origin</a>
              (e.g., `https:`), and corresponds to a known or expected site.
            </p>
          </dd>
        </dl>
      </section>
      <section>
        <h3>
          Device Access
        </h3>
        <p>
          The Remote Playback API abstracts away what "local" means for
          displays, meaning that it exposes network-accessible displays as
          though they were local displays. The Remote Playback API requires
          user permission for a page to access any display to mitigate issues
          that could arise, such as showing unwanted content on a display
          viewable by others.
        </p>
      </section>
      <section>
        <h3>
          Messaging between the local and remote playback devices
        </h3>
        <p>
          This specification will not mandate communication protocols between
          the <a>local playback device</a> and the <a>remote playback
          device</a>, but the user agent should set some guarantees of message
          confidentiality and authenticity between them.
        </p>
      </section>
      <section>
        <h3>
          Secure Contexts
        </h3>
        <p>
          The Remote Playback API is not limited to [[SECURE-CONTEXTS]] because
          it exposes a feature to web applications that user agents usually
          offer natively on all media regardless of the <a>browsing context</a>.
          A user agent can limit the API to [[SECURE-CONTEXTS]] by always
          returning an empty list as part of the <a>monitor the list of
          available remote playback devices</a> algorithm in contexts that are
	  not secure.
        </p>
      </section>
    </section>
    <section class="appendix">
      <h2>
        Candidate Recommendation exit criteria
      </h2>
      <p>
        For this specification to be advanced to Proposed Recommendation, there
        must be at least two independent, interoperable implementations of each
        feature. Each feature may be implemented by a different set of
        products, there is no requirement that all features be implemented by a
        single product. Additionally, implementations must demonstrate support
        for the <a>media remoting</a> and <a>media flinging</a> cases, either
        within the same product or within different products.
      </p>
      <p>
        For the purposes of these criteria, we define the following terms:
      </p>
      <dl>
        <dt>
          Independent
        </dt>
        <dd>
          Each implementation must be developed by a different party, and
          cannot share, reuse, or derive from code used by another qualifying
          implementation. Sections of code that have no bearing on the
          implementation of this specification are exempt from this
          requirement.
        </dd>
        <dt>
          Interoperable
        </dt>
        <dd>
          Passing the respective test case(s) in the official test suite.
        </dd>
        <dt>
          Implementation
        </dt>
        <dd>
          A user agent which:
          <ol>
            <li>implements the specification.
            </li>
            <li>is available to the general public. The implementation may be a
            shipping product or other publicly available version (i.e., beta
            version, preview release, or "nightly build"). Non-shipping product
            releases must have implemented the feature(s) for a period of at
            least one month in order to demonstrate stability.
            </li>
            <li>is not experimental (i.e. a version specifically designed to
            pass the test suite and not intended for normal usage going
            forward).
            </li>
          </ol>
        </dd>
      </dl>
    </section>
  </body>
</html>