title: How to download a MediaRecorder file in Chunk-Wise Simultaneously while record
body: <p>I am trying to create a simple record sample using <code>MediaRecorder</code> api. Using this i am checking to download capturing video using timeSlice(<code>mediaRecorder.start(10000)</code>).</p>
  <p>When data captured(each 10 seconds) <code>ondataavailable</code> event triggered and using this event i am converting current data as a blob and start the download process</p>
  <p>`</p>
  <pre><code> function handleDataAvailable(event) {
          if (event.data &amp;&amp; event.data.size &gt; 0) {
              const blobData = new Blob([event.data], { type: 'video/webm' });
              download(blobData);
              recordedBlobs.push(event.data);
          }
      }
  
      function download(blobData) {
          const url = window.URL.createObjectURL(blobData);
              const a = document.createElement('a');
              a.style.display = 'none';
              a.href = url;
              a.download = 'test.webm';
              document.body.appendChild(a);
              a.click();
              setTimeout(() =&gt; {
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(url);
              }, 100);
      }
  </code></pre>
  <p>`</p>
  <p>Everything is working fine and downloaded as well in certain interval.. What's the problem is i can able to play only first downloaded file(10s). rest of the files it look like black screen i am unable to play as wll...</p>
  <p>what's the cause of that issue as well as how to resolve that?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let mediaRecorder;
  let recordedBlobs;
  const recordButton = document.querySelector('button#record');
  recordButton.addEventListener('click', () =&gt; {
    if (recordButton.textContent === 'Start Recording') {
      startRecording();
    } else {
      stopRecording();
      recordButton.textContent = 'Start Recording';
    }
  });
  
  function handleDataAvailable(event) {
    if (event.data &amp;&amp; event.data.size &gt; 0) {
      const blobData = new Blob([event.data], {
        type: 'video/webm'
      });
      download(blobData);
      recordedBlobs.push(event.data);
    }
  }
  
  function download(blobData) {
    const url = window.URL.createObjectURL(blobData);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(() =&gt; {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 100);
  }
  
  function startRecording() {
    recordedBlobs = [];
    let options = {
      mimeType: 'video/webm;codecs=vp9,opus'
    };
    try {
      mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (e) {
      console.error('Exception while creating MediaRecorder:', e);
      errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
      return;
    }
    recordButton.textContent = 'Stop Recording';
    mediaRecorder.onstop = (event) =&gt; {
      console.log('Recorder stopped: ', event);
      console.log('Recorded Blobs: ', recordedBlobs);
    };
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(10000);
  }
  
  function stopRecording() {
    mediaRecorder.stop();
    const blobData = new Blob(recordedBlobs, {
      type: 'video/webm'
    });
    download(blobData)
  }
  
  function handleSuccess(stream) {
    window.stream = stream;
    const gumVideo = document.querySelector('video#gum');
    gumVideo.srcObject = stream;
  }
  
  async function init(constraints) {
    try {
      const stream = await window.navigator.mediaDevices.getUserMedia(constraints);
      handleSuccess(stream);
    } catch (e) {
      alert(e);
    }
  }
  init({
    audio: {
      echoCancellation: {
        exact: false
      }
    },
    video: {
      width: 1280,
      height: 720
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;video style="width: 300px; height:300px" id="gum" playsinline autoplay muted&gt;&lt;/video&gt;
    &lt;div&gt;
      &lt;button id="record"&gt;Start Recording&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Note: Due to security issue you can't able to run the sample here. try to create a sample from local using this code u can able to get</p>