Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Opening camera from android webView

Tags:

I'm trying to open the android native camera from an html page loaded in a android webView by using HTML input type file tag.

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

I have no idea why but the camera is not opening and I don't know what to do.

I've tried the same page on a iPhone webView and it's working.

What can I do?

like image 832
Thingdou1993 Avatar asked Jan 09 '17 17:01

Thingdou1993


People also ask

Why I am not able to open camera from WebView in Android?

You must have the camera permission in the manifest and grant it in the onPermissionRequest methode in your WebChromeClient and be sure to set setMediaPlaybackRequiresUserGesture to false in the webView setting.

How do you access the camera from WebView flutter?

To request permissions about the camera and microphone, you can use the permission_handler plugin. Also, it has the androidOnPermissionRequest event for Android, that is an event fired when the WebView is requesting permission to access the specified resources (that is the Android native WebChromeClient.

How do I request permission in Android 11?

Starting in Android 11, whenever your app requests a permission related to location, microphone, or camera, the user-facing permissions dialog contains an option called Only this time. If the user selects this option in the dialog, your app is granted a temporary one-time permission.


1 Answers

If i understand your question correctly

You want to open the android device camera on click of a button in the webpage(html)?

On the basis of that assumption, You need to do the following

Use a JavascriptInterface

public class WebVCamBridgeInterface {
        /**
         * Javacript function to start native camera
         */
        @JavascriptInterface
        public void takePicture() {
            captureImage();
        }

        /**
         * Javascript function to start the GalleryActivity for user to choose the  image to be uploaded
         */
        @JavascriptInterface
        public void showPictures() {
            Intent intent = new Intent(LandingActivity.this, GalleryActivity.class);
            startActivityForResult(intent, Constants.REQ_GALLERY);
        }

    }

add JSinterface to your webview

webView.addJavascriptInterface(new WebVCamBridgeInterface (), "AndroidDevice");

Have the following JS in your html/web page

<script>
  function takePicture() {
    if(typeof AndroidDevice !== "undefined"){
      AndroidDevice.takePicture();
    }
  }

  function showPictures() {
    if(typeof AndroidDevice !== "undefined"){
      AndroidDevice.showPictures();
    }
  }

  function imageData(data){
    document.getElementById('displayImage').setAttribute( 'src', 'data:image/png;base64,'+data );
    if(typeof AndroidDevice !== "undefined"){
    }
  }
</script>

Im providing the link to a sample project with video of a demo ,have a look. https://drive.google.com/drive/folders/0BwRMp8dK9LMLeEo5cTlXVE9ZUW8?resourcekey=0-6dEjytPymBZvebmmyy9ymQ&usp=sharing

You can also refer these tutorials

  • Upload Image/File from Gallery or Camera in WebView in Android

  • Android Smart WebView with advanced features

  • Open File Chooser with camera option in webview

cheers!.

like image 134
ViVekH Avatar answered Sep 24 '22 10:09

ViVekH