私の携帯用ウェブアプリ(ネイティブアプリではない)では、写真を撮ってそれをアップロードしたいのですが、Adobe Flashを使いたくありません。これを行う方法はありますか?
IPhone iOS6およびAndroid ICS以降では、HTML5に次のタグがあり、これを使用してデバイスから写真を撮ることができます。
<input type="file" accept="image/*" capture="camera">
Capture
は、camera、camcorder、audioなどの値を取ります。
このタグはiOS 5では絶対に機能しないと思いますが、よくわかりません。
最近では少なくともAndroidでは比較的簡単です。通常のファイル入力タグを使用するだけで、ユーザーがそれをクリックすると、電話はユーザーがファイルをアップロードするためにカメラ(またはファイルマネージャなど)を使用したいかどうか尋ねます。カメラで写真を撮るだけで、自動的に追加およびアップロードされます。
Iphoneについてはわかりません。多分誰かがそれについて啓発することができます。編集:iPhoneは同様に動作します。
入力タグの例:
<input type="file" accept="image/*" capture="camera">
IOS 6以降およびAndroid 2.2以降のSafariとChromeは、お使いのデバイスのカメラで写真を撮ることや既存のものを選択することを可能にするHTML Media Captureをサポートしています。
<input type="file" accept="image/*">
これがiOS 10でどのように機能するかです:
Android 3.0以降およびiOS 10.3以降のSafariは、カメラに直接ジャンプするために使用されるcapture
属性もサポートしています。
<input type="file" accept="image/*" capture>
capture="camera"
(String)とaccept="image/*;capture=camera"
(Parameter)は古い仕様の一部であり、W3C勧告勧告のcapture
(Boolean)に置き換えられました。
サポート文書:this 2013 O'Reilly book and 私のテスト
これを更新するためだけに、現在の標準は次のとおりです。
<input type="file" name="image" accept="image/*" capture="environment">
環境に面した(背面)カメラにアクセスする
<input type="file" name="image" accept="image/*" capture="user">
ユーザー向け(前面)カメラ用。ビデオにアクセスするには、「image」の代わりに「video」を名前に使用します。
IOS 10.3.3、ファームウェア760を実行しているiPhone 5cでテストしたところ、うまく動作します。
さて、ネイティブデバイスカメラにアクセスするための新しいHTML5機能があります - "getUserMedia API"
注:HTML5は、Androidデバイス上のWebページからの写真のキャプチャを処理できます(少なくとも最新バージョンでは、Honeycomb OSによって実行されますが、iPhone以外のiOS 6では処理できません)。
AppMobi HTML5 SDKはかつてHTML5ベースのアプリケーションからカメラを含むネイティブデバイス機能へのアクセスを約束しましたが、もはやGoogle所有ではありません。代わりに、 この記事のHTML5ベースの回答 を試してください。
あなたはWEBRTCを使用することができますが、残念ながらそれはすべてのWebブラウザでサポートされていません。以下ISブラウザがサポートしているリンクの表示方法 http://caniuse.com/stream
そして、このリンクはあなたがそれにアクセスする方法についての考えをあなたに与えます(サンプルコード)。 http://www.html5rocks.com/en/tutorials/getusermedia/intro/
カメラにアクセスするには、 getUserMedia を使用します。
このチュートリアルでは、ブラウザからデバイスカメラにアクセスするための基本を概説します。 https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1- ec284af8dddf
注意:これは、ほとんどのAndroidデバイス上、およびSafariのiOS上でのみ機能します。
追加のメカニズムなしでWebブラウザから携帯電話のカメラにアクセスする方法がわかりません(つまり、FlashまたはハードウェアAPIへのアクセスを許可する何らかの種類のコンテナ)。
後者の場合はPhoneGapを見てください: http://docs.phonegap.com/phonegap_camera_camera.md.html
これで、少なくともiOSとAndroidベースのデバイスでカメラにアクセスできるはずです。
アプリケーションをlocalhostの下でローカルに実行するか、またはGetUserMedia()を機能させるにはSSLを介して実行する必要があるセキュリティ機能が実装されています。
利用可能なデモをいくつか試したときにこれを発見しましたが、うまくいかないときは失望しました。参照してください: 新しいセキュリティ制限
私はあなたができるとは思わない - オーディオまたはビデオを取得するための W3CドラフトAPI があるが、主要なモバイルOSのいずれにもまだ実装がない。
二番目に良い 唯一の選択肢は、PhoneGapを使用するというDennisの提案に従うことです。これは、ネイティブアプリを作成してモバイルアプリストア/マーケットプレイスに追加する必要があることを意味します。