【发布时间】：2018-05-10 16:21:20
【问题描述】：
我正在尝试使用 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 继续捕获视频。虽然这可能有效，但我仍然愿意接受任何其他更好的建议。
【问题讨论】：
-
所以首先不要将
URL.createObjectURL与MediaStream 一起使用，而是将MediaElement 的srcObject直接设置为MediaStream。现在，Edge 不支持 MediaRecorder API（虽然它是 under consideration），所以它是不行的。 -
唯一的方法是在画布上绘制视频帧，将每个帧导出为独立图像，使用 Web Audio API 来提取音轨的原始 PCM 数据，最后以视频格式重新打包所有内容。我不相信这可以实时完成，你开发它可能比等待 IE 实现这个 API 需要更长的时间。
-
你运气好吗？我自己目前正在反对这个问题，但在如何解决它方面并没有取得太大进展（我什至不在乎它是否是特定于 Edge 的实现）
-
嗨@Peter Mellet，我无法为 Edge 找到可靠的解决方案。有人建议在边缘浏览器上使用 ORTC 或 webRTC，并使用 kurento 等媒体服务器录制流。虽然我可以录制视频，但由于带宽可变，视频质量是个大问题。
标签： html html5-video microsoft-edge web-mediarecorder