For a project, I want to record people using their webcams. Since this can create large video files, I increased my php.ini’s upload_max_filesize and post_max_size to 500M. Everything is working great in chromium-based browsers under all operating systems.

However, in Firefox running under macOS, I get an error when the video file exceeds 20MB, which results in that the video does not get uploaded. Yet, Firefox on Windows and Linux (Ubuntu) does not cause this error.

The error message on the Firefox console is: TypeError: NetworkError when attempting to fetch resource.

I created a minimal demo here: https://ccp-odc.eva.mpg.de/modal-recorder/demo/example.html

BE AWARE! If you hit Upload Recorded Video, the videos are stored on my server! Do not record yourself!

Steps to reproduce: 0. Open the network tab

1. Click StartRecorder() (step 5) button (accept the consent) — under the hood, this will start the MediaRecorder API and creates a blob in the window object.
2. Wait at least 2 minutes (to reach at least 20mb)
3. Hit the Upload Recorded Video button (see the network tab, and console) — under the hood I create a new FormData() object and I append the blob to it. Then, I use fetch/POST to send this to the PHP endpoint

FYI; This demo is the bundled version of this repo: https://github.com/ccp-eva/media-recorder

The three important files are the HTML file, the corresponding JavaScript file, and the PHP endoint. You fine the three files here:

• https://github.com/ccp-eva/media-recorder/blob/main/public/example.html#L94
• https://github.com/ccp-eva/media-recorder/blob/main/src/components/uploadVideo.js
• https://github.com/ccp-eva/media-recorder/blob/main/public/upload_video.php

So it really seems that this is some specific macOS/Firefox issue. Anyone out there has insights why this is happening in Firefox?