无法读取未定义的属性“getPicture” - 离子相机

Posted 2023-02-19

【中文标题】无法读取未定义的属性“getPicture” - 离子相机

【英文标题】：Cannot read property 'getPicture' of undefined - ionic camera

【发布时间】：2014-09-18 11:00:55

【问题描述】：

此代码返回：

 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);
           

);

【问题讨论】：

你安装了这个插件吗？又名cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git 和安卓更新后？

顺便说一句，对 Ionic 没有依赖性。

我安装了那个插件

我们可以聊聊吗？有点像这里的手机坏了......

***.com/a/25926840/237209

【参考方案1】：

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

这里没有问题，确定是浏览器"cannot read property 'getPicture' of undefined"因为没有配置 对于您定义的移动摄像头，这意味着您应该在 真正的设备使用：

> ionic run android.

请注意，谷歌浏览器的新更新有一项新功能，即 帮助您在浏览器上测试您的设备（如果它已连接到 PC/笔记本电脑，用于测试转到 chrome 的导航面板 >> 更多工具 >> 检查设备 或者直接去这个链接：

chrome://inspect/#devices

如果您在应用程序中安装了插件 cordova plugin add org.apache.cordova.camera，我确信您的相机将正常工作， 我希望这可以帮助你。

【讨论】：

你试过这个真的有效吗，在我的情况下它不起作用

你的建议没问题。我在chrome://inspect/#devices 上进行了测试，效果很好。

【参考方案2】：

在我的科尔多瓦项目尝试了各种解决方案但没有成功后，我只是继续使用built-in javascript APIs。本质上：

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";

特别是，一些插件对我不起作用，因为它们无法立即使用 Android 后置摄像头。 getUserMedia(...) 中的以下内容可以解决问题：

facingMode:'environment'

还要确保您在 AndroidManifest.xml 中拥有 CAMERA 权限。