HTML5 Media Capture yields heavily compressed videos

• Component: Media
• Status: NEW ---

[Doug Parker]

Created attachment 368072 [details]
Video captured via the native iOS camera.

When using HTML5 media capture (`<input type="file" accept="video/*" capture="camcorder" />`), videos are heavily compressed as compared to the native camera. See the two attached videos, one captured via the native camera and the other via HTML5 media capture.

You can clearly see the difference in a test page we made. One video comes from the native camera (file picked into the app), the other comes from HTML5 media capture. See if you can tell which is which:
https://posts.google.com/bulletin/share/amp/yrLX769h/h9JkyV

I took a look at the output video files with FFprobe:

$ ffprobe Web.mov 2>&1 | grep h264   
    Stream #0:0(und): Video: h264 (Baseline) (avc1 / 0x31637661), yuv420p(tv, smpte170m/bt709/bt709), 480x360, 748 kb/s, 30.01 fps, 30 tbr, 600 tbn, 1200 tbc (default)
$ ffprobe Native.mov 2>&1 | grep h264
    Stream #0:1(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 4813 kb/s, 30.01 fps, 30 tbr, 600 tbn, 1200 tbc (default)

The one from HTML5 media capture (Web.mov) is only 480p at 748 kb/s bitrate. By contrast, the natively capture video (Native.mov) runs at 720p at 4813 kb/s. That is a significant difference, and it provides a very strong incentive for users to prefer capturing with the native camera. Our PWA has no way around this problem as there are no controls to modify the quality. The best solution would be to limit users to only using the file picker, which negates the entire purpose of the HTML5 media capture API.

Can this quality be bumped up, or have some option added to allow clients to specify the quality?

[Doug Parker]

Created attachment 368073 [details]
Video captured via HTML5 Media Capture

[Radar WebKit Bug Importer]

<rdar://problem/50153586>

[Jonathon Wolfe]

This has been an issue with WebKit on iOS for several years now, and the issue is still present in iOS 15. 

MediaRecorder is the future (and I'm so glad that MediaRecorder support has come to Safari), but there are still many valid use cases for HTML Media Capture, and it's a shame that iOS arbitrarily downsamples all captured videos so severely.

This behavior temporarily changed in iOS 9 or thereabouts, but has since reverted. The issue is present in all WebKit-based browsers on iOS, so it seems to be a WebKit or iOS issue, not specific moible Safari.

Any acknowledgment of the issue would be appreciated.