使用接受捕获的polyfill文件输入(使用getUserMedia捕获?)

时间:2014-02-07 11:44:57

标签: javascript html5 file-upload getusermedia polyfills

我想在调查框架中启用图片(& audio& video)上传。 为此,输入文件几乎足以满足我的目的。

在某些移动浏览器上,<input type="file" accept="image/*;capture=camera">确实存在 让用户选择上传现有图片的简单方法 换一个新的。当然是用于查看和选择图片的UI 也提供了。

桌面浏览器没有走这条路。相反,似乎有一些相当不错的东西 可以使用getUserMedia() 我没有找到任何将收集的用户媒体上传到服务器的工作示例(例如,我通过此https://github.com/codepo8/interaction-cam/找到了answer。它显示了视频,但未在我的Firefox中捕获,而不是“意识到”它,它在Safari中根本不显示视频)。我不确定这有多少是特定于硬件的(我的Macbook Air的相机已经在Chrome中打开/关闭了很长时间)。

是否存在某种用于上传捕获图像的polyfill,如果出现故障/访问拒绝,可以回退到简单的文件输入?

2 个答案:

答案 0 :(得分:1)

我已经找到了getUserMedia.js,它可以在Firefox中使用。它回归Flash,这很好,我将不得不看看我是否能够在移动浏览器中调整它以回退到输入类型=“文件”。

答案 1 :(得分:1)

在桌面设备上,访问网络摄像头

  • 使用(现已弃用)navigator.getUserMedia OR
  • 使用基于navigator.mediaDevices.getUserMedia
  • 的新承诺

授予访问权限后,录制网络摄像头

  • 使用Media Recorder API,现在支持Chrome / Firefox(demo&amp; code)或
  • 使用WebRTC并将视频流式传输到可以录制的媒体服务器

PS:在移动设备上 HTML Media Capture规范已经发展,accept="image/*;capture=camera"从未进入W3C候选推荐标准。仅使用accept="image/*"而是单独添加capture="capture"(布尔值),仅当您要强制从相机捕获时。有关详细信息,请参阅Correct Syntax for HTML Media Capture