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?

从网络摄像头下载录音时，以下页面也存在相同的问题 https://webrtc.github.io/samples/src/content/getusermedia/record/

Answer 1

如果要为 MediaRecorder 创建的录制设置 MIME 媒体类型，则必须在调用其构造函数时执行此操作。例如：

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

但大多数浏览器（即 Chromium 和 Firefox）MediaRecorder 不生成video/mp4. 相反，他们生产video/webm. 您可以使用 MediaRecorder.isTypeSupported() 来确定它是否可以处理您想要的类型，或者您可以采用它为您提供的任何类型。mediaRecorder.mimeType是 MediaRecorder 实例的一个属性，告诉您获得的 MIME 类型。

如果您想从这些浏览器获取 mp4 录音，则必须对其进行后处理。

当然，现场录音没有长度的说法是正确的。MediaRecorder 生成适合现场播放的数据流。同样，如果您想让它可搜索并应用结束时间，您需要使用后处理。MediaRecorder 不这样做。

ffmpeg 是一种不错的视频后处理方法。解释如何做到这一点远远超出了 StackOverflow 答案的范围。