如何从相机上载照片

Question

我的Web应用程序目标允许用户从相机上传图片，并确保不会从用户存档中选择图片。

以下代码正常工作，但用户可以选择"拍照"或"选择图片"。是否只能强制"拍照"选项？

<input id="myFileInput" type="file" accept="image/*" capture="camera">
<script>
var myInput = document.getElementById('myFileInput');
function sendPic() {
    var file = myInput.files[0];
    // Send file here 
}
myInput.addEventListener('change', sendPic, false);
</script>

还有其他想法吗？

Answer 1

有一种方法可以通过navigator.getUserMedia() API执行此操作，但这是有可能不推荐使用的危险，并且在Safari和Webkit中不支持它。

使用navigator.mediaDevices.getUserMedia(myConstraints)有一个新的标准，但尚未得到广泛支持（IE和Safari中没有支持）。

直到我们拥有一个始终实现的API，JavaScript将无法实现这一目标。您需要的是一个可以访问手机功能的本机应用程序，JavaScript无法做到。

Answer 2

自2012年以来就可以使用JavaScript从浏览器访问摄像头。请参见Caniuse getusermedia（）：它得到了70％的二手浏览器的支持。您仅在移动设备中感兴趣吗？那么百分比更高。

该方法首先定义为navigator.getusermedia（），但此后已移至mediaDevices.getUsermedia（）。

使用getusermedia（）仅生成一张图片（与视频流相反）遵循有关MDN的教程，它是演示，它确实可以完成您的要求。