24881

Meteor Cordova: Cannot get camera plugin to work, Uncaught TypeError: Cannot read property 'get

Question:

I am trying out the Meteor Cordova camera plugin and it won't work, and I have no idea what I'm missing.

Here is what I did:

<ol><li>

Meteor create new project

</li> <li>

Added the cordova camera package meteor add cordova:org.apache.cordova.camera@0.3.1

</li> <li>

Programmed the default button on screen to take a picture and then append it to the body.<br /> This should use the camera built into the laptop computer but all I get when I click the button is: Uncaught TypeError: Cannot read property 'getPicture' of undefined

And when I run the app in the iPhone simulator with the command meteor run ios and click the button I get a popup error: Failed because: no camera available

</li> </ol>

This is what my html and js file look like:

<strong>main.html</strong>:

<pre class="lang-html prettyprint-override"><head> <title>cameraTest</title> </head> <body>

Welcome to Meteor!

{{> hello}} </body> <template name="hello"> <button>Click Me</button>

You've pressed the button {{counter}} times.

</template>

<strong>main.js</strong>:

<pre class="lang-js prettyprint-override">if (Meteor.isClient) { // counter starts at 0 function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; $('body').append(image); } function onFail(message) { alert('Failed because: ' + message); } Session.setDefault("counter", 0); Template.hello.helpers({ counter: function () { return Session.get("counter"); } }); Template.hello.events({ 'click button': function () { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); } }); }

Answer1:

This is because cordova code must be included into a closure, as said on <a href="https://github.com/meteor/meteor/wiki/Meteor-Cordova-Phonegap-integration#adding-cordovaphonegap-specific-javascript-code-to-your-application" rel="nofollow">documentation</a>. You have to do this in your events functions. See bottom.

PS: you can not test camera on iOS emulator, use a real iPhone instead.

Meteor.startup(function () { // The correct way navigator.geolocation.getCurrentPosition(success)); }); // Will not work navigator.geolocation.getCurrentPosition(success));

Your code will become:

Template.hello.events({ 'click button': function () { Meteor.startup(function() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }); } });

Recommend

  • Property 'catch' does not exist on type 'PromiseLike
  • Why does this code crash on the distributed app but work in the debugger?
  • KoGrid JSON Dynamic widgets, with nested server calls
  • Cleave.js Phone CA
  • google-maps-sdk-ios - arm 7/iphone 5 issues for Google Maps 1.4.3 for iOS
  • Xcode duplicated devices bug
  • jQuery file download plugin
  • Can one add a complex type item to ListModel?
  • Understanding Intl.DateTimeFormat as a JavaScript object
  • JSON Error when parsing “… has no method 'replace'”
  • Localization issue Xcode
  • Why does Sencha 2 only work in Webkit browsers?
  • retrieving data from url in iphone
  • change search magnifying glass to UIActivityIndicatorView
  • Facebook iOS SDK Not Calling Completion Handler
  • Access user's phone number on iOS 7
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Custom Tabgroup Appcelerator
  • Exchange data b/w iOS devices using Bluetooth 4.0
  • Jenkins: How To Build multiple projects from a TFS repository?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • req.body is undefined - nodejs
  • How do I fake an specific browser client when using Java's Net library?
  • Accessing IRQ description array within a module and displaying action names
  • JavaScriptCore crash on iOS9
  • Javascript Callbacks with Object constructor
  • Where to put my custom functions in Wordpress?
  • Symfony2: How to get request parameter
  • jquery mobile loadPage not working
  • Apache 2.4 - remove | delete | uninstall
  • Akka Routing: Reply's send to router ends up as dead letters
  • SVN: Merging two branches together
  • Hibernate gives error error as “Access to DialectResolutionInfo cannot be null when 'hibernate.
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Is there a mandatory requirement to switch app.yaml?
  • Data Validation Drop Down Box Arrow Disappearing
  • How do you join a server to an Active Directory (domain)?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?