index.html 56.9 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MediaStream Processing API</title>

  <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD" type="text/css" />
  <style type="text/css">

    @media screen {  /* hide from IE3 */
    a[href]:hover { background: #ffa }
    }

    pre { margin-left: 2em }
    dt, dd { margin-top: 0; margin-bottom: 0 } /* opera 3.50 */
    dt { font-weight: bold }

    pre, code {
      font-family: monospace;
      overflow: auto;
      margin: 0;
    }
    pre > code {
      display: block;
      padding: 1em;
      border: 1px solid black;
      background: #ddd;
      margin: 0.5em 2em;
      margin-bottom: 1em;
      font-size: 120%;
    }
    code var { color: #f44; }

    .note {
      margin: 1em;
      padding: 1em;
      background: yellow;
    }

    .XXX {
      margin: 1em;
      padding: 1em;
      background: pink;
    }
    .XXX:before {
      content: "XXX "
    }

    .todo {
      margin: 1em;
      padding: 1em;
      background: cyan;
    }
    .todo:before {
      content: "TODO: "
    }

    .example {
      margin: 1em;
      padding: 1em;
      background: lime;
    }

    ul.toc, ol.toc {
      list-style: disc;		/* Mac NS has problem with 'none' */
      list-style: none;
    }

  </style>

</head>

  <body>

    <div class="head">
      <p></p>
        <a href="http://www.w3.org/"><img width="72" height="48" alt="W3C" src="http://www.w3.org/Icons/w3c_home" /></a>
      <p></p>
      <h1 id="title" class="title">
        MediaStream Processing API
      </h1>
      <h2 id="w3c-fpwd-15-december-2011">
        <acronym title="World Wide Web Consortium">W3C</acronym> Working Draft 15 December 2011
      </h2>
      <dl>
        <dt>
          This version:
        </dt>
        <dd>
          <a href="http://www.w3.org/TR/2011/WD-streamproc-20111215/">http://www.w3.org/TR/2011/WD-streamproc-20111215/</a>
        </dd>
        <dt>
          Latest published version:
        </dt>
        <dd>
          <a href="http://www.w3.org/TR/streamproc/">http://www.w3.org/TR/streamproc/</a>
        </dd>
        <dt>
          Latest editor's draft:
        </dt>
        <dd>
          <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/streams/StreamProcessing.html">
            hhttps://dvcs.w3.org/hg/audio/raw-file/tip/streams/StreamProcessing.html</a>
        </dd>
        <dt>
          Previous version:
        </dt>
        <dd>
          none
        </dd>
      </dl>

      <dl>
        <dt>Public Comments:</dt>
        <dd>
          <a href="mailto:public-audio@w3.org">public-audio@w3.org</a>
        </dd>
        <dt>Working Group:</dt>

        <dd>
          <a href="http://www.w3.org/2011/audio/">Audio WG</a>
        </dd>
      </dl>

      <dl>
        <dt>
          Editor:
        </dt>
        <dd>Robert O'Callahan, Mozilla Corporation &lt;robert@ocallahan.org&gt;</dd>
      </dl>
      <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
      <hr />
    </div>


    <div id="abstract" class="introductory section"><h2>Abstract</h2>
      <p>A number of existing or proposed features for the Web platform deal with continuous real-time media:</p>
      <ul>
        <li>HTML media elements</li>
        <li>Synchronization of multiple HTML media elements (e.g. proposed HTML MediaController)</li>
        <li>Capture and recording of local audio and video input (e.g. proposed HTML Streams)</li>
        <li>Peer-to-peer streaming of audio and video streams (e.g. proposed WebRTC and HTML Streams) </li>
        <li>Advanced audio APIs that allow complex mixing and effects processing (e.g. Mozilla's AudioData, Chrome's AudioNode)</li>
      </ul>
      Many use-cases require these features to work together. This proposal makes HTML Streams the foundation for integrated Web media processing by creating a mixing and effects processing API for HTML Streams.
    </div>


    <div id="sotd">
      <h2>Status of This Document</h2>

      <p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <acronym title="World Wide Web Consortium">W3C</acronym> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><acronym title="World Wide Web Consortium">W3C</acronym> technical reports index</a> at http://www.w3.org/TR/.</em></p>

      	  <p>This specification defines a proposal for an audio processing and synthesis API for use in client-side user agents (e.g. a browser).  This document is accompanied by an alternative proposal, the Web Audio API, and an umbrella document outlining the relationship between these proposals</p>	<p></p>

          <p>This document was published by the <a href="http://www.w3.org/2011/audio/">Audio Working Group</a> as a First Public Working Draft. This document is intended to become a <acronym title="World Wide Web Consortium">W3C</acronym> Recommendation. If you wish to make comments regarding this document, please send them to <a href="mailto:public-audio@w3.org">public-audio@w3.org</a> (<a href="mailto:public-audio-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-audio/">archives</a>). All feedback is welcome.</p>

          <p>Web content and browser developers especially are encouraged to review this draft, and to experiment with the API and provide feedback.</p> <p></p>

          <p>Publication as a Working Draft does not imply endorsement by the <acronym title="World Wide Web Consortium">W3C</acronym> Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>. <acronym title="World Wide Web Consortium">W3C</acronym> maintains a <a href="http://www.w3.org/2004/01/pp-impl/46884/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>.</p>
    </div>


<h2 id="table_of_contents">Table of Contents</h2>

<ol id="toc">
  <li><a href="#introduction">1. Introduction</a>
    <ol>
      <li><a href="#scenarios">1.1. Scenarios</a></li>
    </ol>
  </li>
  <li><a href="#mediastreams">2. MediaStreams</a>
    <ol>
      <li><a href="#scenarios">2.1. The Semantics Of MediaStreams</a></li>
      <li><a href="#media-formats">2.2. Media Formats</a></li>
      <li><a href="#mediastream-extensions">2.3. MediaStream Extensions</a></li>
    </ol>
  </li>
  <li><a href="#media-elements">3. Media Elements</a>
    <ol>
      <li><a href="#media-element-extensions">3.1. Media Element Extensions</a></li>
      <li><a href="#audio-element-extensions">3.2. Audio Element Extensions</a></li>
    </ol>
  </li>
  <li><a href="#stream-mixing-and-processing">4. Stream Mixing And Processing</a>
    <ol>
      <li><a href="#time-varying-attributes">4.1. Time-varying Attributes</a></li>
      <li><a href="#processedmediastream">4.2. ProcessedMediaStream</a></li>
      <li><a href="#mediainput">4.3. MediaInput</a></li>
      <li><a href="#worker-processing">4.4. Worker Processing</a></li>
    </ol>
  </li>
  <li><a href="#built-in-processing-engines">5. Built-In Processing Engines</a>
    <ol>
      <li><a href="#default-processing-engine">5.1. Default Processing Engine</a></li>
      <li><a href="#lastinput-processing-engine">5.2. "LastInput" Processing Engine</a></li>
    </ol>
  </li>
  <li><a href="#media-graph-considerations">6. Media Graph Considerations</a></li>
  <li><a href="#canvas-recording">7. Canvas Recording</a></li>
  <li><a href="#implementation-considerations">8. Implementation Considerations</a></li>
  <li><a href="#examples">9. Examples</a></li>
</ol>

<h2 id="introduction">1. Introduction</h2>

<p>The ideas here build on <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/">Ian Hickson's proposal for HTML Streams</a>, adding features partly inspired by <a href="https://wiki.mozilla.org/Audio_Data_API"> the Mozilla audio API</a> and <a href="http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html">the Chrome audio API</a>. Unlike previous audio API proposals, the API presented here integrates with proposed API for media capture from local devices, integrates with proposed API for peer-to-peer media streaming, handles audio and video in a unified framework, incorporates Worker-based Javascript audio processing, and specifies synchronization across multiple media sources and effects. The API presented here does not include a library of "native" effects; those should be added as new "named effects" (described below), perhaps as a "level 2" spec.</p>

<p>The work here is nascent. Until a prototype implementation exists, this proposal is likely to be incomplete and possibly not even implementable.</p>

<h3 id="scenarios">1.1. Scenarios</h3>

<p>These are concrete usage scenarios that have helped guide the design of the API. They are higher-level than use-cases.</p>

<ol>
<li>Play video with processing effect applied to the audio track (e.g. high-pass filter)</li>
<li>Play video with processing effects mixing in out-of-band audio tracks (in sync) (e.g. mixing in an audio commentary with audio ducking)</li>
<li>Capture microphone input and stream it out to a peer with a processing effect applied to the audio (e.g. XBox 360 chat with voice distortion)</li>
<li>Capture microphone input and visualize it as it is being streamed out to a peer and recorded (e.g. Internet radio broadcast)</li>
<li>Capture microphone input, visualize it, mix in another audio track and stream the result to a peer and record (e.g. Internet radio broadcast)</li>
<li>Receive audio streams from peers, mix them with spatialization effects, and play (e.g. live chat with spatial feature)</li>
<li>Seamlessly chain from the end of one input stream to another (e.g. playlists, audio/video editing)</li>
<li>Seamlessly switch from one input stream to another (e.g. adaptive streaming)</li>
<li>Synthesize samples from JS data (e.g. game emulators or MIDI synthesizer)</li>
<li>Trigger a sound sample to be played through the effects graph ASAP but without causing any blocking (e.g. game sound effects)</li>
<li>Trigger a sound sample to be played through the effects graph at a given time (e.g. game sound effects)</li>
<li>Capture video from a camera and analyze it (e.g. face recognition)</li>
<li>Capture video and audio, record it to a file and upload the file (e.g. Youtube upload)</li>
<li>Capture video from a canvas element, record it and upload (e.g. Screencast/"Webcast", or composite multiple video sources with effects into a single canvas then record)</li>
</ol>

<h2 id="mediastreams">2. MediaStreams</h2>

<h3 id="the-semantics-of-mediastreams">2.1. The Semantics Of MediaStreams</h3>

<p>The description of MediaStreams here extends and must remain compatible with</p>
<a href="http://www.whatwg.org/specs/web-apps/current-work/complete/">HTML MediaStreams</a>.

<p>Each MediaStream DOM object has an underlying media stream. The underlying media streams form a graph;</p>
some streams (represented by ProcessedMediaStream DOM objects) can take other streams as inputs and compute an output
stream.

<p>To avoid interruptions due to script execution, script execution can overlap with media stream processing;</p>
media streams continue to play and change state during script execution. However, to simplify the DOM programming model,
we limit the interaction of MediaStream DOM objects with their underlying media streams. Specifically:
<ul>
<li>Changes to the MediaStream and MediaInput DOM objects are batched together between <em>stable states</em> (as defined by the HTML spec, while script is not running), and propagate as an atomic change to the media stream graph to take effect
after some delay.
This ensures that incomplete changes to the media stream graph during script execution do not result in transient glitches in the output, and that scripted graph changes do not interfere with concurrent media processing.
<div class="example">Thus the following script would never cause an interruption in audio output, since no stable state occurs between the two volume changes:
<pre><code>  stream.inputs[0].volume = 0;
  if (needToPlay()) {
    stream.inputs[0].volume = 1.0;
  }</code></pre>
</div>

<p class="todo">Specify exactly which attributes (and methods) are subject to this regime, possibly extending to
attributes and methods already defined in HTML for media elements etc.
</p>
</li>
<li>State changes from the media stream graph are only propagated back to the MediaStream DOM objects during a <em>stable state</em>. This ensures that between stable states (usually, during the execution of a script event handler), MediaStream DOM APIs always reflect a consistent snapshot of the state of the media stream graph.</li>
</ul>
<p>In this spec, references to <code>MediaStream</code>s and <code>MediaInput</code>s refer to the DOM-visible state, and references to <em>media streams</em> and <em>input ports</em> refer to the underlying real-time media stream graph.</p>

<p>A stream is an abstraction of a time-varying video and/or audio signal. At a given point in time, a media stream can be <em>blocked</em>, that is, not playing for some reason. All non-blocked streams play at the same constant rate --- real time. Streams cannot be seeked or played at a rate other than real time. For convenience we define a stream's "current time" as the duration it has played since it was created, but (unless blocking is involved) streams do not have independent timelines; they are synchronized.</p>

<p>At the implementation level, and when processing media data with Workers, we assume that each stream has a buffered window of media data available, containing the sample it is currently playing (or that it will play the next time it unblocks). This buffer defines the stream's contents into the future.</p>

<p>A stream can be in the <em>finished</em> state. A finished stream is always blocked and can</p>
never leave the finished state --- it will never produce any more content.

<p>A stream that has no consumers must block. Stream consumers defined in this specification are media elements and <code>ProcessedMediaStream</code>s (see below). This avoids situations where streams that aren't connected</p>
to anything and could be garbage-collected have to be kept running because their stopping could possibly be observed (e.g. because a Worker is being used to generate data for the stream and the Worker can observe whether the <code>ProcessMediaEvent</code> is being sent). A muted audio element can be used as a dummy sink if necessary.

<div class="note">
<p>We do not allow streams to have independent timelines (e.g. no adjustable playback</p>
rate or seeking within an arbitrary stream), because that can lead to a single stream being
consumed at multiple different "current times" simultaneously, which requires either unbounded buffering
or multiple internal decoders and buffers for a single stream. It seems simpler and more
predictable for performance to require authors to create multiple streams (if necessary) and change
the playback rate in the original stream sources to handle such situations.
<p>For example, consider this hard case:</p>
<ul>
<li>Three media element input streams: http://slow, http://fast, and http://fast2</li>
<li>http://slow is mixed with http://fast</li>
<li>http://fast is mixed with http://fast2</li>
</ul>
Does the http://fast stream have to provide data at two different offsets? This spec's answer is no.
This leads us to the conclusion that if a stream feeds into a blocked mixer, then it itself must be
blocked. Since obviously a mixer with a blocked input must also be blocked, the entire graph of
connected streams block as a unit. This means that the mixing of http://fast and http://fast2 will
be blocked by delays in http://slow in the above scenario.
<p>Authors can avoid this by explicitly splitting streams that may need to progress at</p>
different rates --- in the above case, by using two separate media elements each loading
http://fast. The HTML spec encourages implementations to share cached media data between
media elements loading the same URI.
</div>

<p>A media stream contains video and audio tracks. Tracks can start and end at any time. Each track</p>
contains a stream of audio or video data.

<h3 id="media-formats">2.2 Media Formats</h3>

<p>This spec mostly treats the formats used for stream audio and video data</p>
as an implementation detail. In particular, whether stream buffers are compressed or uncompressed, what compression
formats might be used, or what uncompressed formats might be used (e.g. audio sample rates, channels, and sample
representation)
are not specified, and are not directly observable. An implementation might even support changing formats over
time within a single stream. Media data is implicitly resampled as necessary, e.g. when mixing streams with different formats. Non-normative suggestions for resampling algorithms will be provided in section 7.

<p>Built-in audio processing filters guarantee that if all the audio inputs constantly have the same uncompressed format</p>
(same audio sample rate and channel configuration), the audio output will have the same format and there will be no unnecessary resampling.

<p>When samples are exposed to a Worker for processing, the user-agent chooses a fixed uncompressed audio format (sample rate and channel configuration) for its inputs and outputs; see section 4.4.</p>

<p class="todo">However, suggested resampling algorithms will be provided in an appendix.

</p><h3 id="mediastream-extensions">2.3 MediaStream Extensions</h3>

<pre><code>partial interface MediaStream {
  readonly attribute double currentTime;

  ProcessedMediaStream createProcessor(optional in DOMString namedEffect);
  ProcessedMediaStream createWorkerProcessor(in Worker worker);
};</code></pre>

<p>The <code>currentTime</code> attribute returns the amount of time that this <code>MediaStream</code> has played since it was created.</p>

<p>The <code>createProcessor(namedEffect)</code> method returns a new <code>ProcessedMediaStream</code> with this <code>MediaStream</code> as its sole input.</p>
The <code>ProcessedMediaStream</code> is configured with a built-in processing engine named by <code>namedEffect</code>,
or the default processing engine if <code>namedEffect</code> is omitted. If <code>namedEffect</code> is not supported
by this user-agent, <code>createProcessor</code> returns null. User-agents adding nonstandard named effects should use
vendor prefixing, e.g. "MozUnderwaterBubbles". The stream's <code>autofinish</code> attribute
is set to true.

<p>The <code>createWorkerProcessor(worker)</code> method returns a new <code>ProcessedMediaStream</code> with this <code>MediaStream</code> as its sole input.</p>
The stream is configured with <code>worker</code> as its processing engine.
The stream's <code>autofinish</code> flag is set to true.

<p class="todo">Add event handlers or callback functions for all finished and blocking state changes?

</p><h2 id="media-elements">3. Media Elements</h2>

<h3 id="media-element-extensions">3.1 Media Element Extensions</h3>

<p>We extend HTML media elements to produce and consume streams. When an HTML media element</p>
produces a stream, it acts as a resource loader and control mechanism; the stream consists of whatever the
media element is currently playing. When a media element consumes a stream, it acts a playback
mechanism for the stream.

<pre><code>partial interface HTMLMediaElement {
  readonly attribute MediaStream stream;

  MediaStream captureStream();
  MediaStream captureStreamUntilEnded();
  readonly attribute boolean audioCaptured;

  attribute any src;
};</code></pre>

<p>The <code>stream</code> attribute returns a stream which always plays whatever the element is playing. The stream is blocked while the media element is not playing. It is never finished, even when playback ends</p>
(since the element might load a new resource or seek within the current resource). The <code>stream</code> attribute for a given element always returns
the same stream. When the stream changes to blocked, we fire the <code>waiting</code> event for the media element,
and when it changes to unblocked we fire the <code>playing</code> event for the media element.

<p class="XXX">Currently the HTML media element spec says that <code>playing</code> would fire on an element
that is able to play except that a downstream <code>MediaController</code> is blocked. This is incompatible
with the above. I think that part of the HTML media spec should be changed so that only elements that are actually
going to play fire <code>playing</code>.

</p><p>The <code>captureStream()</code> method returns a new <code>MediaStream</code> that plays the same audio and video as <code>stream</code>.</p>
<code>captureStream()</code> sets the <code>audioCaptured</code> attribute to true.

<p>The <code>captureStreamUntilEnded()</code> method returns a new <code>MediaStream</code> that plays the same audio and video as <code>stream</code>, until the element next reaches</p>
the "ended playback" state, at which point this stream will enter the finished state.
<code>captureStreamUntilEnded()</code> sets the <code>audioCaptured</code> attribute to true.

<p>While the media element is playing a resource whose origin is not the same as the media element itself, <code>MediaStream</code>s for the element do not play the content; they block.</p>

<p class="note">This prevents leaking of media contents to scripts in the page. In the future we could relax this and allow the streams to play as long as there's no scripted processing of the data downstream,
but that's trickier.

</p><p>While the <code>audioCaptured</code> attribute is true, the element does not produce direct audio output.</p>
Audio output is still sent to <code>stream</code> and the resource stream. This attribute is NOT reflected into the DOM. It
is initially false. It's readonly to script and nothing ever sets it to true.

<p>The <code>src</code> attribute is extended to allow it to be set to a <code>MediaStream</code>. The element</p>
will play the contents of the given stream. This is treated as a live stream; seeking and <code>playbackRate</code>
are not supported.

<p>The <code>URL.createObjectURL(stream)</code> method defined for HTML MediaStreams can create a URL to be</p>
used as a source for a media element. Setting a media element to use this source URL is equivalent to setting
the media element <code>src</code> to the given stream.

<h3 id="audio-element-extensions">3.2 Audio Element Extensions</h3>

<p>We add an <code>Audio</code> constructor taking a <code>MediaStream</code> as a parameter.</p>
This sets the initial <code>src</code> to the stream.

<pre><code>[NamedConstructor=Audio(MediaStream src)]
partial interface HTMLAudioElement {
}</code></pre>

<h2 id="stream-mixing-and-processing">4. Stream Mixing And Processing</h2>

<h3 id="time-varying-attributes">4.1 Time-varying Attributes</h3>

<p>To enable precise control over the timing of attribute changes, many attributes can be set using a</p>
"timed setter" method taking a <code>startTime</code> parameter. The user-agent will attempt to make the change take
effect when the subject stream's "current time" is exactly the given <code>startTime</code> --- certainly no earlier, but possibly later if the change request is processed after the stream's current time has reached <code>startTime</code>. <code>startTime</code> is optional; if ommitted, the change takes effect as soon as possible.

<p>Using a timed setter method never changes the observed attribute value immediately. Setter method changes always take effect after the next <em>stable state</em>, as described in section 2.1. Setting the attribute value changes the observed attribute value immediately, but the change to the underlying media stream will still not take effect until after</p>
the next stable state.

<p>Multiple pending changes to an attribute are allowed. Calling the setter method with</p>
<code>startTime</code> T sets the value of the attribute for all times T' &gt;= T to the desired value (wiping out the effects of previous calls to the setter method with a time greater than or equal to <code>startTime</code>). Therefore
by calling the setter method multiple times with increasing <code>startTime</code>, a series of change requests
can be built up. Setting the attribute directly sets the value of the attribute for all future times, wiping
out any pending setter method requests.

<h3 id="processedmediastream">4.2 ProcessedMediaStream</h3>

<p>A <code>ProcessedMediaStream</code> combines zero or more input streams and applies some processing to</p>
combine them into a single output stream.

<pre><code>[Constructor(),
 Constructor(in Worker worker, in optional long audioSampleRate, in optional short audioChannels)]
interface ProcessedMediaStream : MediaStream {
  readonly attribute MediaInput[] inputs;
  MediaInput addInput(in MediaStream inputStream, in optional double outputStartTime, in optional double inputStartTime);

  attribute any params;
  void setParams(in any params, in optional double startTime);

  readonly attribute boolean autofinish;
};</code></pre>

<p>The constructors create a new <code>ProcessedMediaStream</code> with no inputs.</p>
The second constructor creates a new <code>ProcessedMediaStream</code> with a Worker
processing engine, setting the
audio sample rate to <code>audioSampleRate</code> and setting the number of
audio channels to <code>audioChannels</code> (defaulting to 2). These parameters control the audio sample
format used by the Worker (see below). Both constructors initialize <code>autofinish</code> to false.

<p class="todo">Specify valid values for <code>audioChannels</code> and <code>audioSampleRate</code>.

</p><p>The <code>inputs</code> attribute returns an array of <code>MediaInput</code>s, one for</p>
each stream currently configured as an input to the <code>ProcessedMediaStream</code>. (A stream can be used as multiple inputs to the same <code>ProcessedMediaStream</code>.) It is
initially empty if constructed via the <code>ProcessedMediaStream()</code> constructor, or
contains a single element if constructed via <code>MediaStream.createProcessor</code>.

<p>A <code>MediaInput</code> represents an input port. An input port is <em>active</em> while it is enabled (see below) and the input stream is not finished.</p>

<p>The <code>addInput(inputStream, outputStartTime, inputStartTime)</code> method adds a new <code>MediaInput</code> to the end of the</p>
<code>inputs</code> array, whose input stream is <code>inputStream</code>. The <code>outputStartTime</code>
and <code>inputStartTime</code> parameters control when an input port is enabled and helps
synchronize inputs with outputs. The input port is enabled when the input stream's current time is
<code>inputStartTime</code> and the output stream's current time is <code>outputStartTime</code>.

<p>More precisely, when the <code>addInput</code> call takes effect (see section 2.1),</p>
the user-agent runs the following steps:
<ol>
<li>If the <code>outputStartTime</code> was omitted, set it to the output stream's current time.</li>
<li>If the <code>inputStartTime</code> was omitted, set it to the input stream's current time.</li>
<li>Compute the <em>deadline miss delay</em>: the maximum of
  <ul>
  <li>The input stream's curent time minus <code>inputStartTime</code></li>
  <li>The output stream's current time minus <code>outputStartTime</code></li>
  </ul>
</li>
<li>If the deadline miss delay is greater than zero, add it to the <code>inputStartTime</code> and <code>outputStartTime</code>. (This would be a good place for user-agents to emit a developer-accessible warning.)</li>
<li>While the input stream's current time is less than <code>inputStartTime</code>, or the output stream's current time is less than <code>outputStartTime</code>:
  <ul>
  <li>Whenever the input stream's current time is equal to <code>inputStartTime</code>, block the input stream.</li>
  <li>Whenever the output stream's current time is equal to <code>outputStartTime</code>, block the output stream.</li>
  </ul>
</li>
<li>Enable the input port.</li>
</ol>

<div class="note">It is easy to (mis)use start times to cause deadlocks in media processing, i.e. a
graph configuration that will continually block until it is modified. For example,
<pre><code>  var p = inputStream.createProcessor();
  p.addInput(inputStream, 5);</code></pre>
In this example, <code>inputStream</code> is used as an input to <code>p</code> twice. <code>inputStream</code> must block until <code>p</code> has played 5s of output, but also <code>p</code> cannot play anything until <code>inputStream</code> unblocks. It seems hard to design an API that's hard to deadlock; even creating a cycle will cause deadlock.</div>

<p>The <code>params</code> attribute and the <code>setParams(params, startTime)</code> timed setter method set the paramters for this stream. On setting, a <em>structured clone</em> of this object is made. The clone is sent to</p>
the worker (if there is one) during media processing. On getting, a fresh clone is returned.

<p>When an input stream finishes, at the next stable state any <code>MediaInput</code>s for that</p>
stream are automatically removed.

<p>When the <code>autofinish</code> attribute is true, then when all stream inputs are finished (including if there are no inputs), the stream will automatically enter the finished state and never produce any more output (even if new inputs are attached).</p>

<h3 id="mediainput">4.3 MediaInput</h3>

<p>A <code>MediaInput</code> object controls how an input stream contributes to the combined stream. </p>

<pre><code>interface MediaInput {
  readonly attribute MediaStream stream;

  MediaInput addFollowing(MediaStream inputStream);

  attribute double volume;
  void setVolume(in double volume, in optional double startTime, in optional double fadeTime);

  attribute any params;
  void setParams(in any params, in optional double startTime);

  attribute boolean blockInput;
  attribute boolean blockOutput;

  void remove(in optional double time);
};</code></pre>

<p>The <code>stream</code> attribute returns the <code>MediaStream</code> connected to this input.</p>
The input stream is treated as having at most one audio and/or video track; all enabled audio tracks are mixed
together and the rest are dropped, and all video tracks other than the selected video track are dropped.

<p>The <code>addFollowing(inputStream)</code> method adds a new <code>MediaInput</code> to</p>
the end of the <code>inputs</code> array for the <code>ProcessedMediaStream</code> this <code>MediaInput</code>
belongs to. The new <code>MediaInput</code>'s input stream is <code>inputStream</code>. The new input port is enabled when
this input port's audio tracks all end, or the this input port is removed. Implementations should extrapolate and
blend the ends of audio tracks if necessary to ensure a seamless transition between streams.

<p class="note">Sequencing media resources using media element durations is possible, e.g.
<code>processor.addInput(video1.captureStreamUntilEnded());
processor.addInput(video2.captureStreamUntilEnded(),video1.duration);</code>.
However, media element durations may not be perfectly reliable due to limitations of resource formats or
commonly-used encoders. For example, WebM resources often have a slight mismatch between the number of audio samples
and the duration metadata. For other resources, such as live streaming sources, the duration may not
be knowable in advance. Thus, using the duration is often unreliable and additional API is warranted.

</p><p class="todo">Add additional API to select particular tracks.

</p><p>The <code>volume</code> volume attribute and the <code>setVolume</code> timed setter method</p>
control the input volume; the input stream's audio is multiplied by this volume before
being processed. The <code>setVolume</code> method takes an additional <code>fadeTime</code> parameter; when greater
than zero, the volume is changed gradually from the value just before <code>startTime</code> to
the new value over the given fade time. The transition function is chosen so that if one stream changes from V1 to V2
and another stream changes from V2 to V1 over the same interval, the sum of the volumes at each point in
time is V1 + V2. This attribute is initially 1.0.

<p class="todo">Specify the exact transition function. Tim says "w=cos((pi/2)*t)^2 for t=0...1".

</p><p>The <code>params</code> attribute and the <code>setParams(params, startTime)</code> timed setter method set the paramters for this input. On setting, a <em>structured clone</em> of this object is made. The clone is sent to</p>
the worker (if there is one) during media processing. On getting, a fresh clone is returned.

<p>For the timed setter methods of <code>MediaInput</code>, the subject stream is the output stream, so changes take effect when the output stream's current time is equal to <code>startTime</code>.</p>

<p>The <code>blockInput</code> and <code>blockOutput</code> attributes control</p>
how the blocking status of the input stream is related to the blocking status of the output stream.
When <code>blockOutput</code> is true and the input port is active, if the input stream is blocked then the output stream must be blocked. While an active input is blocked and the output is not blocked, the input is treated as having no tracks. When <code>blockInput</code> is true and the input port is active, if the output is blocked,
then the input stream must be blocked. When false, while the output is blocked and an active input is not, the input will simply be discarded. These attributes are initially true.

<p class="XXX">Need to look again at these. It's not clear we have use cases for both attributes, and I haven't implemented them yet and they could be hard to implement.

</p><p>The <code>remove(time)</code> method removes this <code>MediaInput</code> from the inputs array of its owning</p>
<code>ProcessedMediaStream</code> at the given time relative to the output stream (or later, if it cannot be removed in time).
If <code>time</code> is omitted, the input is removed as soon as possible and the <code>MediaInput</code> is removed from
the destionation stream's <code>input</code> array immediately.
After removal, the <code>MediaInput</code> object is no longer used; its attributes retain their current values
and do not change unless explicitly set. All method calls are ignored. Additional calls to <code>remove</code> with an earlier time
can advance the removal time, but once removal is scheduled it cannot be stopped or delayed.

<h3 id="worker-processing">4.4 Worker Processing</h3>

<p>A <code>ProcessedMediaStream</code> with a worker computes its output by dispatching a sequence of <code>onprocessmedia</code> callbacks to the worker, passing each a <code>ProcessMediaEvent</code> parameter. A <code>ProcessMediaEvent</code> provides audio sample buffers for each input stream. Each sample buffer for a given <code>ProcessMediaEvent</code> has the same duration, so the inputs presented to the worker are always in sync. (Inputs may be added or removed between <code>ProcessMediaEvent</code>s, however.) The sequence of buffers provided for an input stream is the audio data to be played by that input stream. The user-agent will precompute data for the input streams as necessary.</p>

<p>For example, if a Worker computes the output sample for time T as a function of the [T - 1s, T + 1s] interval of an input stream, then initially the Worker would simply refuse to output anything until it has received at least 1s of input stream data, forcing the user-agent to precompute the input stream at least 1s ahead of the current time. (Note that large Worker latencies will increase the latency of changes to the media graph.)</p>

<p class="note">Note that <code>Worker</code>s do not have access to most DOM API objects. In particular, <code>Worker</code>s have no direct access to <code>MediaStream</code>s.

</p><p class="note">Note that a <code>ProcessedMediaStream</code>'s worker cannot be a
<code>SharedWorker</code>. This ensures that the worker can run in the same process as the page in multiprocess browsers, so media streams can be confined to a single process.

</p><p class="todo">Currently <code>ProcessMediaEvent</code> does not offer access to video data. This should be added later.

</p><pre><code>partial interface DedicatedWorkerGlobalScope {
  attribute Function onprocessmedia;
};</code></pre>

<p>The <code>onprocessmedia</code> attribute is the function to be called whenever stream data needs to be processed.</p>
A <code>ProcessMediaEvent</code> is passed as the single parameter to each call to the <code>onprocessmedia</code> callback.
For a given <code>ProcessedMediaStream</code>, the same <code>ProcessMediaEvent</code> is passed in every call to the
<code>onprocessmedia</code> callback. This allows the callback function to maintain per-stream state.

<pre><code>interface ProcessMediaEvent : Event {
  readonly attribute double inputTime;

  readonly attribute any params;
  readonly attribute double paramsStartTime;

  readonly attribute MediaInputBuffer inputs[];
  readonly attribute long audioSampleRate;
  readonly attribute short audioChannels;
  reaodnly attribute long audioLength;

  void writeAudio(in Float32Array data);

  void finish();
};</code></pre>

<p>The <code>inputTime</code> attribute returns the duration of the input that has been consumed by the</p>
<code>ProcessedMediaStream</code> for this worker.

<p>The <code>params</code> attribute provides a structured clone of the parameters object set by</p>
<code>ProcessedMediaStream.setParams</code>. The same object is returned in each event, except when the object has
been changed by <code>setParams</code> between events. <p>The <code>paramsStartTime</code> attribute returns the first time (measured in duration of input consumed for this stream) that this <code>params</code> object was set.</p>

<p class="note">Note that the parameters objects are constant over the duration of the inputs presented in the
event. Frequent changes to parameters will reduce the length of the input buffers that can be presented to
the worker.

</p><p><code>inputs</code> provides access to <code>MediaStreamBuffers</code> for each active input stream</p>
(in the same order as those streams appear in the <code>ProcessedMediaStream.inputs</code> array).

<p><code>audioSampleRate</code> and <code>audioChannels</code> represent the format of the input and</p>
output audio sample buffers. <code>audioSampleRate</code> is the number of samples per second.
<code>audioChannels</code> is the number of channels; the channel mapping is as defined in the Vorbis specification.
These values are constant for a given <code>ProcessedMediaStream</code>. When the <code>ProcessedMediaStream</code>
was constructed using the Worker constructor, these values are the values passed as parameters there. When the
<code>ProcessedMediaStream</code> was constructed via <code>MediaStream.createProcessor</code>, the values are
chosen to match the first active input stream (or 44.1KHz, 2 channels if there is no active input stream).

<p><code>audioLength</code> is the duration of the input(s) multiplied by the sample rate. If there are no inputs,</p>
the user-agent will choose a value representing the suggested amount of audio that the worker should produce.

<p><code>writeAudio(data)</code> writes audio data to the stream output.</p>
The output has a single audio track. If there is an active input with an audio track, then the metadata for the output audio track is set to the metadata for the audio track of the last active input that has an audio track, otherwise the output audio track's <code>kind</code> is "main" and the other metadata attriutes are the empty string. The data for the output audio track is the concatenation of the
inputs to each <code>writeAudio</code> call before the event handler returns. The data buffer is laid out
with the channels non-interleaved, as for the input buffers (see below). The length of <code>data</code> must be
a multiple of <code>audioChannels</code>; if not, then only the sample values up to the largest multiple of <code>audioChannels</code> less than the data length are used.

<p>It is permitted to write less audio than the duration of the inputs (including none). This indicates latency in the filter. Normally the user-agent will dispatch another event to provide</p>
more input until the worker starts producing output. It is also permitted to write more audio than the duration of the inputs, for example if there are no inputs.
Filters with latency should respond to an event with no inputs by writing out some of their buffered data; the user-agent
is draining them.

<p class="note">A synthesizer with no inputs can output as much data as it wants; the UA will buffer data and fire events as necessary. Filters that misbehave, e.g. by always writing zero-length buffers, will cause the stream to block due to an underrun.

</p><p>If <code>writeAudio</code> is not called during the event handler, then the input audio buffers are added together and written to the output.</p>

<p>If <code>writeAudio</code> is called outside the event handler, the call is ignored.</p>

<p>Calling <code>finish()</code> puts the stream into the finished state (once any previously buffered output has been consumed). The event callback will never be called again. <code>finish()</code> can be called at any time, inside or outside the event handler.</p>

<p>The output video track is computed as if there was no worker (see above).</p>

<p class="todo">This will change when we add video processing.

</p><pre><code>interface MediaInputBuffer {
  readonly attribute any params;
  readonly attribute double paramsStartTime;

  readonly attribute Float32Array audioSamples;
};</code></pre>

<p>The <code>params</code> attribute provides a structured clone of the parameters object set by</p>
<code>MediaInput.setParams</code>. The same object is returned in each event, except when the object has
been changed by <code>setParams</code> between events. <p>The <code>paramsStartTime</code> attribute returns the first time (measured in duration of input consumed for this stream) that this <code>params</code> object was set.</p>

<p><code>audioSamples</code> gives access to the audio samples for each input stream. The array length will be <code>event.audioLength</code> multiplied by <code>event.audioChannels</code>. The samples are floats ranging from -1 to 1, laid out non-interleaved, i.e. consecutive segments of <code>audioLength</code> samples each. The durations of the input buffers for the input streams will be equal. The <code>audioSamples</code> object will be a fresh object in each event. For inputs with no audio track, <code>audioSamples</code> will be all zeroes.</p>

<h2 id="built-in-processing-engines">5. Built-In Processing Engines</h2>

<h3 id="default-processing-engine">5.1. Default Processing Engine</h3>

<p>A <code>ProcessedMediaStream</code> with the default processing engine produces output as follows:</p>
<ul>
<li>If no active input has an audio track, the output has no audio track. Otherwise, the output has a single
audio track whose metadata (<code>id</code>, <code>kind</code>, <code>label</code>, and <code>language</code>)
is equal to that of the audio track for the last active input that has an audio track. The output audio track
is produced by adding the samples of the audio tracks of the active inputs together.</li>
<li>If no active input has a video track, the output has no video track. Otherwise, the output has a single
video track whose metadata (<code>id</code>, <code>kind</code>, <code>label</code>, and <code>language</code>)
is equal to that of the video track for the last active input that has a video track. The output video track
is produced by compositing together all the video frames from the video tracks of the active inputs, with the video
frames from higher-numbered inputs on top of the video frames from lower-numbered inputs; each
video frame is letterboxed to the size of the video frame for the last active input that has a video track.
<p class="note">This means if the last input's video track is opaque, the video output is simply the video track of the last input.</p>
</li>
</ul>

<h3 id="lastinput-processing-engine">5.2. "LastInput" Processing Engine</h3>

<p>A <code>ProcessedMediaStream</code> with the "LastInput" processing engine simply produces the last active input stream as output. If there are no active input streams, it produces the same output as the default processing engine.</p>

<h2 id="media-graph-considerations">6. Media Graph Considerations</h2>

<h3 id="cycles">6.1. Cycles</h3>

<p>While a <code>ProcessedMediaStream</code> has itself as a direct or indirect input stream (considering only active inputs), it is blocked.</p>

<h3 id="blocking">6.2. Blocking</h3>

<p>At each moment, every stream should not be blocked except as explicitly required by this specification.</p>

<h2 id="canvas-recording">7. Canvas Recording</h2>

<p>To enable video synthesis and some easy kinds of video effects we can record the contents of a canvas:</p>

<pre><code>partial interface HTMLCanvasElement {
  readonly attribute MediaStream stream;
};</code></pre>

<p>The <code>stream</code> attribute is a stream containing a video track with the "live" contents of the canvas as video frames whose size is the size of the canvas, and no audio track. It always returns the same stream for a given element.</p>

<h2 id="implementation-considerations">8. Implementation Considerations</h2>

<p class="todo">Here will be some non-normative implementation suggestions.

</p><h2 id="examples">9. Examples</h2>

<p class="todo">Add Worker scripts for these examples.

</p><ol>
<li>Play video with processing effect applied to the audio track

<pre><code>&lt;video src="foo.webm" id="v" controls&gt;&lt;/video&gt;
&lt;audio id="out" autoplay&gt;&lt;/audio&gt;
&lt;script&gt;
document.getElementById("out").src =
   document.getElementById("v").captureStream().createWorkerProcessor(new Worker("effect.js"));
&lt;/script&gt;</code></pre>
</li>
<li>Play video with processing effects mixing in out-of-band audio tracks (in sync)

<pre><code>&lt;video src="foo.webm" id="v"&gt;&lt;/video&gt;
&lt;audio src="back.webm" id="back"&gt;&lt;/audio&gt;
&lt;audio id="out" autoplay&gt;&lt;/audio&gt;
&lt;script&gt;
  var mixer = document.getElementById("v").captureStream().createWorkerProcessor(new Worker("audio-ducking.js"));
  mixer.addInput(document.getElementById("back").captureStream());
  document.getElementById("out").src = mixer;
  function startPlaying() {
    document.getElementById("v").play();
    document.getElementById("back").play();
  }
  // MediaController is a more convenient API because it ties together control of the elements,
  // but using streams is more flexible (e.g. they can be seeked to different offsets).
&lt;/script&gt;</code></pre>
</li>
<li>Capture microphone input and stream it out to a peer with a processing effect applied to the audio

<pre><code>&lt;script&gt;
  navigator.getUserMedia('audio', gotAudio);
  function gotAudio(stream) {
    peerConnection.addStream(stream.createWorkerProcessor(new Worker("effect.js")));
  }
&lt;/script&gt;</code></pre>
</li>
<li>Capture microphone input and visualize it as it is being streamed out to a peer and recorded

<pre><code>&lt;canvas id="c"&gt;&lt;/canvas&gt;
&lt;script&gt;
  navigator.getUserMedia('audio', gotAudio);
  var streamRecorder;
  function gotAudio(stream) {
    var worker = new Worker("visualizer.js");
    var processed = stream.createWorkerProcessor(worker);
    worker.onmessage = function(event) {
      drawSpectrumToCanvas(event.data, document.getElementById("c"));
    }
    streamRecorder = processed.record();
    peerConnection.addStream(processed);
  }
&lt;/script&gt;</code></pre>
</li>
<li>Capture microphone input, visualize it, mix in another audio track and stream the result to a peer and record

<pre><code>&lt;canvas id="c"&gt;&lt;/canvas&gt;
&lt;audio src="back.webm" id="back"&gt;&lt;/audio&gt;
&lt;script&gt;
  navigator.getUserMedia('audio', gotAudio);
  var streamRecorder;
  function gotAudio(stream) {
    var worker = new Worker("visualizer.js");
    var processed = stream.createWorkerProcessor(worker);
    worker.onmessage = function(event) {
      drawSpectrumToCanvas(event.data, document.getElementById("c"));
    }
    var mixer = processed.createProcessor();
    mixer.addInput(document.getElementById("back").captureStream());
    streamRecorder = mixer.record();
    peerConnection.addStream(mixer);
  }
&lt;/script&gt;</code></pre>
</li>
<li>Receive audio streams from peers, mix them with spatialization effects, and play

<pre><code>&lt;script&gt;
  var worker = new Worker("spatializer.js");
  var spatialized = stream.createWorkerProcessor(worker);
  peerConnection.onaddstream = function (event) {
    spatialized.addInput(event.stream).params = {x:..., y:..., z:...};
  };
  (new Audio(spatialized)).play();
&lt;/script&gt;</code></pre>
</li>
<li>Seamlessly chain from the end of one input stream to another

<p class="note">This method requires that you know each stream's duration, which is a bit suboptimal.
To get around that we'd need new API, perhaps a new kind of ProcessedMediaStream that plays streams in
serial.

</p><pre><code>&lt;audio src="in1.webm" id="in1" preload&gt;&lt;/audio&gt;
&lt;audio src="in2.webm" id="in2"&gt;&lt;/audio&gt;
&lt;script&gt;
  var in1 = document.getElementById("in1");
  in1.onloadedmetadata = function() {
    var mixer = in1.captureStreamUntilEnded().createProcessor();
    var in2 = document.getElementById("in2");
    mixer.addInput(in2.captureStreamUntilEnded(), in1.duration);
    (new Audio(mixer)).play();
    in1.play();
  }
&lt;/script&gt;</code></pre>
</li>
<li>Seamlessly switch from one input stream to another, e.g. to implement adaptive streaming

<p class="note">There are two ways to implement seamless switching: seek the second resource to before the
current time and then run the decoder faster than real-time to catch up to the first resource's play point, or
seek the second resource to after the current time and enable it when the first resource catches up to the seek
point. The first is more robust if the seek takes unexpectedly long, but the second is less demanding on the
decoder. Only the second method is currently implementable with this API (since by design there is no way to drive MediaStreams faster than real-time). If we want to support the first method as well, the right way would be to
add API to media elements to let them seek to synchronize with a given MediaStream.

</p><pre><code>&lt;audio src="in1.webm" id="in1" preload&gt;&lt;/audio&gt;
&lt;audio src="in2.webm" id="in2"&gt;&lt;/audio&gt;
&lt;audio id="out" autoplay&gt;&lt;/audio&gt;
&lt;script&gt;
  var stream1 = document.getElementById("in1").captureStream();
  var mixer = stream1.createProcessor("LastInput");
  document.getElementById("out").src = mixer;
  function switchStreams() {
    var in2 = document.getElementById("in2");
    in2.currentTime = in1.currentTime + 10; // arbitrary, but we should be able to complete the seek within this time
    mixer.addInput(in2.captureStream(), mixer.currentTime + 10);
    in2.play();
    // in2 will be blocked until the input port is enabled
    in2.onplaying = function() { mixer.inputs[0].remove(); };
  }
&lt;/script&gt;</code></pre>
</li>
<li>Synthesize samples from JS data

<pre><code>&lt;audio id="out" autoplay&gt;&lt;/audio&gt;
&lt;script&gt;
  document.getElementById("out").src =
    new ProcessedMediaStream(new Worker("synthesizer.js"));
&lt;/script&gt;</code></pre>
</li>
<li>Trigger a sound sample to be played through the effects graph ASAP but without causing any blocking

<pre><code>&lt;script&gt;
  var effectsMixer = ...;
  function playSound(src) {
    var audio = new Audio(src);
    audio.oncanplaythrough = function() {
      var stream = audio.captureStreamUntilEnded();
      var port = effectsMixer.addInput(stream);
      port.blockOutput = false;
      audio.play();
    }
  }
&lt;/script&gt;</code></pre>
</li>
<li>Trigger a sound sample to be played through the effects graph in five seconds

<pre><code>&lt;script&gt;
  var effectsMixer = ...;
  var audio = new Audio(...);
  function triggerSound() {
    var sound = audio.clone();
    var stream = sound.captureStreamUntilEnded();
    sound.play();
    effectsMixer.addInput(stream, effectsMixer.currentTime + 5);
  }
&lt;/script&gt;</code></pre>
</li>
<li>Capture video from a camera and analyze it (e.g. face recognition)

<pre><code>&lt;script&gt;
  navigator.getUserMedia('video', gotVideo);
  function gotVideo(stream) {
    stream.createWorkerProcessor(new Worker("face-recognizer.js"));
  }
&lt;/script&gt;</code></pre>
</li>
<li>Capture video, record it to a file and upload the file (e.g. Youtube)

<pre><code>&lt;script&gt;
  navigator.getUserMedia('video', gotVideo);
  var streamRecorder;
  function gotVideo(stream) {
    streamRecorder = stream.record();
  }
  function stopRecording() {
    streamRecorder.getRecordedData(gotData);
  }
  function gotData(blob) {
    var x = new XMLHttpRequest();
    x.open('POST', 'uploadMessage');
    x.send(blob);
  }
&lt;/script&gt;</code></pre>
</li>
<li>Capture video from a canvas, record it to a file then upload

<pre><code>&lt;canvas width="640" height="480" id="c"&gt;&lt;/canvas&gt;
&lt;script&gt;
  var canvas = document.getElementById("c");
  var streamRecorder = canvas.stream.record();
  function stopRecording() {
    streamRecorder.getRecordedData(gotData);
  }
  function gotData(blob) {
    var x = new XMLHttpRequest();
    x.open('POST', 'uploadMessage');
    x.send(blob);
  }
  var frame = 0;
  function updateCanvas() {
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 640, 480);
    ctx.fillText("Frame " + frame, 0, 200);
    ++frame;
  }
  setInterval(updateCanvas, 30);
&lt;/script&gt;</code></pre>
</li>
</ol>

<h2 id="related_work">Related Work</h2>

<ul>
<li><a href="https://wiki.mozilla.org/RTCStreamAPI">W3C-RTC charter</a> (Harald et. al.)</li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">WhatWG proposal (Ian Hickson et. al.)</a></li>
<li><a href="http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html">Chrome audio API</a></li>
<li><a href="https://wiki.mozilla.org/Audio_Data_API">Mozilla audio API</a></li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">WhatWG MediaController API</a></li>


</ul><div id="window-resizer-tooltip" style="display: none; "><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png); "></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1436</span> x <span class="tooltipHeight" id="winHeight">878</span><br /><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1436</span> x <span class="tooltipHeight" id="vpHeight">268</span></div></body></html>