iOS 7.1 and later supports video recording in Safari through HTML Media Capture.
HTML Media Capture works by extending the <input type="file"> and adding new values for the accept parameter, namely audio, photo and video. It allows you to record videos or choose a pre-recorded video directly from Safari.
When recording a new video the native OS video recording app is used to perform the actual recording on the spot.
Video Quality When Choosing a Pre Recorded Video
Recent iOS devices can record videos in resolutions from 720p @ 30 fps to 1080p @ 60 fps and even 4k @ 30 fps:
1080p and 4k videos
When choosing a pre-recorded video to be uploaded through a HTML Media Capture form, iOS compresses the video down to 720p in resolution. That means all that rich pixely goodness in 1080p and 4k videos will be scaled down to 720p.
The benefit is that the video is A LOT SMALLER in size thus making it a lot quicker to upload over 3G/4G and WiFi connections. In our test recording we’ve used an iPhone 6S to record a 2 and ahalf minute 4k video. Before uploading the video was automatically compressed resulting in a size reduction from 886MB down to 96MB. An almost 90% reduction in size from 4k to 720p.
60fps videos
When choosing a 60fps pre recorded video, iOS did not reduce the fps (it still reduced the resolution though), so you still get the buttery smooth movements in the uploaded video.
Slow-mo videos
Slow motion videos are just videos recorded at very high framerates that are played back at normal framerates (30fps in case of iOS) thus creating the slow-mo effect. These videos keep their 30 fps framerate thus preserving the slow motion effect.
Video Quality When Recording On The Spot with HTML Media Capture
If when asked you select “Take Video” to record a video on the spot you will be taken directly to the native iOS app for recording. The device will now record in one of 2 resolutions depending on your default resolution for video recording in your device’s Photos & Camera settings:
| Resolution Setting | Actual Resolution When Recording Through HTML Media Capture |
|---|---|
| 720p HD at 30 fps | 480x360 (4:3) at 30 fps |
| 1080p HD at 30 fps | 480x360 (4:3) at 30 fps |
| 1080p HD at 60 fps | 1080p HD at 60 fps |
| 4k at 30 fps | 480x360 (4:3) at 30 fps |
iOS will record directly at 480×360 (landscape) or 360×480 (portrait) unless you’ve selected 1080p HD at 60 fps as the default resolution for video recording in which case the recorded video will actually be 1080p HD at 60 fps. Not sure if it’s a bug or a feature but that’s how it behaves in iOS 9.3.3 .
480×360 has a 4:3 ratio which means the video is higher than a 16:9 one when recording landscape and wider when recording portrait. The viewfinder (iPhone screen) will show a 16:9 image while recording but the video will contain more pixels at the top and bottom (landscape) and more to the sides (portrait) that are not shown on screen.
