如何使用 getUsermedia 和 mediaRecorder 下载录音并给出视频规范？

Posted 2023-04-24

【中文标题】如何使用 getUsermedia 和 mediaRecorder 下载录音并给出视频规范？

【英文标题】：How to download a recording using getUsermedia and mediaRecorder and give the video specifications?

【发布时间】：2021-11-04 14:38:29

【问题描述】：

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()

此代码适用于我，但下载视频时，下载时没有详细信息 （左图：从 youtube 下载的视频；右图：使用 mediaRecorder 下载的视频） https://i.stack.imgur.com/IxmYD.png

另一个问题是视频中无法执行必要的操作（加速，转到特定时间），因为它没有结束时间 https://i.stack.imgur.com/yF7qx.png

我可以做些什么来提供所需的详细信息 - 格式？

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

【参考方案1】：

如果您想为 MediaRecorder 创建的录制文件设置 MIME 媒体类型，则必须在调用其 constructor 时执行此操作。例如：

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 是一种不错的视频后处理方式。解释如何做到这一点远远超出了 *** 答案的范围。