html - html5 相机输入可以在 Windows 10 平板电脑上使用吗？

Question

长话短说

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)

帮助

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

Answer 1

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

<input type="file" accept="image/*" capture>
This method works on all platforms. On desktop it will prompt the user to upload an image file from the file system. In Safari on iOS this method will open up the camera app, allowing you to capture an image and then send it back to the web page; on Android this method will give the user a choice of which app to use to capture the image before sending it back to the web page.

The data can then be attached to a or manipulated with JavaScript by listening for an onchange event on the input element and then reading the files property of the event target.

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

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

Google Chrome and HTTPS If you are on a recent version of Google Chrome, a security change was made recently where a webcam can only be accessed if the content is served via HTTPS. You can still develop and test locally (or via localhost), but you won't be able to test it "in the wild" unless you are on a secure HTTPS connection.

source

您可以通过使用未被阻止的本地主机来确定这是问题所在

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