使用 jquery mobile 和 phonegap/cordova 打开手机摄像头

Question

有人知道如何使用 phonegap/cordova js 从手机网络浏览器直接打开 android/ios/windows 的手机摄像头。

谢谢..

Answer 1

跟随this创建Phonegap项目，创建项目后添加相机插件 看看这个link。 现在 你可以通过调用这个方法来打开相机

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

camera.getPicture 函数打开设备的默认相机应用程序，允许用户拍摄照片。当 Camera.sourceType 等于 Camera.PictureSourceType.CAMERA 时，默认情况下会发生此行为。用户拍摄照片后，相机应用程序将关闭并恢复应用程序。

如果 Camera.sourceType 是 Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM，则会显示一个对话框，允许用户选择现有图像。 camera.getPicture 函数返回一个 CameraPopoverHandle 对象，该对象可用于重新定位图像选择对话框，例如当设备方向改变时。

根据指定的cameraOptions，返回值被发送到cameraSuccess回调函数，采用以下格式之一：

A String containing the base64-encoded photo image.

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

你可以对编码后的图像或 URI 做任何你想做的事情，例如：

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

更多信息请查看以上链接

Answer 2

打开终端或cmd并为phonegap创建项目，

要创建项目，您必须在系统中安装 nodejs 和 git，

编写此命令并安装 plguin。 phonegap 本地插件添加

camera code有html和js参考

如果你不想使用 phoengap 和打开相机而不是使用纯 html5 Camera 但它有一些版本问题的限制

Answer 3

在您的应用代码中尝试此操作并在您的 html 代码中使用

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

Answer 4

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