Question

我即将开发一个可在Windows 8.1平板电脑上运行的应用程序。一个重要的功能是能够点击按钮访问相机拍摄一些照片。理想情况下，我想将其创建为 Web应用程序而不是本机应用程序，原因有很多（许可证，跨平台，开发时间：没有本机应用程序的经验等）。

我已经查看了从HTML 5中捕获图像的选项，并找到了允许我写的HTML Media Capture：

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

要访问相机。这适用于iPad和Android平板电脑，但我不能让它在Windows 8平板电脑上运行。我曾尝试在Windows 8平板电脑上使用Chrome，但仍无效果。它只是打开一个文件对话框，我可以在其中选择要上传的文件。我想要做的是能够捕获一个新的图像。 IE不支持此标准（显然其他浏览器也无法访问设备的摄像头）。

我偶然发现了Media Capture and Streams，这似乎主要与显示来自例如网络摄像头，但可能用于捕获图像，Chrome和Firefox支持其他浏览器，但仍然不是Internet Explorer（甚至IE11）。但是，三种浏览器的实现似乎都不能在我的Windows 8.1测试机上运行。如果有人在任何浏览器中使用getUserMedia在Windows 8平板电脑上工作，我有兴趣听到它。

无论如何，我的主要问题是：有没有办法在Web应用程序中使用HTML5访问Windows 8平板电脑上的相机？我见过的唯一工作示例依赖于使用Active X的IE原型实现或使用Flash的解决方案。

编辑：我非常希望将其保留在HTML5 / javascript中，因为它必须脱机工作（使用HTML5应用程序缓存）

Answer 1

我为这个解决方案付出了很多努力，最后我找到了一个很好的解决方案。但只能在windows存储应用程序中使用，例如chrome windows 8模式（chrome设置 - ＆gt;在Windows 8模式下重新启动chrome），然后您可以在html中使用普通文件输入标记。当你点击＆＃34;选择文件＆＃34;你看到下面的图像。然后你可以选择相机从相机添加拍摄图像。

如果您无法在列表中看到相机，则可以在下面安装应用程序。

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

Answer 2

所以我遇到了完全相同的问题。我的网络应用程序是类似的，除了我必须使用平板电脑的相机进行一些条形码扫描。

我在评论时使用的是HTML 5媒体API。为了使它在Windows 8 Surface Pro中以chrome工作，我必须这样做：

要在Chrome中启用getUserMedia，请在网址栏中输入“chrome：// flags /”并启用“在getUserMedia（）中启用屏幕捕获支持”。 Mac，Windows，Linux，Chrome OS“选项。

它在我的笔记本电脑上工作但在平板电脑上没有，在进行了更改并重新启动Chrome后，它工作正常。祝你好运。

Answer 3

以下是我最终用于解决这种情况的代码......它似乎在chrome中工作得非常好，但仍然不支持已知不支持getUserMedia的Internet Explorer。再次，我希望这不是必要的，Windows只支持像iOS和Android的拍照功能，但它现在有效。

信用： http://davidwalsh.name/browser-camera

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
            console.log("Video capture error: ", error.code);
        };

    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
    });
}, false);

Answer 4

getUserMedia界面在Surface 2上的Chrome中运行，证明： getUserMedia works in Chrome on Surface 2

我已经实现了这里描述的解决方案： http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 顺便说一句，他们的网站上也有一个工作示例： example from article "Capturing Audio & Video in HTML5"

getUserMedia在IE中不起作用
getUserMedia可能在FF中有效，但我没有测试
从[浏览]按钮访问相机在Surface 2上的任何浏览器中都不起作用

编辑：刚才意识到，我的方法不再适用于Surface。对于html5rocks页面，同样的故事，给出的示例在Surface上不起作用。我猜，新的Chrome版本已停止支持。但我发现了适用于Chrome和Firefox的Surface的示例，您可以： http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html

在Windows 8.1平板电脑上捕获Web应用程序中的图像

4 个答案: