Record video with HTML input type file capture camcorder from webcam

4
votes

In my company, i had the task to build a website, where users can record a video, that will be send to the server, some stuff will be done and the user finally gets an email with a link to a microsite with that video embedded.

After some research, i came to the conclusion, that it is impossible, at least at the moment, to capture a video with getUserMedia on iPad.

So the solution is quite simple, i just use a input-element with accept="video/*;capture=camcorder".

<input type="file" accept="video/*;capture=camcorder">

So far, so good. As I've read on this page, that it is also possible to capture a video from webcam with this technique, i thought that it is an adequat cross-browser solution.

But after some testing, i can just select an already recorded video on desktop browsers.

Did I misinterprete that article? Or am I just doing it wrong?

Cheers, Mohammer

2
htmlvideowebcamvideo-recording
In short <input accept="video/* has never been implemented by desktop browsers/OS. See my answer for details & solutions @Mohammer – Octavian Naicu

2 Answers

2
votes

In short you ended up using HTML Media Capture Standard which works by overloading the <input type="file"> element and adding new values for the accept parameter.

The great thing about it is that it works great on most mobile browsers (except for recording only the mic on iOS). Support is implemented at least in:

  • Safari and Chrome on iOS 6+
  • Internet and Chrome on Android 3+

Which pretty much covers anyone, however, depending on the device, you will end up with .mp4 (Android), .mov (iOS) and .3gp files.

The not so great thing about it is that it defaults to a plain old file selector when used on a desktop OS instead of opening Photo Booth for example.

Surprisingly the standard's draft included an image of how video capturing through some sort of Photo Booth app would look on a desktop: enter image description here

Which is why on the desktop a Flash video recording client + media server is the only solution that works well across browsers and platforms.

There are also commercial solutions including HDFVR (HTML Media Capture + Flash) and Pipe which does a lot more including the conversion to .mp4, pushing to your S3/FTP and webhooks.

1
votes

I think that's a typo.

the right way is

<p>Capture Video: <input type="file" accept="video/*" id="capture" capture="camcorder">

The 'capture' attribute only affects mobile file upload, as far as I know.

source: http://mobilehtml5.org/ts/?id=23