I'm using the file recording capability for a mobile web app I'm building:

<input id="file-camcorder" type="file" name="camcorder" accept="video/*" capture="camcorder"></input>

I'm wondering if there is a way to somehow limit the length of the video that gets recorded, or to somehow notify the user that their recording is taking too long. The problem is that when you choose to record on a mobile device, you are taken away from the web app, so I don't know of any way to interact with the user while they're in the phone's native recording app.

If anyone's got any ideas, that'd be great. Thanks!

I'm using the file recording capability for a mobile web app I'm building:

<input id="file-camcorder" type="file" name="camcorder" accept="video/*" capture="camcorder"></input>

I'm wondering if there is a way to somehow limit the length of the video that gets recorded, or to somehow notify the user that their recording is taking too long. The problem is that when you choose to record on a mobile device, you are taken away from the web app, so I don't know of any way to interact with the user while they're in the phone's native recording app.

If anyone's got any ideas, that'd be great. Thanks!

• javascript
• file
• mobile
• fileapi
• video-recording

• 7 Just an update that, while I didn't figure out how to limit recording time, we did figure out how, after recording, to read the metadata of the recorded file so that, if it exceeded the allowed record time, the file upload did not process, and the user was prompted to record again. It was not incredibly easy, especially in the case of quicktime files, which include the metadata for recordings at the end of the file rather than the beginning, which ordinarily would require a plete upload of the file, and which we solved by "swapping" the index, so that it came at the beginning. – mheavers Commented Aug 4, 2014 at 20:36
• Do you want to store the video ? If yes, how did you do that ? Cause I have multiple ideas to do what you want... – Jordan Commented Nov 14, 2014 at 10:51
• I'm not sure what your asking for is possible using html web aps, Web aps are designed to be device non-specific, but to restrict the length of time a device can record something using it's native app is beyond the scope of web aps. I'm not sure even Sencha tries to do this. However with native aps you do get that flexibility, such as with Apple's UIImagePickerController which has a videoMaxiumDuration property – binderbound Commented Jan 27, 2015 at 4:56

2 Answers 2

You will probably have to look into hybrid applications such as Phonegap. HTML 5 alone has a relatively limited access to the device's functions.

Someone mentioned checking the video size or length from the metadata afterwards. That is most likely your only option, if you can not use, say, Phonegap.

To read the metadata, you can use FileReader.

Maybe you could try using the html5 tag, attaching your phone's camera video stream as source of the video using getUserMedia like this, and then capturing images from video stream with some delay for a limited number of times (or even prompt the user that they're recording too long after you reach a certain number of frames). Try skimming this and see if it solves your problem.