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

Question

我想录制getUserMedia的视频。 其demo page或this one（按开始，然后停下来，然后播放记录） 每67ms我做画布的快照和data64添加到阵列：我的“录制”视频的video_arr.push(canvas.toDataURL());

帧速率（当按下播放记录）小于67毫秒内的一帧。为什么？

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

Answer 1

它只是一个想法。我希望它能帮助你。

使用blobbuilder存储记录的框架，你需要到画布数据转换成二进制大对象为使用填充工具的帆布成团块

这里是填充工具的使用和下载

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