Record video with HTML input type file capture camcorder from webcam

与世无争的帅哥 提交于 2020-01-15 01:50:27

问题


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


回答1:


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:

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.




回答2:


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



来源:https://stackoverflow.com/questions/26116539/record-video-with-html-input-type-file-capture-camcorder-from-webcam

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!