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

Posted 2023-03-04

【中文标题】在 Windows 8.1 平板电脑上的 Web 应用程序中捕获图像

【英文标题】：Capturing images in web application on Windows 8.1 tablets

【发布时间】：2013-12-26 14:49:29

【问题描述】：

我即将开发一个在 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 原型实现或使用闪存的解决方案。

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

【参考方案1】：

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

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

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

【讨论】：

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

【参考方案2】：

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

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

要在 Chrome 中启用 getUserMedia，请在 URL 栏中键入“chrome://flags/”并启用“在 getUserMedia() 中启用屏幕捕获支持。 Mac、Windows、Linux、Chrome OS”选项。

在进行更改并重新启动 chrome 后，它在我的笔记本电脑上工作，但在平板电脑上却不行。祝你好运。

【参考方案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);

【参考方案4】：

getUserMedia 接口在我的 Surface 2 上的 Chrome 中工作，证明：

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

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

编辑：刚刚意识到，我的方法不再适用于 Surface。 html5rocks 页面的情况相同，给出的示例在 Surface 上不起作用。我猜，新的 Chrome 版本停止支持某些东西。但是我找到了适用于 Chrome 和 Firefox 的 Surface 的示例，您在这里： http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html