How to create custom camera plugin?

Hi leob,

Thanks for a job well done . I will try to run it later tonight. Pls note that my machine is Windows . And I use ionic platform add android and ionic build android to run.

I hope I won’t fall into the previous issue where there’s no index file in the www folder.

Can’t wait to try it out . Thanks once again .

1 Like

Cool, hope it works for you. As explained you can set it up so that you don’t need or Firebase or whatever so then the setup should be minimal for you to be able to try out the image functionality.

P.S. by the way, I advise you to run with “ionic serve -c -l” (with the “labs” option, and showing errors in the console).

I’m pretty sure it will work then, I believe the “-l” option fixes the “missing index.html” problem.

If not, look at the errors in the console (terminal).

UPDATE: if you add the “-c” argument to “ionic serve” then you will probably see this error:

“libsass bindings not found. Try reinstalling node-sass?”

This is a known issue which many people (also Ionic users) have come across, if you search for “libsass bindings not found” then you will see many discussion threads about it.

The best solution seems to be this answer:

Error running gulp sass

As you can see, the solution is that it works only with certain versions of nodejs. The problem is especially with “new” nodejs versions, e.g. nodejs v.4. I am using nodejs v.0.12 and I don’t have the problem.

Another discussion and possible solution is this post:

'libsass' bindings not found

So that is the issue. I’ve added a warning and some info to my README because I’ve seen many people struggling with this issue.

P.S. if you already tried downloading the new version, then just delete the thing and do a fresh install please. I think I got to the bottom of the ENOENT and “libsass” issues and fixed it so that it works both with the old and new nodejs versions.

Hi Leob,

everything worked fine this time. I needed to install gulp and do a gulp build. after that i could see my Index.html file in the www folder. Moving forward , you architecture is strange and very unlike the normal ionic project.

I am used to a controller.js, app.js and template files. how do i continue work? am lost as to where my controller is, where to add template files and where to my own contollers or code. Do i need to read your github page again?..

kinda lost on the organistaion and how to add my own js files and controllers.

Hey that’s good to hear.

I’m very glad to hear that it works, there’s another guy who’s trying to get it working and it’s an endless story, I’m about to give up. So tell me, which nodejs are yo running, is it nodejs v.4 ?

The architecture is different from the simple starters, but it’s not that strange. The well-known AngularJS expert John Papa is one of the people who recommend this structure, see this description in his famous Style Guide:

It’s called “directory per feature” (or module) and is better suited to larger apps (the structure in the default starter apps doesn’t scale well to larger apps, lumping everything in 3 Javascript files isn’t really a good idea).

I’ve also described the structure in the README file:

Just read that section (and maybe also the John Papa link that I gave you) and I am sure it will become all clear.

Hi Leob,

my node js version is v0.12.7. I just checked the version inside the app folder anyway using the command node --version.

As per the guy, is he running on a windows machine? what’s the issue? can you refer him to me if he’s trying to run on a windows?

I will read the documents and see what happens. Hope to provide you positive feedback soon.

Thanks for the good work. :grin:

Hi Leob,

your login.ctrl calls the service UserService.login(). How does this controller know the location of this service? I do not see any includes.

“Includes” … ? Eh, well, do you know the basics of AngularJS ? It’s called “Dependency Injection” …

Read the beginner’s guide to AngularJS and it will become clear.

Aiit. will do.

I simply want to use my own user login module. I have web Api that implements Aspnet Identity. Thats what i want to use for my User Authentications.

Okay then you would wrap your Asp API inside an AngularJS service.

Hi leob

This suggestion sounds very interesting. I tried to do something similar but the problem that I have is that I can not display the pic on the view because the cordova camera plugin returns a local file URL that does not work if I use it in an tag using the ng-source attribute (android version). Have you managed to do something similar in the android version?

Well for me ng-src works fine with local images, also on Android. What problem do you see then? Do you see any error/problem when looking at the logs with “adb logcat” or Chrome remote inspection?

However what I would recommend (instead of plain “src” or “ng-src”) is to use angular-image-cache (

This works transparently regardless whether the image URL is remote or local, it makes the image cache reliable (also on iOS where it isn’t) and therefore makes images from remote sources display faster, and works fine too with local images.

This is how you use it in your source code (HTML):

<img img-cache ic-src="{{image}}">

Don’t forget to add “filesystem:” to the CSP tag (Content-Security-Policy) in your index.html file, e.g:

  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' * data: gap: filesystem: 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Hi leob

Thanks for your immediate response. A more detailed description of the problem that I have to cope with is on this link:

I just posted this link two days ago. The problem is that when I choose an image from the gallery the image is not shown on the view and is displayed as a broken link with a question mark. I will try your suggestion and I will keep you up to date about the output result.

Hi leob

I have tried to run the app and record the logs using the command “adb logcat CordovaLog:D *:S” but I do not receive any log at all. If I use the command “adb logcat” then I get a bunch of logs and I can’t catch the errors because the logs are running all the time and I can not separate the applications logs from the other ones

Any suggestions?

I always do it like this:

adb logcat|grep CONSOLE

This eliminates 99% of the rubbish and shows me only what I need.

I have installed grep using npm install but when I try to use it in adb I receive the following error: ‘grep’ is not recognized as an internal or external command

Installed grep using npm? grep is a standard command in linux or unix (OSX) … you shouldn’t install it with npm, it’s not a nodejs program. What OS are you running then?

Well if you type in npm : npm install grep -g it returns as a result grep@0.1.0. I thought that this installed grep. I am running Windows 7 right now. I also tried to install grep from this website but still did not work when I use it with adb