HTML5相机输入可以在Windows 10平板电脑上使用吗？ [英] Can html5 camera inputs work on Windows 10 tablets?
问题描述
TL; DR
html5摄像机输入可以在Windows 10平板电脑上使用吗？
Can html5 camera inputs work on Windows 10 tablets?
详细信息
- 设备：Dell Venue 8 Pro平板电脑
- 操作系统：Windows 10
- 浏览器：Chrome
设置
使用以下html创建并托管页面并在Chrome中打开：
Create and host a page with the following html and open in Chrome:
<input type="file" accept="image/*" capture="camera">
确保Windows 10允许应用程序使用相机。
Make sure Windows 10 has allowed apps to use the Camera.
问题
单击输入将不会启动相机。而是启动文件浏览器。
Clicking the input will not launch the camera. It launches a file browser instead.
调查
上面的代码可以正常工作在Android和iOS设备上。
The code above works fine on Android and iOS devices.
我连接了一个网络摄像头javascript库，该库在Win10平板电脑上确实有效。我怀疑Windows无法像Android / iOS一样将其集成摄像头识别为摄像头，而是认为它是网络摄像头（因为移动Windows 10本质上只是尺寸更小的台式机Windows 10）
I hooked up a webcam javascript library instead which does work on the Win10 tablet. My suspicion is that Windows doesn't recognise its integrated camera as a camera in the same way as Android/iOS does, and instead thinks it's a webcam (since mobile Windows 10 is essentially just desktop Windows 10 in a smaller form factor)
帮助
有人知道让html5定义在Windows 10中工作的方法吗？我真的不想检测操作系统并提供网络摄像头逻辑。
Does anyone know a way of making the html5 definition work in Windows 10? I really don't want to have to detect the operating system and serve up webcam logic instead.
推荐答案
来自：
https://developers.google.com/web/fundamentals/本机硬件/捕获图像/
< input type = file accept = image / * capture>
此方法适用于所有
平台。在桌面上，它将提示用户从文件系统上载图像文件
。在iOS上的Safari中，此方法将打开
相机应用程序，使您可以捕获图像，然后将其发送回
网页；在Android上，此方法将为用户提供
的选择，然后使用哪个应用程序来捕获图像，然后再将其发送回
网页。
<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.
然后可以通过侦听input元素上的onchange事件和
然后读取事件目标的files属性，将数据附加到a或使用
JavaScript进行操作。
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
如果我确定的话，我将上传我的代码
maybe you should use Image Capture API as described here: https://developers.google.com/web/updates/2016/12/imagecapture if I will figure it out I will upload my code
还要考虑的另一件事是HTTP VS HTTPS谷歌浏览器可能会阻止HTTP上的摄像头
one more thing to consider is HTTP VS HTTPS google chrome may block the camera on HTTP
Google Chrome和HTTPS
如果您使用的是最新版本的Google Chrome，则最近进行了安全更改，其中仅在提供内容后才可以访问网络摄像头通过HTTPS。您仍然可以在本地（或通过本地主机）进行开发和测试，但是除非您处于安全的HTTPS连接下，否则您将无法在野外对其进行测试。
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.
您可以通过使用未阻止的localhost来确定这是问题所在
you can identify this is the problem by using localhost which is not blocked
在Windows OS中，我可以使用视频捕获（在HTTPS上或本地主机）
，这是使用摄像机，然后您应该添加代码来捕获它
in windows OS for me work to use video capture(on HTTPS or localhost) this is use the camera and then you should add code to capture it
<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/zh-CN/tutorials/getusermedia/intro/
这篇关于HTML5相机输入可以在Windows 10平板电脑上使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
