How to download a recording using getUsermedia and mediaRecorder and give the video specifications?

Question

navigator.mediaDevices.getUserMedia().then(stream=>{

//a recorder is created
var mediaRecorder = new MediaRecorder(stream);

//started it
mediaRecorder.start();

//an array is created that receives all the data
var recordedChunks = [];

//fill it
mediaRecorder.ondataavailable = function(e){recordedChunks.push(e.data)};

//when stopped downloads the recording
mediaRecorder.onstop=function(){

  var blob = new Blob(recordedChunks, {
    'type': 'video/mp4'
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  document.body.appendChild(a);
  a.style = 'display: none';
  a.href = url;
  a.download = 'test.webm';
  a.click();
  window.URL.revokeObjectURL(url);
}
}.catch()

This code works for me, but when the video is downloaded it is downloaded without the details (left image: a video downloaded from youtube; right image: a video downloaded using mediaRecorder) https://i.stack.imgur.com/IxmYD.png

And the other problem is that the necessary actions cannot be done in the videos (speed up, go to a specific time) since it does not have an end time https://i.stack.imgur.com/yF7qx.png

What could I do to give it the required details - formats?

Here is a page that also has the same problems when downloading the recording from your webcam https://webrtc.github.io/samples/src/content/getusermedia/record/

Answer 1

If you want to set the MIME media type for a recording created by MediaRecorder, you must do so when you call its constructor. For example:

stream = await navigator.mediaDevices.getUserMedia (constraints)
const mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/mp4'})

But most browsers' (that is, Chromium and Firefox) MediaRecorders don't produce video/mp4. Instead they produce video/webm. You can use the MediaRecorder.isTypeSupported() to find out whether it can handle the type you want, or you can take whatever type it gives you. mediaRecorder.mimeType is a property of your MediaRecorder instance telling you what MIME type you get.

If you want to get mp4 recordings from those browsers you'll have to postprocess it.

And, of course you're correct that a live recording has no length. MediaRecorder produces a data stream suitable for playing live. Again, if you want to make it seekable and apply an end time, you need to use postprocessing. MediaRecorder doesn't do that.

ffmpeg is a decent way to postprocess video. Explaining how to do it is far beyond the scope of a StackOverflow answer.