Revision 747131 of MediaRecorder.start()

<p>{{ APIRef("MediaRecorder") }}</p>
<div class="summary">
 <p><span class="seoSummary">The <strong><code>Media.start()</code></strong> method (part of the <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) is used to start capturing media into a {{ domxref("Blob") }}.</span></p>
</div>
<p>When the <code>start()</code> method is invoked, the UA queues a task that runs the following steps:</p>
<ol>
 <li>If the {{ domxref("MediaRecorder.state") }} is not "inactive", raise a DOM <code>InvalidState</code> error and terminate these steps. if the {{ domxref("MediaRecorder.state") }} is "inactive", continue on to the next step.</li>
 <li>Set the {{ domxref("MediaRecorder.state") }} to "recording" and wait until media becomes available from the <code>stream</code> passed into {{ domxref("Navigator.getUserMedia") }}.</li>
 <li>Once data becomes available, raise a {{ domxref("MediaRecorder.start") }} event and start gathering the data into a {{ domxref("Blob") }} (see <cite><a class="bibref" href="https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html#bib-FILE-API">FILE-API</a></cite>).</li>
 <li>If the <code>timeSlice</code> argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{ domxref("MediaRecorder.dataavailable") }} event containing the Blob of collected data, and start gathering a new Blob of data. If <code>timeSlice</code> has not been provided, continue gathering data into the original Blob.</li>
 <li>When the <code>stream</code> is ended, set {{ domxref("MediaRecorder.state") }} to "inactive" and stop gathering data.</li>
 <li>Raise a {{ domxref("MediaRecorder.dataavailable") }} event containing the Blob of data.</li>
 <li>Raise a {{ domxref("MediaRecorder.stop") }} event.</li>
</ol>
<div class="note">
 <p><strong>Note</strong>: If the browser is unable to start recording or continue recording, it<em> will</em> raise a {{ domxref("DOMError") }} event, followed by a {{ domxref("MediaRecorder.dataavailable") }} event containing the Blob it has gathered, followed by the {{ domxref("MediaRecorder.stop") }} event.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><span class="idlInterface" id="idl-def-IDBIndex"><span class="idlMethod"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"> <span class="idlMethType">void</span> <span class="idlMethName"><a href="https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html#widl-MediaRecorder-start-void-long-timeslice">start</a></span> (<span class="idlParam">optional <span class="idlParamType">long</span> <span class="idlParamName">timeslice</span></span>);</span></span></span></span></span></span></span></span></span></span></pre>
<h2 id="Example">Example</h2>
<pre class="brush: js;highlight:[17,18]">if (navigator.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.getUserMedia (
      // constraints - only audio needed for this app
      {
         audio: true
      },

      // Success callback
      function(stream) {
           var mediaRecorder = new MediaRecorder(stream);

           var myStream = mediaRecorder.stream;
           console.log(myStream);

           record.onclick = function() {
               mediaRecorder.start();
               console.log("recorder started");
           }

           stop.onclick = function() {
               mediaRecorder.stop();
               console.log("recorder stopped, data available");
           }

           mediaRecorder.ondataavailable = function(e) {
             console.log("data available");

             var audio = document.createElement('audio');
             audio.setAttribute('controls', '');
             var audioURL = window.URL.createObjectURL(e.data);
             audio.src = audioURL;
           }
      },</pre>
<h2 id="Parameters">Parameters</h2>
<dl>
 <dt>
  <code>timeslice</code> {{optional_inline()}}</dt>
 <dd>
  This parameter takes a value of milliseconds, and represents the length of media capture to return in each Blob. If it is not specified, all media captured will be returned in a single Blob, unless one or more calls are made to {{ domxref("MediaRecorder.requestData") }}.</dd>
</dl>
<h2 id="Returns">Returns</h2>
<p>Void.</p>
<h2 id="Errors">Errors</h2>
<p>An <code>InvalidState</code> error is raised if the <code>start()</code> method is called while the <code>MediaRecorder</code> object’s {{ domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{page("/en-US/docs/Web/API/MediaRecorder_API","Browser_compatibility")}}</p>
<h2 id="Specifications">Specifications</h2>
<p>{{page("/en-US/docs/Web/API/MediaRecorder_API","Specifications")}}</p>
<h2 id="See_also">See also</h2>
<p>{{page("/en-US/docs/Web/API/MediaRecorder","See_also")}}</p>