Chrome MediaRecorder 随机生成损坏的视频文件

Question

Chrome：版本 96.0.4664.55（正式版）(x86_64)
系统：Mac卡特琳娜 10.15.5

我正在使用此代码从 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 下载和检查的同一页面中创建链接。因此消除了上传机制中的可能原因。该文件已从原始文件损坏。

看起来第一个文件中从未发生过错误。

我尝试过的东西

使用其他编解码器：

"video/webm;编解码器=vp9"
"video/webm"

Answer 1

我将 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）无法以正确的顺序调用，或者有多个调用...老实说，我不知道真正的问题是什么，如果有更好的代码版本我可以创建它也可以工作。

Answer 2

当一个或多个 ondataavailable() 块以某种方式丢失时，就会发生视频文件损坏。

在您的代码中 actualChunks = chunks.splice(0, chunks.length); 很奇怪有两个原因。

actualChunks 进入全局范围，因为它未声明。它可以使用 const 声明。这可能是您可能出现的竞争条件的原因。
没必要。只需这样做即可。

const blob = new Blob(chunks, { type: mediaRecorder.mimeType });

亲提示用的好JavascriptIDE。它会抱怨未声明的变量并拯救你的xxx脖子。

Chrome MediaRecorder 随机生成损坏的视频文件

Chrome MediaRecorder is randomly generating corrupted video files

javascript

web-mediarecorder

我尝试过的东西