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

问题描述 投票:2回答:2

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

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

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

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

到现在为止还挺好。正如我在this页面上看到的那样,使用这种技术捕获网络摄像头的视频也是可能的,我认为这是一个充分的跨浏览器解决方案。

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

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

干杯,穆罕默德

html5 video webcam video-recording
2个回答
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。


1
投票

我认为这是一个错字。

正确的方法是

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.