title: MediaRecorder 'ondataavailable' event not firing
body: <p>Here' my complete code for displaying and live recording audio and video (<em>and later uploading the blob chunk into the server</em>):</p>
  
  <pre><code>$(function () {
      var handleSuccess = function(stream) {
  
          var player = document.querySelector("#vid-user");
          player.srcObject = stream;
  
          console.log("Starting media recording")
          var options = {mimeType: 'video/webm'};
          var recordedChunks = [];
          var mediaRecorder = new MediaRecorder(stream, options);
  
          mediaRecorder.ondataavailable = function(e) {
              console.log("Data available")
              if (e.data.size &gt; 0) {
                  recordedChunks.push(e.data);
                  var url = URL.createObjectURL(new Blob(recordedChunks));
                  console.log("URL: " + url)
              }
          }
  
          mediaRecorder.start();
      };
      navigator.mediaDevices.getUserMedia({ audio: true, video: true })
          .then(handleSuccess)
  })
  </code></pre>
  
  <p>The video playback works, but the problem is that the <code>mediaRecorder.ondataavailable</code> is not triggered/called. What could be the problem here? </p>