4

I have an option to capture video and upload it via my website.

I want to force the capture to low resolution (and only specific seconds).

I'm using the HTML5 video tag.

<input type="file" id="uploadVideoInput" name="uploads[]" class="file_multi_video" accept="video/*" />

is there a way to do it?

Guys, I'm talking about uploading a video by selecting the input file or upload a recorded video from camera(mobile)

Ofir Hadad
  • 1,800
  • 3
  • 26
  • 47
  • How is video captured? What do you mean by "low resolution"? – guest271314 May 21 '17 at 18:55
  • When clicking on the input in mobile phone there is an option to capture a video from camera or upload a video file (from PC it's only upload), And I mean by lower resolution is to make the video smaller than it is.. Is know that mobile camera recording video with an high resolution (3K*2K), I want to force the video to be like 600*400 – Ofir Hadad May 21 '17 at 19:34
  • Not certain if that functionality is possible without processing the file after user selects file for upload. – guest271314 May 21 '17 at 19:41
  • 1
    let it record and then you compress the video in what format size you want. Dont force the user to do that, that sucks – Nicholas May 21 '17 at 19:42
  • @Nicholas I want to do it in order to help the user for waiting less till the upload finish – Ofir Hadad May 21 '17 at 20:16

1 Answers1

2

There are two types of uploads for videos from mobile devices:

"On the spot" video uploads

This is where you click a file upload button and choose the option from your OS to record a video.

There's no standard way to tell the browser what type of video to record. Some phones have settings to control the resolution/quality. But I've noticed on iOS (lately) that it forces you to record at the lowest resolution, regardless of your settings.

I agree w/the comments, for best user experience let the user upload whatever their phone sends, then transcode the video on the server/in the cloud.

Uploading existing video files

You could use things like the HTML5 File API to enforce limits on the file size and even the resolution. I won't add any code here, the file size is straight forward.

For resolution, what I did was to load local video file into a <video> tag, and then add a "loadedmetadata" event listener to it. When the "loadedmetadtata" event fires, you can then get the videoWdith and videoHeight as shown here.

I did this on the desktop, but I see no reason why it wouldn't work on a modern phone :)

Community
  • 1
  • 1
Sunil D.
  • 17,983
  • 6
  • 53
  • 65
  • 1
    do you know of a way to bypass the iPhone "low resolution capture"? No matter what the settings they record 320p quality. – Stefanos Chrs Jun 27 '18 at 16:58
  • @StefanosChrs did you find a solution? – damingzi Jun 04 '21 at 02:11
  • @damingzi It's an Apple policy and even with a ton of reports from the community they don't plan to change it. In the end I have to create a native mobile app to tweak the settings. – Stefanos Chrs Jun 05 '21 at 16:37