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

Question

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

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

所以解决方案非常简单，我只使用带有 accept="video/*;capture=camcorder"的输入元素。

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

到目前为止，还不错。正如我在 this 上读到的那样页面，还可以使用这种技术从网络摄像头捕获视频，我认为这是一个足够的跨浏览器解决方案。

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

我是否误解了那篇文章？还是我做错了？

干杯， 默罕默尔

Answer 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 应用程序拍摄的视频在桌面上的效果:

这就是为什么在桌面上，Flash 视频录制客户端 + 媒体服务器是唯一可以跨浏览器和平台正常工作的解决方案。

也有商业解决方案包括HDFVR (HTML 媒体捕获 + Flash)和 Pipe它做的更多，包括转换为 .mp4，推送到您的 S3/FTP 和 webhooks。