Question

TL; DR

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

详情

设备：Dell 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）形状因子）

帮助

有没有人知道如何让html5定义在Windows 10中运行？我真的不想检测操作系统并改为提供网络摄像头逻辑。

Answer 1

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

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

然后可以将数据附加到或操纵   通过在input元素上监听onchange事件来实现JavaScript   然后读取事件目标的files属性。

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

还需要考虑的另一件事是HTTP VS HTTPS google chrome可能会阻止HTTP上的摄像头

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

source

您可以通过使用未被阻止的localhost来识别这是问题

Windows操作系统中的

我工作使用视频捕获（在HTTPS或localhost上）这是使用相机，然后你应该添加代码来捕获它

<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/

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

1 个答案: