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