from:
https://developers.google.com/web/fundamentals/native-hardware/capturing-images/ https://developers.google.com/web/fundamentals/native-hardware/capturing-images/
<input type="file" accept="image/*" capture>
此方法适用于所有
平台。在桌面上,它将提示用户上传图像文件
从文件系统。在 iOS 上的 Safari 中,此方法将打开
相机应用程序,允许您捕获图像然后将其发送回
网页;在 Android 上,此方法将为用户提供以下选择:
在将图像发送回之前使用哪个应用程序来捕获图像
网页。
然后可以将数据附加到 a 或使用
JavaScript 通过监听输入元素上的 onchange 事件并
然后读取事件目标的文件属性。
也许你应该使用图像捕获 API,如下所述:https://developers.google.com/web/updates/2016/12/imagecapture https://developers.google.com/web/updates/2016/12/imagecapture如果我能弄清楚我会上传我的代码
另一件需要考虑的事情是 HTTP VS HTTPS 谷歌浏览器可能会阻止 HTTP 上的摄像头
谷歌浏览器和 HTTPS
如果您使用的是最新版本的 Google Chrome,最近进行了安全更改,只有通过 HTTPS 提供内容时才能访问网络摄像头。您仍然可以在本地(或通过本地主机)进行开发和测试,但除非您使用安全的 HTTPS 连接,否则您将无法“在野外”测试它。
source https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
您可以通过使用未被阻止的 localhost 来确定这是问题所在
在 Windows 操作系统中,我使用视频捕获(在 HTTPS 或本地主机上)
这是使用相机,然后你应该添加代码来捕获它
<video autoplay></video>
<script>
const constraints = {
video: true
};
const video = document.querySelector('video');
function handleSuccess(stream) {
video.srcObject = stream;
}
function handleError(error) {
console.error('Reeeejected!', error);
}
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
</script>
代码来源https://www.html5rocks.com/en/tutorials/getusermedia/intro/ https://www.html5rocks.com/en/tutorials/getusermedia/intro/