web-dev-qa-db-ja.com

Webアプリから携帯のカメラにアクセスするにはどうすればいいですか?

私の携帯用ウェブアプリ(ネイティブアプリではない)では、写真を撮ってそれをアップロードしたいのですが、Adobe Flashを使いたくありません。これを行う方法はありますか?

167
夏期劇場

IPhone iOS6およびAndroid ICS以降では、HTML5に次のタグがあり、これを使用してデバイスから写真を撮ることができます。

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

Captureは、camera、camcorder、audioなどの値を取ります。

このタグはiOS 5では絶対に機能しないと思いますが、よくわかりません。

232
Ashish

最近では少なくともAndroidでは比較的簡単です。通常のファイル入力タグを使用するだけで、ユーザーがそれをクリックすると、電話はユーザーがファイルをアップロードするためにカメラ(またはファイルマネージャなど)を使用したいかどうか尋ねます。カメラで写真を撮るだけで、自動的に追加およびアップロードされます。

Iphoneについてはわかりません。多分誰かがそれについて啓発することができます。編集:iPhoneは同様に動作します。

入力タグの例:

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

IOS 6以降およびAndroid 2.2以降のSafariとChromeは、お使いのデバイスのカメラで写真を撮ることや既存のものを選択することを可能にするHTML Media Captureをサポートしています。

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

これがiOS 10でどのように機能するかです:

enter image description here

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 私のテスト

19
Octavian Naicu

これを更新するためだけに、現在の標準は次のとおりです。

<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でテストしたところ、うまく動作します。

https://www.w3.org/TR/html-media-capture/

14
user3204365

さて、ネイティブデバイスカメラにアクセスするための新しいHTML5機能があります - "getUserMedia API"

注:HTML5は、Androidデバイス上のWebページからの写真のキャプチャを処理できます(少なくとも最新バージョンでは、Honeycomb OSによって実行されますが、iPhone以外のiOS 6では処理できません)。

4
Louis

AppMobi HTML5 SDKはかつてHTML5ベースのアプリケーションからカメラを含むネイティブデバイス機能へのアクセスを約束しましたが、もはやGoogle所有ではありません。代わりに、 この記事のHTML5ベースの回答 を試してください。

4
Dave Everitt

あなたはWEBRTCを使用することができますが、残念ながらそれはすべてのWebブラウザでサポートされていません。以下ISブラウザがサポートしているリンクの表示方法 http://caniuse.com/stream

そして、このリンクはあなたがそれにアクセスする方法についての考えをあなたに与えます(サンプルコード)。 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

4
Michael Sultana

カメラにアクセスするには、 getUserMedia を使用します。

このチュートリアルでは、ブラウザからデバイスカメラにアクセスするための基本を概説します。 https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1- ec284af8dddf

注意:これは、ほとんどのAndroidデバイス上、およびSafariのiOS上でのみ機能します。

0
Aaron Benjamin

追加のメカニズムなしでWebブラウザから携帯電話のカメラにアクセスする方法がわかりません(つまり、FlashまたはハードウェアAPIへのアクセスを許可する何らかの種類のコンテナ)。

後者の場合はPhoneGapを見てください: http://docs.phonegap.com/phonegap_camera_camera.md.html

これで、少なくともiOSとAndroidベースのデバイスでカメラにアクセスできるはずです。

0
Dennis Traub

アプリケーションをlocalhostの下でローカルに実行するか、またはGetUserMedia()を機能させるにはSSLを介して実行する必要があるセキュリティ機能が実装されています。

利用可能なデモをいくつか試したときにこれを発見しましたが、うまくいかないときは失望しました。参照してください: 新しいセキュリティ制限

0
Anthony Griggs

私はあなたができるとは思わない - オーディオまたはビデオを取得するための W3CドラフトAPI があるが、主要なモバイルOSのいずれにもまだ実装がない。

二番目に良い 唯一の選択肢は、PhoneGapを使用するというDennisの提案に従うことです。これは、ネイティブアプリを作成してモバイルアプリストア/マーケットプレイスに追加する必要があることを意味します。

0
Kevin