MediaRecorder网上示例缺陷

Posted 2021-03-01 nreg

网上看到了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 };