title: Why does MediaRecorder fail to start? (error: there's no audio or video tracks available) RecordRTC
body: <p>UPDATE: Current best hypothesis is that this is somehow caused by the large school/university networks— other users aren't having the problem. </p>
  
  <hr>
  
  <p>I'm using RecordRTC to record audio. That relies on MediaRecorder. </p>
  
  <p>Upon first starting the recording, this (caught) error is logged: </p>
  
  <pre><code>DOM exception: failed to execute start on Media recorder: The 
  MediaRecorder failed to start because there are no audio or video 
  tracks available
  </code></pre>
  
  <p>Before that, RecordRTC calls the MediaRecorder API: </p>
  
  <pre><code>Using recorderType:MediaStreamRecorder
  Passing following config over MediaRecorder API.Object {audio: "true", mimeType: "audio/webm", checkForInactiveTracks: "true", type: "audio", initCallback: "[object Function]"}
  </code></pre>
  
  
  
  <p>And here's the traceback in the code. It starts with a call to <code>startRecording</code> (in a redux saga): </p>
  
  <pre class="lang-js prettyprint-override"><code>const recorder = yield select(getRecorder)
  yield call(recorder.startRecording)
  </code></pre>
  
  <p>Here's <code>startRecording</code></p>
  
  <pre class="lang-js prettyprint-override"><code>startRecording = () =&gt; {
  
  try {
    this.captureUserMedia((stream) =&gt; {
      try {
         this.rtcRecorder.startRecording()
       this.recording = true
      } catch (err) {
        sendEmail(err, "inner startRecording failed", "support@gmail.com")
        console.log("inner startRecording ERROR: ", err)
      }
    });
  } catch (err) {
      sendEmail(err, "startRecording failed", "support@gmail.com")
      console.log("startRecording ERROR: ", err)
  }
  
  }
  </code></pre>
  
  <p>Here's <code>captureUserMedia</code>: </p>
  
  <pre class="lang-js prettyprint-override"><code>captureUserMedia(callback) {
   var params = { audio: true, video: false };
  
   navigator.getUserMedia(params, callback, (error) =&gt; {
     // alert(JSON.stringify(error));
     console.log('USER MEDIA ERROR::   ' + JSON.stringify(error))
     callback(null, error)
   });
  };
  </code></pre>
  
  <p>The error seems to occur at this line in particular of <code>startRecording</code>: </p>
  
  <pre class="lang-js prettyprint-override"><code>this.rtcRecorder.startRecording()
  </code></pre>
  
  <p>There are a few more details that might be helpful in solving this:</p>
  
  <blockquote>
    <ol>
    <li>Chrome version does not seem to be the problem: some users with <code>v61.0.3163.100</code> have the problem, while others don't 
    
    <ol start="2">
    <li>For the users who experience the problem, it seems to occur every time. </li>
    <li>Apparently, <code>navigator.getUserMedia</code> is deprecated, but it still should function— the complicated logic of the promise could be introducing a bug. </li>
    </ol></li>
    </ol>
  </blockquote>
  
  <p>UPDATE: </p>
  
  <blockquote>
    <ol start="4">
    <li>The problem has happened to two users who were on large networks (A university network and a public school district network). It has not yet happened to any users who were on private home networks.... </li>
    </ol>
  </blockquote>
  
  <p>Let me know what other info would be helpful and I'll respond immediately. Thank you. </p>
  
  <p>UPDATE:</p>
  
  <p>Muaz Khan suggested adding a hidden audio element to prevent the stream and tracks from being stopped/released. Here's the additional code that was added before capturing a stream (when the recorder is first initialized): </p>
  
  <pre class="lang-js prettyprint-override"><code>var hiddenAudio = document.createElement('audio');
  hiddenAudio.srcObject = stream // this line is required to make sure stream tracks aren't stopped/released
  hiddenAudio.muted = true
  hiddenAudio.play()
  </code></pre>
  
  <p>UPDATE 2: </p>
  
  <p>But it's still not working. A thought on why that may not have worked: </p>
  
  <ol>
  <li>I'm not sure that the hiddenAudio HTML element is actually persisting and capturing the stream. (It could be scoped incorrectly.)</li>
  </ol>
  
  <p>I'm left wondering if there's a subtle error in the callback hell of <code>navigator.getUserMedia</code> and that using the newer <code>navigator.mediaDevices getusermedia</code> (which relies on promises) would be simpler to follow. </p>
  
  <p>The other possibility is that the error is introduced when the recorder is initialized— that's here: </p>
  
  <pre class="lang-js prettyprint-override"><code>initialize = (callback) =&gt; {
  
  if (!!this.rtcRecorder) {
    console.log('Attempted to initialize an already initialized recorder but that\'s expected')
    return
  }
  
  console.log('initialize Recorder -- requestUserMedia')
  this.captureUserMedia((stream, error) =&gt; {
  
    if (error) {
      console.log('!!errror capturing user media!!')
      return callback &amp;&amp; callback(error)
    }
  
    // TODO: detect if system can play webms
  
    // &lt;-- smaller filesize
    // this.rtcRecorder = RecordRTC(stream, { recorderType: RecordRTC.StereoAudioRecorder, bitsPerSecond: 30000, numberOfAudioChannels: 1, mimeType: 'audio/wav' });
  
    try {
  
      // the MUAZ KHAN edits
      var hiddenAudio = document.createElement('audio');
      hiddenAudio.srcObject = stream // this line is required to make sure stream tracks aren't stopped/released
      hiddenAudio.muted = true
      hiddenAudio.play()
  
  
      this.rtcRecorder = RecordRTC(stream,  { audio: 'true', mimeType: 'audio/webm', checkForInactiveTracks: 'true' });
      callback &amp;&amp; callback(null)
      return true
    } catch (err) {
      sendEmail(err, "captureMedia (inner-most) startRecording failed", "support@gmail.com")
      console.log("captureMedia (inner-most) startRecording ERROR: ", err)
      callback &amp;&amp; callback(null)
      return true
    }
  
  
  });
  };
  </code></pre>
  
  <p>Thanks again. </p>
  
  <p>UPDATE:</p>
  
  <p>Including here the profiles of two users who are having this problem (both of large public school/university networks). The problem is not happening to users on private home networks:  </p>
  
  <p><a href="https://i.stack.imgur.com/b2KNE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b2KNE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/qwPGl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qwPGl.png" alt="enter image description here"></a></p>