html - html5+canvas+getusermedia：如何录制视频

Question

我想从 录制视频getUserMedia。它的演示页面或这个（按开始，然后停止，然后播放录制）每 67 毫秒我制作画布快照并通过以下方式将 data64 添加到数组中：video_arr.push(canvas.toDataURL());

我的“录制”视频的帧速率（当按下播放录制时）在 67 毫秒内小于一帧。为什么？

或者有人能说出真实的记录方式，然后从 getUserMedia 播放视频吗？

Answer 1

这只是一个想法。我希望它应该对你有所帮助。

使用 blobbuilder 存储记录的帧，您需要将画布数据转换为 blob，以便使用 polyfill canvas 到 blob

这是polyfill的用法和下载

http://eligrey.com/blog/

https://github.com/blueimp/JavaScript-Canvas-to-Blob

var bb = new BlobBuilder();//global variable


//record for every frame
canvas.toBlob(function(blob) {
   bb.append(blob)
});


//onstop upload the blob builder data to server