I saw the usage example of MediaRecorder on the Internet. I didn't expect to find a bug when I used it. I have kindly reminded the author and thanked him for sharing the source code.
Example address: https://wendychengc.github.io/media-recorder-video-canvas/cameracanvas.html ,
Open source address: https://wendychengc.github.io/media-recorder-video-canvas/cameracanvas.html
This example has bugs:
bug phenomenon: except for the downloaded file after the first recording, each downloaded file is the first recorded content
. When opening with windowsMediaPlay player and with win10 movie and TV player, the progress bar fails Pull, except for the first recorded video file after the automatic download, other video files have been playing the video content downloaded after the first recording, rather than when
using the PotPlayer player, the default playback is also the first downloaded video Content, but when the scroll bar is dragged to the end to replay, the playback is actually the recorded video content. I ca n’t understand this player, although I deleted all other recorded videos, it plays the same video There are actually two video effects.
Reason for bug: The array of blobs stored before each recording is not cleared, and the download method after recording uses the array of allChunks, because the second recording is not cleared, so it actually saves the first time And the total array of blobs twice and twice, logically the video will always play the first + second downloaded content, but in fact the video will always play the first content, the reason is that although the second recording The array of allChunks is not cleared, but the total number of blobs recorded during the second recording (viewed through console.log (allChunks)) is recorded, so although the content of the first + second recorded video is played, but The number of blobs played is the number of the second recording, so when the second recording time is much longer than the first time (the number of blobs is more than the first time), you can see the second time in the middle of the playback If the recording time is the same (the number of blobs is the same), the content played is the first time.
Bug fix: clear allChunks array before every recording allChunks.length = 0;, allChunks = [] is not recommended; this way of writing.
1 // Start recording 2 startBtn.onclick = function (e) { 3 allChunks.length = 0; // Used to solve the bug of the example: except for the downloaded file after the first recording, each downloaded file is played First recorded content 4 recorder.start (10); / 5 startBtn.disabled = true ; 6 pauseBtn.disabled = false ; 7 resumeBtn.disabled = true ; 8 stopBtn.disabled = false ; 9 };