CODEWITHSUNDEEP
androidhtml
Kalkhouri
Kalkhouri

Reputation: 341

How to open phone camera from HTML page?

my android phone is connected to a web server through a webview. in my HTML I have a button to upload a photo. the user should have the choice to upload an image or take a photo from camera. my HTML code is:

 <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>

However when I click on the button the file chooser opens and I have the ability to choose images but not to use the camera. Any solution for this?

P.S. in my code the word (capture) doesn't have a special style or color which I find weird and this might be the problem!

Upvotes: 8

Views: 46064

Answers (5)

Mohammad Sadegh Hemati
Mohammad Sadegh Hemati

Reputation: 11

i have tested this method and it worked for mobile devices

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

Upvotes: 1

liming
liming

Reputation: 242

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

Upvotes: 1

Juan
Juan

Reputation: 5589

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.

Upvotes: 0

Prakhar Kulshreshtha
Prakhar Kulshreshtha

Reputation: 1065

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

Upvotes: 1

Abderrahim Soubai-Elidrisi
Abderrahim Soubai-Elidrisi

Reputation: 5202

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">

Upvotes: 10

Related Questions