2017-05-30 15 views
0

私のAndroid携帯は、webviewを介してWebサーバーに接続しています。私のHTMLには写真をアップロードするボタンがあります。ユーザーは画像をアップロードするか、カメラから写真を撮るかを選択する必要があります。 私のHTMLコードは次のとおりです。私はボタンをクリックしたときに HTMLページから電話機のカメラを開く方法は?

<div class="takePhoto"> 
    <form id="take" action="" method="POST"> 
     <input type="file" id= "cap" name="personalPhoto" accept="image/*" capture ="camera" id="camera"><p> 
    </form> 
</div> 

は、しかし、ファイル選択が開き、私は、画像を選択する能力を持っているが、カメラを使用しません。これに対する解決策はありますか?

P.S.私のコードでは、単語(キャプチャ)に特殊なスタイルや色がありません。これは奇妙なことですが、これが問題になるかもしれません!以降のiPhone iOS6でとAndroid ICSから

+0

はい、このボタンをクリックすると、ファイルブラウザが正常に開いた....しかし、カメラに関連する何も – Kalkhouri

答えて

0

、HTML5は、あなたのデバイスから写真を撮ることができます次のタグがあります。

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

あなたも

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

または

を試すことができます
<input type="file" accept="image/*;capture=camera"> 
+0

最初の提案は私のコードの中にあり、動作していません! 他の2つのオプションも機能していません – Kalkhouri

0

ボタンのクリックをキャプチャするために、javascriptでAndroidのネイティブコードをインターフェースできます。カモメラを開く意思を伝えるためのアンドロイドコード、写真を撮って、それをあるパスに保存する。

次に、onActivityResultで、写真をパスから取得し、Webサーバーにアップロードします。これを行うには、ビットマップをbase64文字列でエンコードし、アンドロイドのHTTPクライアントを使用してPOSTフォームで送信します。

私はjavscriptとandroid(それはquesitonについてです)のインターフェースをどのようにするかを示します.fotoを操作する上での残りの部分は、それ自身の複雑さを持ち、多くのチュートリアルがあります。

主な活動

public class MainActivity extends AppCompatActivity { 

    private WebView webView; 
    private Bitmap imageBitmap; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     webView = (WebView) findViewById(R.id.webview); 


     WebSettings webSettings = webView.getSettings(); 
     webSettings.setJavaScriptEnabled(true); 

     webView.addJavascriptInterface(new WebAppInterface(this),"Android"); 

     webView.loadData(
       "<Button id=\"btnTakePhoto\" onClick=\"takePhoto()\">TakePhoto</Button><div class=\"takePhoto\">\n" + 
         "<script type=\"text/javascript\">" + 
         "function takePhoto() {\n" + 
         "  Android.takePhoto();\n" + 
         " }\n" + 
         "</script>" + 
         "</div>", "text/html","UTF-8"); 
    } 

    public class WebAppInterface { 
     Context mContext; 

     /** Instantiate the interface and set the context */ 
     WebAppInterface(Context c) { 
      mContext = c; 
     } 

     /** The android function calld from javascript */ 
     @JavascriptInterface 
     public void takePhoto() { 
      dispatchTakePictureIntent(); 
     } 
    } 


    /* This gests a Thumbnail only*/ 

    static final int REQUEST_IMAGE_CAPTURE = 1; 



    private void dispatchTakePictureIntent() { 
     Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 
     if (takePictureIntent.resolveActivity(getPackageManager()) != null) { 
      startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE); 
     } 
    } 



    @Override 
    protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
     if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) { 
      Bundle extras = data.getExtras(); 
      imageBitmap = (Bitmap) extras.get("data"); 

      /* Encode bitmap as base64 and transmit to server */ 

     } 
    } 

} 

注:インターフェースのこの種を以下のAndriodに安全でないあること17.

EDIT 1

HTML

<html> 
    <body> 
     <div class="takePhoto"> 
       <Button onClick="takePhoto()">Take Photo </Button> 
     </div> 

     <script type="text/javascript"> 
      function takePhoto(){ 
       Android.takePhoto(); 
      } 
     </script> 
    </body> 
</html> 

EDIT 2

はマニフェストでは、私は唯一の追加:

<uses-feature android:name="android.hardware.camera" 
    android:required="true" /> 

をあなたのアプリケーションのためにあなたはまた、インターネットの許可が必要です。 Javaファイル内

+0

私はこのコードを自分のアンドロイドスタジオMainActivityに統合しました...しかし、どのようにWebページから呼び出すのですか?この関数を呼び出すためのシンプルなHTML/Javascriptコードを教えてください。 – Kalkhouri

+0

webview.loadDataというサンプルコードには、javascript関数を指すonCllickのボタンがあります。そしてその下にアンドロイド関数を呼び出すjavascript関数があります。あなたは、Webページにhtml/javascriptを置き、代わりにloadUrlを呼び出すことができます。 – Juan

+0

多くのご質問をお待ちして申し訳ありませんが、私は非常にあなたの助けに感謝しています...実際にonCreate関数で私はサーバーから私のWebページをロードしています: webView.loadUrl ://192.168.43.115/myPage.php ");このページの 私はカメラを呼び出すボタンがありますので、あなたのコードとどのように接続するのですか? – Kalkhouri

0
<input type="button" value="Say hello" onClick="showCamera('Android! Start Camera')" /> 

<script type="text/javascript"> 
    function showCamera(toast) { 
     Android.showCamera(toast); 
    } 
</script> 

Intialise WebViewの

WebView webView = (WebView) findViewById(R.id.webview); 
webView.addJavascriptInterface(new WebAppInterface(this), "android") 

ウェブインターフェース:

public class WebAppInterface { 
    Context mContext; 
    static final int REQUEST_IMAGE_CAPTURE = 1; 

    /** Instantiate the interface and set the context */ 
    WebAppInterface(Context c) { 
     mContext = c; 
    } 

    /** Show a toast from the web page and here tell to open camera */ 
    @JavascriptInterface 
    public void showCamera(String toast) { 
     Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); 
     dispatchTakePictureIntent(); 
    } 


    /** Handle Camera result*/ 
    private void dispatchTakePictureIntent() { 
    Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 
    if (takePictureIntent.resolveActivity(getPackageManager()) != null) { 
     mContext.startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE); 
     } 
    } 
} 
+0

あなたの提案をありがとう。実際に私はそれを試しました、私がメッセージを除いて何も起こらないボタンを押すと、 'Android! 「カメラ開始」を押すと画面に表示されます。つまり、関数は呼び出されますが、すべてが正しく動作するわけではありません。次の行にあります。 mContext.startActivityForResult(takePictureIntent、REQUEST_IMAGE_CAPTURE); Androidスタジオさん:startActivityForResultメソッドを解決できません。 これまで私はそれを働かせることはできません。 – Kalkhouri

関連する問題