I’m recording a video stream in Safari with MediaRecorder, then sending it to a remote server which then uses ffmpeg to reencode the video. When reencoding with FFmpeg, I get a lot of warnings and the final video is broken, frame are glitching and out of sync but the audio sounds fine.

Here’s my MediaRecorder script:

const camera = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const recorder = new MediaRecorder(camera, {
        mimeType: 'video/mp4', // Safari only supports MP4
        bitsPerSecond: 1_000_000,
});

recorder.ondataavailable = async ({ data: blob }) => {
        // open contents in new tab
        var fileURL = URL.createObjectURL(file);
         window.open(fileURL, '_blank');
};

recorder.start();
setTimeout(() => recorder.stop(), 5000);

I download the video blob from Safari and use this command to reencode it:

ffmpeg -i ./blob.mp4 -preset ultrafast -strict -2 -threads 10 -c copy ./output.mp4

Logs:

ffmpeg version 4.2.7-0ubuntu0.1 Copyright (c) 2000-2022 the FFmpeg developers
  built with gcc 9 (Ubuntu 9.4.0-1ubuntu1~20.04.1)
  configuration: --prefix=/usr --extra-version=0ubuntu0.1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --arch=amd64 --enable-gpl --disable-stripping --enable-avresample --disable-filter=resample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libcodec2 --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librsvg --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opencl --enable-opengl --enable-sdl2 --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-nvenc --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared
  libavutil      56. 31.100 / 56. 31.100
  libavcodec     58. 54.100 / 58. 54.100
  libavformat    58. 29.100 / 58. 29.100
  libavdevice    58.  8.100 / 58.  8.100
  libavfilter     7. 57.100 /  7. 57.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  5.100 /  5.  5.100
  libswresample   3.  5.100 /  3.  5.100
  libpostproc    55.  5.100 / 55.  5.100
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x559826616000] DTS 29 < 313 out of order
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from './chunk1.mp4':
  Metadata:
    major_brand     : iso5
    minor_version   : 1
    compatible_brands: isomiso5hlsf
    creation_time   : 2024-07-17T14:30:47.000000Z
  Duration: 00:00:01.00, start: 0.000000, bitrate: 3937 kb/s
    Stream #0:0(und): Video: h264 (Baseline) (avc1 / 0x31637661), yuv420p(progressive), 640x480 [SAR 1:1 DAR 4:3], 6218 kb/s, 33.36 fps, 600 tbr, 600 tbn, 1200 tbc (default)
    Metadata:
      creation_time   : 2024-07-17T14:30:47.000000Z
      handler_name    : Core Media Video
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 420 kb/s (default)
    Metadata:
      creation_time   : 2024-07-17T14:30:47.000000Z
      handler_name    : Core Media Audio
File './safari3.mp4' already exists. Overwrite ? [y/N] Output #0, mp4, to './safari3.mp4':
  Metadata:
    major_brand     : iso5
    minor_version   : 1
    compatible_brands: isomiso5hlsf
    encoder         : Lavf58.29.100
    Stream #0:0(und): Video: h264 (Baseline) (avc1 / 0x31637661), yuv420p(progressive), 640x480 [SAR 1:1 DAR 4:3], q=2-31, 6218 kb/s, 33.36 fps, 600 tbr, 19200 tbn, 600 tbc (default)
    Metadata:
      creation_time   : 2024-07-17T14:30:47.000000Z
      handler_name    : Core Media Video
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 420 kb/s (default)
    Metadata:
      creation_time   : 2024-07-17T14:30:47.000000Z
      handler_name    : Core Media Audio
Stream mapping:
  Stream #0:0 -> #0:0 (copy)
  Stream #0:1 -> #0:1 (copy)
Press [q] to stop, [?] for help
[mp4 @ 0x559826644340] Non-monotonous DTS in output stream 0:0; previous: 10016, current: 928; changing to 10017. This may result in incorrect timestamps in the output file.
[mp4 @ 0x559826644340] Non-monotonous DTS in output stream 0:0; previous: 10017, current: 1568; changing to 10018. This may result in incorrect timestamps in the output file.
[mp4 @ 0x559826644340] Non-monotonous DTS in output stream 0:0; previous: 10018, current: 2208; changing to 10019. This may result in incorrect timestamps in the output file.
...x100
frame=  126 fps=0.0 q=-1.0 Lsize=     479kB time=00:00:00.97 bitrate=4026.2kbits/s speed= 130x    
video:425kB audio:51kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.652696%

Not sure what’s happening or how to fix it. This issue only happens in Safari, videos from Chrome are perfectly fine.

I’ve tried various flags:

-fflags +igndts
-bsf:a aac_adtstoasc
-c:v libvpx-vp9 -c:a libopus
etc

None of them seem to fix the issue.