Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Capturing images in web application on Windows 8.1 tablets

I am about to develop an application that is to run on Windows 8.1 tablets. An important feature is to be able to click on a button to access the camera to take some pictures. Ideally I would like to create it as a Web application rather than a native application due to a number of reasons (licences, cross-platform, development time: have no experience in native apps, etc.).

I have looked at the options for capturing images from HTML 5 and have found HTML Media Capture which allows me to write:

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

To get access to the camera. This works great on iPads and on Android tablets, but I can't get it to work on Windows 8 tablets. I have tried using Chrome on the Windows 8 tablet, but still no effect. All it does is that it opens a file dialog in which I can choose a file to upload. What I want to do is to be able to capture a new image. This standard is not supported by IE (an apparently the other browsers cannot access the device's camera either).

I have also stumbled across Media Capture and Streams which seems to be mostly related to showing streams from e.g. the web cam, but probably could be used to capture images and is supported by Chrome and Firefox among other browsers, but still not by Internet Explorer (even IE11). None of the three browsers' implementations seem to work on my Windows 8.1 test machine though. If someone has gotten getUserMedia to work on Windows 8 tablets in any browser I'm interested in hearing about it.

Anyway, my main question is: Is there any way to access the camera on a Windows 8 tablet using HTML5 from a web application? The only working examples I have seen have relied on a prototype implementation for IE using Active X or solutions that use flash.

EDIT: I would very much prefer to keep it in HTML5/javascript as it has to work offline (using HTML5 Application Cache)

like image 689
michn Avatar asked Dec 09 '13 13:12

michn


1 Answers

I struggled very much for this solution, at the end I find good a solution. But only can use in windows store apps like chrome windows 8 mode (chrome settings -> relaunch chrome in windows 8 mode) then you can use the normal file input tag in html. when you hit "choose file" u see the image below. Then u can choose camera to add take image from camera.

Then u can choose camera to add take image from camera

if you can not see camera in the list, u can install app below.

https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN

like image 53
HubeybOzkul Avatar answered Sep 20 '22 07:09

HubeybOzkul