Reputation: 1805

Open phone camera using jquery mobile and phonegap/cordova

Some one has idea how can i direct open the phone camera of android/ios/windows from phone web browser using the phonegap/cordova js.

Thnx..

Upvotes: 1

Answers (4)

Narsingh Tomar

Reputation: 487

<!DOCTYPE html>
<html>
 <head>
<title>Capture Photo</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64 encoded image data
  // console.log(imageData);

  // Get image handle
  //
  var smallImage = document.getElementById('smallImage');

  // Unhide image elements
  //
  smallImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  // Uncomment to view the image file URI 
  // console.log(imageURI);

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
  largeImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  largeImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function capturePhotoEdit() {
  // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function getPhoto(source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
// 
function onFail(message) {
  alert('Failed because: ' + message);
}

</script>
 </head>
  <body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
 </body>
</html>

Upvotes: 0

Chirag Nagpal

Reputation: 729

Try this in your app code and use < input type= 'file' > in your html code

public class MyWb extends Activity {
/** Called when the activity is first created. */

WebView web;
ProgressBar progressBar;

private ValueCallback<Uri> mUploadMessage;  
 private final static int FILECHOOSER_RESULTCODE=1;  

 @Override  
 protected void onActivityResult(int requestCode, int resultCode,  
                                Intent intent) {  
  if(requestCode==FILECHOOSER_RESULTCODE)  
  {  
   if (null == mUploadMessage) return;  
        Uri result = intent == null || resultCode != RESULT_OK ? null  
                : intent.getData();  
        mUploadMessage.onReceiveValue(result);  
        mUploadMessage = null;  
  }
  }  

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

web = (WebView) findViewById(R.id.webview01);
progressBar = (ProgressBar) findViewById(R.id.progressBar1);

web = new WebView(this);  
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("http://www.script-tutorials.com/demos/199/index.html");
web.setWebViewClient(new myWebClient());
web.setWebChromeClient(new WebChromeClient()  
{  
       //The undocumented magic method override  
       //Eclipse will swear at you if you try to put @Override here  
    // For Android 3.0+
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {  

        mUploadMessage = uploadMsg;  
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);  
        i.addCategory(Intent.CATEGORY_OPENABLE);  
        i.setType("image/*");  
        MyWb.this.startActivityForResult(Intent.createChooser(i,"File Chooser"), FILECHOOSER_RESULTCODE);  

       }

    // For Android 3.0+
       public void openFileChooser( ValueCallback uploadMsg, String acceptType ) {
       mUploadMessage = uploadMsg;
       Intent i = new Intent(Intent.ACTION_GET_CONTENT);
       i.addCategory(Intent.CATEGORY_OPENABLE);
       i.setType("*/*");
       MyWb.this.startActivityForResult(
       Intent.createChooser(i, "File Browser"),
       FILECHOOSER_RESULTCODE);
       }

    //For Android 4.1
       public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture){
           mUploadMessage = uploadMsg;  
           Intent i = new Intent(Intent.ACTION_GET_CONTENT);  
           i.addCategory(Intent.CATEGORY_OPENABLE);  
           i.setType("image/*");  
           MyWb.this.startActivityForResult( Intent.createChooser( i, "File Chooser" ), MyWb.FILECHOOSER_RESULTCODE );

       }

});  


setContentView(web);  


}

public class myWebClient extends WebViewClient
{
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    // TODO Auto-generated method stub
    super.onPageStarted(view, url, favicon);
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // TODO Auto-generated method stub

    view.loadUrl(url);
    return true;

}

@Override
public void onPageFinished(WebView view, String url) {
    // TODO Auto-generated method stub
    super.onPageFinished(view, url);

    progressBar.setVisibility(View.GONE);
    }
}

//flipscreen not loading again
@Override
public void onConfigurationChanged(Configuration newConfig){        
super.onConfigurationChanged(newConfig);
}

// To handle "Back" key press event for WebView to go back to previous screen.
/*@Override
public boolean onKeyDown(int keyCode, KeyEvent event) 
{
if ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) {
    web.goBack();
    return true;
}
return super.onKeyDown(keyCode, event);
}*/

Upvotes: 0

Amit Prajapati

Reputation: 14305

open terminal or cmd and create project for phonegap,

For create project you must require installed nodejs and git in your system,

write this command and install plguin. phonegap local plugin add

There is reference of html and js for camera code

if you don't want to use phoengap and open camera than use pure html5 Camera but its some limiation of versioning problem

Upvotes: 1

Arjun T Raj

Reputation: 3207

create Phonegap Project by following this , after creating project just add camera plugin just look at this link. now you can able to open camera by calling this method

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

The camera.getPicture function opens the device's default camera application that allows users to snap pictures. This behavior occurs by default, when Camera.sourceType equals Camera.PictureSourceType.CAMERA. Once the user snaps the photo, the camera application closes and the application is restored.

If Camera.sourceType is Camera.PictureSourceType.PHOTOLIBRARY or Camera.PictureSourceType.SAVEDPHOTOALBUM, then a dialog displays that allows users to select an existing image. The camera.getPicture function returns a CameraPopoverHandle object, which can be used to reposition the image selection dialog, for example, when the device orientation changes.

The return value is sent to the cameraSuccess callback function, in one of the following formats, depending on the specified cameraOptions:

A String containing the base64-encoded photo image.

A String representing the image file location on local storage (default).

You can do whatever you want with the encoded image or URI, for example:

Render the image in an <img> tag, as in the example below

Save the data locally (LocalStorage, Lawnchair, etc.)

Post the data to a remote server

Open phone camera using jquery mobile and phonegap/cordova

Answers (4)

Related Questions