Can html5 camera inputs work on Windows 10 tablets?

Question

TL;DR

Can html5 camera inputs work on Windows 10 tablets?

Details

• Device: Dell Venue 8 Pro tablet
• OS: Windows 10
• Browser: Chrome

Setup

Create and host a page with the following html and open in Chrome:

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

Make sure Windows 10 has allowed apps to use the Camera.

Problem

Clicking the input will not launch the camera. It launches a file browser instead.

Investigation

The code above works fine on Android and iOS devices.

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)

Help

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.

Answer 1

from: 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.

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

one more thing to consider is HTTP VS HTTPS google chrome may block the camera on 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

you can identify this is the problem by using localhost which is not blocked

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>

code source https://www.html5rocks.com/en/tutorials/getusermedia/intro/