javascript - How can I catch an issue of MediaRecorder.ondataavailble no longer being called?

Question

I am capturing a user's audio and video with the navigator.mediaDevices.getUserMedia() and then using MediaRecorder and its ondataavailable to store that video and audio blob locally to upload later.

Now Im dealing with an issue where for some reason the ondataavailable stops being called midway through the recording. I'm not sure why and I get no alerts that anything went wrong. So first, does anyone know why this might happen and how to catch the errors?

Second, I have tried to reproduce. By doing something like this.

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(camera) {
          local_media_stream = camera;
          camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") }
          camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") }
          camera.onended = function() { console.log("--- ENDED") }
          camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
  }).catch(function(error) {
        alert('Unable to capture your camera. Please check logs.' + error);
        console.error(error);
  });

And recording the stream with

recorder = new MediaRecorder(local_media_stream, {
    mimeType: encoding_options,
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: bits_per_second,
});
recorder.ondataavailable = function(e) {
    save_blob(e.data, blob_index)
    blob_index++;
}
recorder.onstop = function(e) {
    console.log("recorder stopped");
    console.log(e)
}
recorder.onerror = function(error) {
    console.log("recorder error");
    alert(error)
    throw error;
}
recorder.onstart = function() {
    console.log('started');
};
recorder.onpause = function() {
    console.log('paused');
};
recorder.onresume = function() {
    console.log('resumed');
};
recorder.start(15000)

Then I try to kill the stream manually to hopefully reproduce whatever issue is occurring by doing

local_media_stream.getVideoTracks()[0].stop()

Now ondataavailable is no longer called but none of the onended events were called. The recording is still going and the local_media_stream is still active.

If I kill the audio too

local_media_stream.getAudioTracks()[0].stop()

Now the local_media_stream is not active but still no event was called telling me the stream stopped and the recorder is still going but ondatavailable is never being called.

What can I do? I want to know that the local stream is being recorded successfully and if not be alerted so I can at least inform the user that the recording is no longer saving.

question from:https://stackoverflow.com/questions/65849247/how-can-i-catch-an-issue-of-mediarecorder-ondataavailble-no-longer-being-called

Answer 1

MediaRecorder has a recorder.stop() method. I don't see you calling it in your example code. Try calling it.

When you call track[n].stop() on the tracks of your media stream, you tell them to stop feeding data to MediaRecorder. So, unsurprisingly, MediaRecorder stops generating its coded output stream.

You also might, if you're running on Google Chrome, try a shorter timeslice than your recorder.start(15000). Or force the delivery of your dataavailable event by using recorder.requestData().