无法读取未定义的属性'getPicture' - Ionic相机

Question

这段代码返回：

 Cannot read property 'getPicture' of undefined

我不知道自己在做什么错了，你能帮我看一下代码吗？

我的应用：

angular.module('Todo', ['ionic', 'Todo.controllers','ngStorage', 'Todo.services', 'ngCordova'])

我的控制器：

.controller('profileEditCtrl', function($scope,Camera, $localStorage,
 $cordovaCamera) 
     {  
        $scope.$storage = $localStorage.$default({ data:[]});

    $scope.takePicture = function() 
    {
        navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
            destinationType: Camera.DestinationType.DATA_URL }); 

      function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src ="data:image/jpeg;base64," + imageData;       
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }       

}});

- Matan Gubkin

---

你安装了这个插件吗？即 cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git，并且在 Android 更新后呢？ - Maxim Shoustin

顺便提一下，这与Ionic无关。 - Maxim Shoustin

我安装了那个插件。 - Matan Gubkin

我们能在聊天中谈吗？这里有点像坏掉的电话... - Matan Gubkin

https://dev59.com/42Ag5IYBdhLWcg3wYZ-6#25926840 - e382df99a7950919789725ceeec126

如果您正在浏览器上测试您的Ionic应用程序，请在设备上尝试。在浏览器中，相机确实未定义。 - Jude

Answer 1

• 你的代码是正确的，只需要添加一个带有ng-click="takePicture()"的html按钮。

• 这里没有问题，浏览器肯定会出现"cannot read property 'getPicture' of undefined"的错误，因为它没有你定义的手机相机配置，这意味着你应该使用真实设备测试你的应用程序：

  > ionic run android。

• 请注意，Google Chrome的新更新具有一项新功能，可以在连接到PC /笔记本电脑的情况下在浏览器上测试您的设备，要进行测试，请转到Chrome的导航面板>>更多工具>>检查设备或仅转到此链接：

  chrome://inspect/#devices

• 如果你已经在应用程序中安装了cordova插件plug in add org.apache.cordova.camera，我相信你的相机会正常工作，
  希望这能帮助到你。

- Mohamad Al Asmar

---

你试过这个了吗？在我的情况下它不起作用。 - rahul

你的建议完全正确。我在 chrome://inspect/#devices 上进行了测试，非常顺利。 - FernandoPaiva

Answer 2

在我的 Cordova 项目中尝试了各种解决方案都没有成功后，我最终使用了内置的 JavaScript API。基本上：

async function startCapturing() {   // get ready to shoot
    await getPermission('android.permission.CAMERA');
    let stream = await navigator.mediaDevices.getUserMedia({ video: {width: 480, height: 320, facingMode:'environment' }, audio: false });
    let video = document.getElementById("pVideo");   // a <video> element
    video.srcObject = stream;
    video.play();
    video.style.display = "block";
}

function shootPhoto(){       // take a snapshot
    let video = document.getElementById("pVideo");
    let canvas = document.getElementById("pCanvas");  // a <canvas> element
    let context = canvas.getContext('2d');
    context.drawImage(video,0,0,480,320);
    document.getElementById('fsPhotoI').src = Photo.current.src = canvas.toDataURL('image/png');
    Photo.current.changed = Profile.current.changed = true;
    video.style.display = "none";
}

特别是，一些插件对我来说无法工作，因为它们不能立即使用安卓后置摄像头。下面的getUserMedia（...）就可以解决问题：

facingMode:'environment'

请确保在AndroidManifest.xml文件中拥有相机权限。

- Chong Lip Phang