html5相机输入可以在Windows 10平板电脑上运行吗？

Question

TL; DR

html5相机输入可以在Windows 10平板电脑上运行吗？

细节

• 设备:戴尔Venue 8 Pro平板电脑
• 操作系统:Windows 10
• 浏览器:Chrome

建立

使用以下html创建并托管页面并在Chrome中打开:

<input type="file" accept="image/*" capture="camera">

确保Windows 10允许应用程序使用相机.

问题

单击输入将不会启动相机.它改为启动文件浏览器.

调查

上面的代码在Android和iOS设备上运行良好.

我连接了一个网络摄像头javascript库,而不是在Win10平板电脑上工作.我怀疑Windows并不像Android/iOS那样将其集成摄像头识别为摄像头,而是认为它是一个网络摄像头(因为移动Windows 10本质上只是桌面Windows 10的小巧外形)

救命

有谁知道在Windows 10中使html5定义工作的方法？我真的不想检测操作系统并提供网络摄像头逻辑.

Answer 1

来自： https: //developers.google.com/web/fundamentals/native-hardware/capturing-images/

<input type="file" accept="image/*" capture>
此方法适用于所有平台。在桌面上，它将提示用户从文件系统上传图像文件。在 iOS 上的 Safari 中，此方法将打开相机应用程序，允许您捕获图像，然后将其发送回网页；在 Android 上，此方法将让用户选择在将图像发送回网页之前使用哪个应用程序来捕获图像。

然后，可以通过侦听输入元素上的 onchange 事件，然后读取事件目标的 files 属性，将数据附加到 JavaScript 或使用 JavaScript 进行操作。

也许你应该使用图像捕获API，如下所述： https: //developers.google.com/web/updates/2016/12/imagecapture 如果我能弄清楚我会上传我的代码

另一件需要考虑的事情是 HTTP VS HTTPS 谷歌浏览器可能会阻止 HTTP 上的摄像头

Google Chrome 和 HTTPS 如果您使用的是最新版本的 Google Chrome，最近进行了安全更改，只有通过 HTTPS 提供内容时才能访问网络摄像头。您仍然可以在本地（或通过本地主机）开发和测试，但除非您使用安全的 HTTPS 连接，否则无法“在野外”测试它。

来源

您可以通过使用未被阻止的 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/