html5 摄像头输入可以在 Windows 10 平板电脑上使用吗？

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 设备上运行良好。

我连接了一个可在 Win10 平板电脑上运行的网络摄像头 JavaScript 库。我的怀疑是，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 上，此方法将为用户提供选择 使用哪个应用程序来捕获图像，然后再将其发送回 网页。

然后可以将数据附加到 a 或使用 JavaScript 通过监听输入元素上的 onchange 事件和 然后读取事件目标的 files 属性。

也许您应该使用此处描述的 Image Capture API： https://developers.google.com/web/updates/2016/12/imagecapture 如果我能弄清楚我会上传我的代码

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

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

source

您可以通过使用未被阻止的本地主机来识别这是问题

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

Answer 2

是的 html5 相机输入适用于 Windows 10 平板电脑。