How to open phone camera from HTML page?

In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:

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

you can also try

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

or

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

<input type="button" value="Say hello" onClick="showCamera('Android! Start Camera')" /> <script type="text/javascript"> function showCamera(toast) { Android.showCamera(toast); } </script> 

Intialise Webview in Java file

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

WebInterface :

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); } } } 

I have this kind of problem, nowadays. And I think that I find out the solution. But you have to do something more with my solution. You can check this. https://simpl.info/imagecapture/ After checking this, please share with me your experience. Thanks

i have tested this method and it worked for mobile devices

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

You can interface android native code with javascript in order to capture the click on a button and have android code to send an intent to open the cammera, take the photo, and store it in some path.

Then, in onActivityResult you will take care of getting the photo from the path and uploading it to the webserver. To do this one way is to encode the bitmap in a base64 string and send it in a POST form using an android http client.

I will show how to do the interface between javscript and android (which is what the quesiton is about), all the rest regarding manipulating the foto has its own complexities and there are many tutorials about it.

Main Activity

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 */ } } } 

NOTE: That this kind of interfacing is insecure on Andriod below 17.

EDIT 1

The 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

In the manifest I only added:

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

For your app you also need INTERNET permission.