使用来自网络摄像头的HTML输入类型文件捕获摄像机录制视频

时间:2014-09-30 08:49:43

标签: html5 video webcam video-recording

在我的公司,我的任务是建立一个用户可以录制视频的网站, 将被发送到服务器,一些东西将完成,用户终于收到一封电子邮件 嵌入该视频的微型网站链接。

经过一番研究,我得出结论,至少在目前,这是不可能的, 在iPad上使用getUserMedia捕获视频。

所以解决方案很简单,我只使用一个带有accept =“video / *; capture = camcorder”的输入元素。

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

到目前为止,这么好。正如我在this页面上所读到的,也可以使用这种技术从网络摄像头捕获视频,我认为这是一个充分的跨浏览器解决方案。

但经过一些测试后,我可以在桌面浏览器上选择已录制的视频。

我误解了那篇文章吗?或者我只是做错了?

干杯, Mohammer

2 个答案:

答案 0 :(得分:1)

我认为这是一个错字。

正确的方法是

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

据我所知,'capture'属性仅影响移动文件上传。

来源:http://mobilehtml5.org/ts/?id=23

答案 1 :(得分:1)

简而言之,您最终使用HTML Media Capture Standard,其工作原理是重载<input type="file">元素并为accept参数添加新值。

关于它的好处是它在大多数移动浏览器上运行良好(除了仅在iOS上录制麦克风)。支持至少在以下方面实施:

  • iOS 6+上的Safari和Chrome
  • Android 3 +上的互联网和Chrome

这几乎涵盖了任何人,但是,根据设备的不同,您最终会获得.mp4(Android),. mov(iOS)和.3gp文件。

关于它的不太好的一点是它在桌面操作系统上使用时默认为普通的旧文件选择器,而不是打开Photo Booth。

令人惊讶的是,该标准的草案包含了如何通过某种Photo Booth应用程序在桌面上观看视频的图像: enter image description here

这就是为什么在桌面上,Flash视频录制客户端+媒体服务器是唯一能够在浏览器和平台上运行良好的解决方案。

还有商业解决方案,包括HDFVR(HTML媒体捕获+ Flash)和Pipe,它们可以做很多事情,包括转换为.mp4,推送到S3 / FTP和webhooks。