Change latencyMode to realtime to significantly reduce video file size on Safari

[raedle]

Change latencyMode to realtime to significantly reduce video file size on Safari

Summary:

Encoding a video in Safari without setting the latencyMode to realtime will significantly increase the video output size because the default latencyMode is quality.

https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder/configure#latencymode

The file size significantly decreases after explicitly setting the latencyMode to realtime and reducing the bitrate to 14 Mbit/s. The output quality is visually comparable to the input video.

Results

Filename	Original Size	Before	After
mob_head_farm_5s.mp4	14.6 MB	204.2 MB	11.5 MB
mob_head_farm_10s.mp4	27.8 MB	425.8 MB	22.8 MB
mob_head_farm_20s.mp4	49.8 MB	757.4 MB	45.6 MB

Note: there is still one open issue on Safari with out of order frames after decoding. This can be expected because the VideoDecoder#output is not guaranteed to be called in VideoFrame presentation order, so it will need additional logic to sort frames by timestamp. I added this as an open issue to the README.md.

Test Plan:

Tested mp4box.html with the videos in this repo and recorded output file size in the table below. This table is also added to the README.md.

Encoding Results

Filename	Original Size	Chrome*	Safari†	Firefox‡
mob_head_farm_5s.mp4	14.6 MB	16.7 MB	11.5 MB	8.9 MB
mob_head_farm_10s.mp4	27.8 MB	33.5 MB	22.8 MB	17.7 MB
mob_head_farm_20s.mp4	49.8 MB	66.7 MB	45.6 MB	35.3 MB

* Chrome Version 125.0.6422.142 (Official Build) (arm64)

† Safari Version 17.5 (19618.2.12.11.6)

‡ Firefox Nightly 127.0a1 (2024-04-24) (64-bit)

[vjeux]

Thank you!!