接受捕获的Polyfill文件输入（使用getUserMedia捕获？） [英] Polyfill file input with accept capture (using getUserMedia to capture?)

问题描述

我想在调查框架中启用图片（&音频和视频）上传。
为了达到目的，输入文件已经足够了。
$ b $在某些移动浏览器上< input type =file接受=图像/ *;捕获=相机> 是一个真正的
让用户选择上传一个现有的图像或
采取一个新的简单方法。当然，也可以在图片
中查看和选择用户界面。

桌面浏览器没有走这条路线。相反，一些相当不错的东西似乎
可以使用 getUserMedia（）。

我没有找到任何工作示例上传收集用户媒体到服务器（例如，我发现 https://github.com/codepo8/interaction-cam/ 通过此答案。它显示视频，但不捕获在我的火狐浏览器也不知道，它不显示视频在Safari）。我不确定这是多少硬件特定的（我的Macbook Air的相机已经在很长一段时间在Chrome浏览器中打开/关闭了）。

是有什么样的polyfill上传捕获的图像，可以回落到一个简单的文件输入的情况下遇到麻烦/访问拒绝？ 解决方案

在桌面上，访问网络摄像头：

$ b

• 使用（现在不推荐使用） navigator.getUserMedia OR


• 使用基于新的承诺 navigator.mediaDevices.getUserMedia




访问权限被授予后，录制网络摄像头：





• 使用 Media Recorder API ，现在Chrome / Firefox（ demo &
• b




PS：移动版 HTML Media Capture规范已经发展， accept =image / *; capture =相机从来没有达到W3C Candidate Recommendation。只要使用 accept =image / *，并分别添加 capture =capture想强制从相机捕捉。有关更多详细信息，请参见 HTML语言捕获的正确语法。 p>


I want to enable image (& audio & video) uploads in a survey framework. To do so, input file is nearly sufficient for my purposes.

On some mobile browsers <input type="file" accept="image/*;capture=camera"> is a really simple way of letting users choose to upload an existing image or to take a new one. Of course the UI for viewing and choosing among the pictures is provided too.

Desktop browsers did not go this route. Instead, some pretty nice stuff seems to be possible using getUserMedia().
I did not find any working examples that upload the collected user-media to the server (e.g. I found https://github.com/codepo8/interaction-cam/ via this answer. It shows video, but doesn't capture in my Firefox and isn't "aware" of it either, it doesn't show video at all in Safari). I'm not sure how much of this is hardware-specific (my Macbook Air's camera has been on/off-broken in Chrome for a long time now).

Is there some sort of polyfill for uploading captured images that can fall back to a simple file input in case of trouble/access denial?

解决方案

On desktop, to access the webcam:

• use the (now deprecated) navigator.getUserMedia OR
• use the new promise based navigator.mediaDevices.getUserMedia

Once access is granted, to record the webcam:

• use the Media Recorder API, it's now supported in Chrome/Firefox (demo & code) OR
• use WebRTC and stream the video to a media server where you can record it

PS: on mobile the HTML Media Capture spec has evolved, accept="image/*;capture=camera" never made it to the W3C Candidate Recommendation. Use just accept="image/*" instead and separately add capture="capture"(Boolean) only if you want to force capture from the camera. See Correct Syntax for HTML Media Capture for more details.

这篇关于接受捕获的Polyfill文件输入（使用getUserMedia捕获？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！