Question

我正在尝试使用HTML5 API录制视频。我希望这个解决方案是跨平台的，它应该至少可以在Chrome，Firefox和Edge浏览器上运行。我尝试使用以下代码

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then((mediaStream) => {

  const video = document.querySelector('video');
  const url = window.URL.createObjectURL(mediaStream);
  video.src = url;
});

以上代码在Chrome和Edge中显示视频。当我尝试使用MediaRecorder API捕获字节时，它只能在Chrome中使用，而不能在Edge中使用。请建议可以做些什么。

const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = onDataAvailable
...
function onDataAvailable(d){
   //d.data is populated in Chrome but not in Edge.
}

请建议，如何捕获字节以便将其保存在服务器上。

我尝试了MediaStreamRecorder，但这也不适用于Edge。

更新：我发现很少的方法表明使用Canvas作为渲染帧和捕获字节的选项。然后使用requestAnimationFrame继续捕获视频。虽然这可能有效，但我仍然愿意接受任何其他更好的建议。

Answer 1

MediaRecorder API似乎只在FireFox＆amp;铬

https://caniuse.com/#search=MediaRecorder

我总是检查caniuse.com以获取新API的浏览器支持！

使用HTML5使用Edge进行视频录制

1 个答案: