Windows 8.1のタブレットでWebアプリケーションで画像をキャプチャする

Question

Windows 8.1のタブレットで実行するアプリケーションを開発しようとしています。重要な機能は、ボタンをクリックしてカメラにアクセスして写真を撮ることです。理想的には、多くの理由（ライセンス、クロスプラットフォーム、開発時間：ネイティブアプリケーションでの経験がないなど）の理由からネイティブアプリケーションではなく、Webアプリケーションとして作成したいと考えています。

私はHTML 5から画像をキャプチャするためのオプションを見ていると私は書くことができますどのHTML Media Captureを発見した：

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

をカメラへのアクセスを取得するには。これはiPadsやAndroidタブレットではうまくいきますが、Windows 8のタブレットでは動作しません。私はWindows 8タブレットでChromeを使用しようとしましたが、まだ効果はありません。それは、アップロードするファイルを選択できるファイルダイアログを開きます。私がしたいことは、新しいイメージをキャプチャできることです。この標準はIEではサポートされていません（他のブラウザでもデバイスのカメラにアクセスできないようです）。

私はまた、Media Capture and Streamsを遭遇しました。これは、ほとんどの場合、ストリームを表示することに関連していると思われます。ウェブカムではなく、おそらく画像をキャプチャするために使用され、他のブラウザではChromeとFirefoxでサポートされていますが、Internet Explorerでは（IE11でも）サポートされていません。しかし、3つのブラウザの実装のどれも私のWindows 8.1テストマシンでは動作しないようです。誰かがgetUserMediaを任意のブラウザのWindows 8タブレットで動作させるようになったら、それについて聞いてみたいと思う。

とにかく、私の主な質問は：WebアプリケーションからHTML5を使ってWindows 8タブレットでカメラにアクセスする方法はありますか？私が見てきた唯一の実例は、アクティブXまたはフラッシュを使用するソリューションを使用するIEのプロトタイプ実装に依存しています。

編集：私はそれが（HTML5アプリケーションキャッシュを使用して）オフラインで作業する必要があるため、HTML5/JavaScriptでそれを維持するために非常に好む

Answer 1

は、だから私はまったく同じ問題に実行していました。私のウェブアプリは似ていますが、タブレットのカメラでバーコードをスキャンする必要があることを除いては同じです。

あなたがコメントしたときに私はHTML 5メディアAPIを使用しています。

ChromeでgetUserMediaを有効にするには、URLバーに「chrome：// flags /」と入力して、「Enable screen capture support」を有効にする必要があります。 getUserMedia（）でMac、Windows、Linux、Chrome OS」オプションを選択します。

私のラップトップでは動作していましたが、タブレットでは動作しませんでした。その変更を行ってからChromeを再起動すると動作しました。がんばろう。

Answer 2

これは、この状況を回避するために使用したコードです...それは非常によくクロムで動作するように見えますが、まだgetUserMediaをサポートしていないInternet Explorerはサポートされていません。繰り返しますが、これは必要ではなく、ウィンドウズはiOSやアンドロイドのような写真の機能をサポートしていましたが、現在は機能しています。

クレジット： 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 3

getUserMediaインターフェイスは私の表面2上のChromeで動作しますが、証明：

私がここで説明するソリューション実装しました：ところで http://www.html5rocks.com/en/tutorials/getusermedia/intro/ を、作業がありますサイトの例も同様です。

• getUserMediaはIEでは動作しません
• getUserMediaは、おそらくFFで動作しますが、私は私の表面2
を上の任意のブラウザでは動作しません[参照]ボタンからカメラへ
• アクセスをテストしていません

編集：私のアプローチは表面上では動作しません。 html5rocksページの同じ話ですが、与えられた例はSurfaceでは機能しません。私は、新しいChromeのバージョンが何かをサポートするために停止したと思います。 Surface for ChromeとFirefoxで動作する例を見つけました。ここには次のように書いてあります。 http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html

Answer 4

私はこの解決策のために非常に苦労しました。しかし、Windowsの場合のみchrome windows 8モード（chrome settings - > windows 8モードでchromeを再起動する）のようなアプリケーションを保存することができます。次に、htmlで通常のファイル入力タグを使用できます。あなたが「ファイルを選択」を押すと、下の画像が表示されます。次に、カメラから撮影画像を追加するカメラを選択できます。

リストにカメラを見ることができない場合は、uが下記のアプリをインストールすることができます。 Windowsの10を使用して誰のための

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