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

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

我查看了从HTML 5捕获图像的选项，并找到了允许我编写以下内容的选项：

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

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

我还偶然发现了一个类似的浏览器，它似乎主要与显示来自网络摄像头的流有关，但可能用于捕获图像，并且在其他浏览器中受到Chrome和Firefox的支持，但仍然不受Internet Explorer（甚至IE11）的支持。不过，这三种浏览器的实现似乎都不能在我的Windows8.1测试机上运行。如果有人让getUserMedia在任何浏览器的Windows8平板电脑上运行，我很想听听

不管怎样，我的主要问题是：有没有办法从web应用程序使用HTML5访问Windows8平板电脑上的摄像头？我所看到的唯一工作示例依赖于使用activex的IE原型实现或使用flash的解决方案

---

编辑：我更愿意将其保存在HTML5/javascript中，因为它必须脱机工作（使用HTML5应用程序缓存）

所以我遇到了完全相同的问题。我的网络应用程序与此类似，只是我必须用平板电脑的摄像头扫描条形码

正如您所评论的，我正在使用HTML5媒体api。为了让它在Windows 8 Surface Pro的chrome中工作，我必须这样做：

要在Chrome中启用getUserMedia，请键入'chrome://flags/'并启用“在getUserMedia（）.Mac、Windows、Linux、Chrome OS中启用屏幕捕获支持”选项

---

它在我的笔记本电脑上工作，但在平板电脑上不工作，在做出改变并重新启动chrome之后，它工作了。祝你好运。

这是我最后用来解决这个问题的代码。。。它似乎在chrome中工作得很好，但是仍然不支持InternetExplorer，因为众所周知，它不支持getUserMedia。我再次希望这不是必须的，windows只支持像iOS和android这样的拍照功能，但它现在可以工作了

学分：

---

getUserMedia界面在我的Surface 2上的Chrome中工作，证明：

我已经实现了下面描述的解决方案： 顺便说一句，他们的网站上也有一个工作示例：

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

编辑：刚刚意识到，我的方法不再适用于表面。对于html5rocks页面，同样的故事，给出的示例在Surface上不起作用。我猜，新的Chrome版本停止支持某些东西。但我发现了一个在Surface上适用于Chrome和Firefox的示例，如下所示：

---

我为这个解决方案苦苦挣扎，最后我找到了一个好的解决方案。但只能在windows应用商店应用程序中使用，如chrome windows 8模式（chrome设置->在windows 8模式下重新启动chrome），然后可以在html中使用普通文件输入标记。当你点击“选择文件”时，你会看到下图。然后你可以选择相机添加从相机拍摄的图像

如果您在列表中看不到摄像头，您可以安装下面的应用程序

---

对于任何使用Windows 10的用户，Chrome选项已被删除，摄像头文件打开选取器应用程序未注册为文件选取器，并在手动启动时立即崩溃（至少在我的设备上）。我还没有找到一个修复程序来让相机文件输入正常工作。

    // 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);