网上看到了MediaRecorder用法示例,没想到用的时候发现了一点bug,已友情提示该作者,并感谢他分享源码
示例地址:https://wendychengc.github.io/media-recorder-video-canvas/cameracanvas.html、
开源地址:https://wendychengc.github.io/media-recorder-video-canvas/cameracanvas.html
该示例有bug:
bug现象:除第一次录制后的下载文件,每次下载的文件都是第一次录制的内容
用windowsMediaPlay播放器和用win10的电影和电视播放器打开时,进度条无法拉动,除第一次录制自动下载后的视频文件,其它视频文件一直播放第一次录制后下载的视频内容,而不是当次
用PotPlayer播放器播放时,默认播放得也是第一次下载的视频内容,但是当拖动滚动条到尽头重新播放时,播放得竟然是当次录制的视频内容,这个播放器我无法理解 ,尽管我把其它所有录制的视频都删掉了,它播放同一个视频竟然有两个视频的效果。
bug原因:在每次录制前存放blob的数组并没有清空,而且录制结束后的下载方法里使用的是 allChunks这个数组,因为第二次录制时没有清空,因此它实际上保存的是第一次和第二次两次的blob的总共数组,逻辑上视频会一直播放第一次+第二次下载的内容,但是实际上视频会一直播放第一次的内容,原因是第二次录制时虽然没有清空allChunks这个数组,但是记录了第二次录制整个过程的blob的总个数(通过console.log(allChunks)查看),所以虽然播放的是第一次+第二次录制的视频内容,但是播放blob的个数是第二次记录的个数,因此当第二次录制的时间比第一次长很多时(blob个数比第一次多),是可以在播放中途看到第二次的内容的,如果录制时间相同(blob个数相同),则播放的完全是第一次的内容。
bug解决:在每次录制前将allChunks数组清空allChunks.length=0; ,不推荐allChunks=[];这种写法。
1 //开始录制 2 startBtn.onclick = function (e) { 3 allChunks.length=0; //用于解决示例的bug:除第一次录制后的下载文件,每次下载的文件播放得都是第一次录制的内容 4 recorder.start(10);/ 5 startBtn.disabled = true; 6 pauseBtn.disabled = false; 7 resumeBtn.disabled = true; 8 stopBtn.disabled = false; 9 };