web-dev-qa-db-ja.com

キャプチャおよび受け入れ属性を使用したHTMLファイル入力コントロールは正しく動作しませんか？

私の問題：

次に、ユーザーはinput type=fileをクリックします。ユーザーはupload file + cameraダイアログを取得する必要があります。このhtml属性acceptおよびcaptureに使用しています。しかし、一部の最新のデバイスでは、これは起こりません。以下に、コード例とその動作の有無を示す表を示します。コード例は、Mobile SafariおよびChromeでテストされています。

TL; DR：

input type fileだけの5つのコード例があります。

1。（ jsfiddle ）

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

2。 （ jsfiddle ）

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

3。 （ jsfiddle ）

<input type="file" capture="camera">

4。 （ jsfiddle ）

<input type="file" capture>

5。 （ jsfiddle ）

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

テストデバイス：

  • Samsung S3（Android 4.1.2）
  • Samsung S3（Android 4.3）
  • Samsung Galaxy Tab 2 7.0（Android 4.2.2）
  • Samsung Note（Android 4.1.2）
  • iPhone 5（iOS 7.0.4）
  • Nexus 4（Android 4.4）

結果の表：

  • W（ork）-有効upload image dialog with cameraを意味します
  • P（人工的に機能します）-有効upload dialog(not image only) with cameraを意味します
  • N（ot work）-only cameraが有効であることを意味します
  • Ch-はChromeを意味します
  • MS-はMobile Safariを意味します

＃

--------------------------------------------------------------------------------
|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| 
--------------------------------------------------------------------------------
|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |
--------------------------------------------------------------------------------
|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

ご覧のとおり、すべてのブラウザでupload file + cameraダイアログのみを取得できます。

<input type="file" accept="image/*">のみ。しかし、この場合はcapture属性がありません。これは私を心配させ、Android 4.3に問題があります。

私の質問は：

  1. 表の動作は正しいですか？ Android 4.3の動作はバグですか？
  2. キャプチャ属性なしでアップロードダイアログに常にカメラを追加するものをブラウザに信頼できますか？ （回答用の証明リンクを追加してください）

ありがとう。

追伸質問は特別ですが、私のサイトでは、ユーザーがその画像とカメラにアクセスできるようにする必要があります。また、私のテーブルは誰にとっても役立つと思います。また、誰も答えない場合は答えを探し、ここに答えを投稿します。

androidhtmlioshtml5mobile
65
Pinal

これが実際の答えです。次のユーザーのためにここに投稿してください：

実際には、現在の実装はキャプチャ属性にまったく依存せず、タイプと受け入れ属性のみに依存しているようです。ブラウザは、ユーザーがファイルを取得する場所を選択できるダイアログボックスを表示し、capture属性は考慮されません。たとえば、iOS Safariは、画像およびビデオ（オーディオではない）のaccept属性（キャプチャではない）に依存しています。 accept属性を使用しない場合でも、ブラウザで「Take Photo or Video」と「Choose Existing」を選択できます（これを指摘してくれたto @ firtに感謝します）。

this から

2016年2月17日編集：この動作はデバイス上でまだアクティブです。

34
Pinal

「正しい」コードと使用すべきコードは5番目のコードです。

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

それが、ほとんどのデバイスで正しく機能している理由です。上記のコードはcorrect、completeおよびenoughでiOSとAndroidそれ：

  1. 画像をキャプチャする（ビデオにはaccept="video/*"を、オーディオにはaccept="audio/*"を使用し、すべてを許可するにはスキップします）。
  2. ユーザーは既存のものを選択（できるようにする必要がありますORその場でキャプチャします
  1. キャプチャ属性なしでアップロードダイアログに常にカメラを追加するものをブラウザに信頼できますか？

はい

capture属性は、ダイアログにカメラオプションを含めるためには使用されません（<input type="file">で十分です）が、ウェブカメラからの直接キャプチャが優先であることを示すために使用されます。 W3C勧告仕様 から：

キャプチャ属性は、指定されている場合、デバイスからのメディアの直接キャプチャが優先されることを示すブール属性です。

captureはAndroid 3.0+でサポートされており、captureがコードに含まれている場合、カメラアプリに直接移動します。

IOS6-10では、少なくとも2つのオプションを常に提供するサポートはありません：「写真を撮る」+「写真ライブラリ」。

capture属性は仕様で進化しました（これがStackOverflow全体でいくつかのバージョンが表示される理由です）。

  1. 2010年7月：accept="image/*;capture=camera"
  2. 2011年4月：capture="camera"（文字列）
  3. 2012年12月：capture（ブール、W3C勧告候補、）

PS：HTMLメディアキャプチャに関する多くの研究を行いました。 HTMLメディアキャプチャの正しい構文 および iOS9のメディアキャプチャの新しいプロンプト を参照してください。ここに私の テストベンチ と20以上のコードの組み合わせがあります。

21
Octavian Naicu