You may have noticed the new video uploader of ClassQuiz. If you want to upload a video, a new window opens and if you then upload a video, it's slow. Really slow. Let me tell you why.
Non-technical explanation
To save storage and bandwidth, the video gets "compressed" in your browser before it gets uploaded. In my tests, it was only 1/3 of the original file without loosing any visible details.
Technical explanation
Ok, so a popup opens. You may ask: "Why not inline?" And I agree. Inline would have been way better, BUT there's something called security. The WebAssembly version of ffmpeg used to "compress" the video requires the SharedArrayBuffer. That's great, but this SharedArrayBuffer only works if the following headers are present:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
These headers prevent any resource from 3rd-parties being loaded. Since the images are fetched from Minio running at ncs3.classquiz.de, this doesn't work. So to set these headers without destroying the editor, a new site (the popup) has to be opened with these headers set. This makes everything way more complex and less intuitive, but that's the only way to get it working.
What ffmpeg does under the hood
It runs the following ffmpeg command:
ffmpeg -i {inpuit_file} -vcodec libx264 -crf 20 -vf scale=1080:-2 out.mp4
This command reduces the quality (The -crf 20) and downscales it to at most 1080p (-vf scale=1080:-2) to save storage and bandwidth. The progress shown in the UI is partly extracted with a regex from the ffmpeg logs to get the current speed (eg. 0.8x of the original video). After that, the video gets uploaded to the server with an XMLHttpRequest since Fetch doesn't support any progress. How stupid that XMLHttpRequest is superior to Fetch in this regard.