我正在使用这段代码从MediaRecorder生成小的独立视频：
var mediaRecorder;
var chunks;
// call this function to start the process
function startRecording(stream) {
chunks = [];
mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp8" });
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function () {
actualChunks = chunks.splice(0, chunks.length);
const blob = new Blob(actualChunks, { type: "video/webm; codecs=vp8" });
uploadVideoPart(blob); // Upload to server
};
recordVideoChunk(stream);
};
function recordVideoChunk(stream) {
mediaRecorder.start();
setTimeout(function() {
mediaRecorder.stop();
recordVideoChunk(stream);
}, 10000); // 10 seconds videos
}
问题是，生成的一些文件被ffmpeg认为是损坏的：
ffmpeg -v error -i 03_video_part_1638535340218.webm -f null -
Error while decoding stream #0:0: Invalid data found when processing input
有关该文件的更多信息：
> ffprobe 03_video_part_1638535340218.webm
ffprobe version 4.4.1 Copyright (c) 2007-2021 the FFmpeg developers
built with Apple clang version 12.0.0 (clang-1200.0.32.29)
configuration: --prefix=/usr/local/Cellar/ffmpeg/4.4.1_3 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librist --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvmaf --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-avresample --enable-videotoolbox
libavutil 56. 70.100 / 56. 70.100
libavcodec 58.134.100 / 58.134.100
libavformat 58. 76.100 / 58. 76.100
libavdevice 58. 13.100 / 58. 13.100
libavfilter 7.110.100 / 7.110.100
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 9.100 / 5. 9.100
libswresample 3. 9.100 / 3. 9.100
libpostproc 55. 9.100 / 55. 9.100
Input #0, matroska,webm, from '03_video_part_1638535340218.webm':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1280x1236, SAR 1:1 DAR 320:309, 60 tbr, 1k tbn, 1k tbc (default)
Metadata:
alpha_mode : 1
Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
这个错误并不总是发生，也不是在所有独立的视频中。
我无法用Firefox重现这个错误
我已经追踪到这个错误是由浏览器本身造成的，在同一个页面上创建链接，通过ffmpeg下载和检查。所以上传机制中可能的原因被排除了。文件从原点被破坏了。
看起来错误从未发生在第一个文件中。
使用其他编解码器。
我把 MediaRecorder 实例的创建移到了循环函数中，现在它可以正常工作了：
var mediaRecorder;
var chunks;
// call this function to start the process
function startRecording(stream) {
chunks = [];
recordVideoChunk(stream);
};
function recordVideoChunk(stream) {
mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp8" });
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function () {
actualChunks = chunks.splice(0, chunks.length);
const blob = new Blob(actualChunks, { type: "video/webm; codecs=vp8" });
uploadVideoPart(blob); // Upload to server
};
mediaRecorder.start();
setTimeout(function() {
mediaRecorder.stop();
recordVideoChunk(stream);
}, 10000); // 10 seconds videos
}
我认为有某种竞赛条件，使得事件监听器( ondataavailable 和 onstop )没有按照适当的顺序被调用，或者有多次调用......说实话，我不知道真正的问题是什么，如果有更好的代码版本，我可以创建一个同样有效的版本。