2

我正在尝试使用 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 继续捕获视频。虽然这可能有效,但我仍然愿意接受任何其他更好的建议。

4

1 回答 1

1

MediaRecorder API 似乎只在 FireFox & Chrome 中实现

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

我总是在 caniuse.com 上查看浏览器对新 API 的支持!

于 2018-05-15T21:44:04.217 回答