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

Chrome MediaRecorder is randomly generating corrupted video files


问题
  • 浏览器。版本96.0.4664.55(官方版本)(x86_64)
  • 系统。Mac Catalina 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; codecs=vp9"
  • "video/webm"
听起来像是一个错误,然后你可以 提交一个问题 - 注意:这样做需要一个Google/Gmail账户。
我正在调查......在我看来,存在着某种竞赛条件:?
答案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
}

我认为有某种竞赛条件,使得事件监听器( ondataavailableonstop )没有按照适当的顺序被调用,或者有多次调用......说实话,我不知道真正的问题是什么,如果有更好的代码版本,我可以创建一个同样有效的版本。