web-dev-qa-db-ja.com

html5から写真を撮る

私はhtml5ページから画像を取得する多くの方法を読みました。自分のニーズに最適なものはまだわかりません。

  • ブラウザとosの幅広いサポート：少なくとも：chrome、firefox、Android default、safari
  • リアルタイムの取得は必要ありません。ユーザーはボタンを押して写真を撮り、システムカメラアプリケーションを要求する必要があります

少なくとも3つのソリューションがあります。

  • _<input type="file" accept="image/*;capture=camera">_
  • Navigator.getUserMedia()（非推奨のようです）
  • MediaDevices.getUserMedia()（実験的​​なようです）

とにかく、カメラをページ_(w/ getUserMedia)_に埋め込む例がたくさんあるので、最初の方法だけに依存できるかどうかわかりません。

javascriptandroidhtmlcameragetusermedia
9
Mark

WebRTC getUserMedia APIを使用すると、Safari以外のすべての最新ブラウザーがカバーされます： http://caniuse.com/#feat=stream

こちら は、getUserMediaを使用して静止画を撮るページの例です（コードを説明する ページ へのリンク付き）。ほとんどのgetUserMediaデモでは、可視のキャンバス領域にビデオストリームが表示されますが、これは必須ではありません。可視キャンバスにビデオストリームを表示せずに、getUserMediaを使用して画像をキャプチャできます。

残念ながら、AppleはWebRTC APIを採用するのが遅いため、ファイル入力タグは、Cordovaのようなものを使用するつもりがない限り、そこに期待できる最高のものだと思います。 こちら は、ファイル入力タグの使用方法の説明です。

Media Capture API は推奨候補です。つまり、標準化の段階にありますが、現在のW3C推奨を実装しているブラウザー（ inputタグの裸のキャプチャ属性）。 <input type="file" accept="image/*">スタイルは現在、モバイルブラウザでのみサポートされているようです。

要約すると、近い将来に幅広いブラウザのサポートが必要な場合は、AppleがWebRTC APIのサポートを開始するまで、または他のデスクトップブラウザがMedia Captureのサポートを開始するまで、両方の方法をサポートする必要があります。 API（または現在モバイルブラウザーでサポートされているキャプチャ属性を持つバリアント）。

9
kanaka