DevExtreme / Phonegap相机插件：“无法读取未定义的道具'getPicture'”

Question

我对我的应用程序感到疯狂。

我正在使用基于phonegap的DevExtreme。

我想用我的应用程序中的相机拍照，但遇到了一些麻烦。

首先，这里是我的config.xml。

<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
  <name>ApplicationTemplate</name>
  <description>Template</description>
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustPan" />
  <preference name="SplashScreenDelay" value="60000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="ShowSplashScreenSpinner" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="14" />
  <preference name="android-targetSdkVersion" value="22" />
  <plugin name="cordova-plugin-camera" spec="^2.4.1" source="npm" />
  <plugin name="cordova-plugin-splashscreen" onload="true" />
  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-ios-longpress-fix" />
  <plugin name="cordova-plugin-statusbar" onload="true" />
  <access origin="*" />
</widget>

您在这里看到任何问题吗？

此外，我还有一个按钮来调用相机功能（从教程复制）：

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
    try
    {
        // 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;
    }
    catch (err) {
        alert(err.message);
    }
}

// Called when a photo is successfully retrieved
//
function onPhotoFileSuccess(imageData) {
    // Get image handle
    console.log(JSON.stringify(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 = 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 capturePhotoWithData() {
    try {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }
    catch (err) {
        alert(err.message);
    }
}
function capturePhotoWithFile() {
    navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

// A button will call this function
//
function getPhoto(source) {
    debugger;
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        destinationType: OverviewAPP.destinationType.FILE_URI,
        sourceType: source
    });
}
// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

这是我相关的HTML：

[...]
<div class="myBtnPhoto" data-bind="dxButton: { text: 'Conferma con foto', onClick: capturePhotoWithData}" style="float:right;"></div>
[...]
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
[...]

正确调用了函数capturePhotoWithData，但是该函数进入catch分支，并且警报显示“无法读取未定义的属性'getPicture'”

我创建模板，然后构建解决方案。 我正在Android设备上尝试此操作。 我在网络上阅读了很多论坛和其他问题，但是仍然没有任何效果。

您在这里看到任何错误或遗漏吗？

Answer 1

这意味着navigator.camera未定义，因此您的项目看不到cordova-plugin-camera 。

最常见的问题可能是：您在设备准备就绪之前就调用它。 确保您将相机呼叫到设备deviceready ：

document.addEventListener("deviceready", function(){
  console.log(navigator); // here you can check all plugins
}

---

您可以运行： $ cordova plugin list ，以确保此插件也存在于list中。

也尝试重建： $ cordova build android （or ios）