How to create custom camera plugin?

ionic-v1
102

Hi leob

Thanks for your suggestions. I have done all the changes and deploy the app on my device. Now when I open the app I don’t receive any broken image but also I don’t see any image at all. The image seems to be there but does not appear.

I also get the following error when I debug from the chrome://inspect/#devices:

Uncaught ReferenceError: FileTransfer is not defined http://192.168.1.3:8100/cordova.js Line: 312 (index):29

Does this mean that the FileTransfer plugin is missing? I don’t use it in my app anyway. I just use the File and FilePath plugins.

The img tag now includes the following code:

<img ng-repeat="image in images" img-cache ic-src="file:///data/data/com.ionicframework.devdacticimages326829/files/TnC2p20160605_175407.jpg" style="height: 200px; padding: 5px;" class>

103

Yes, just try to add the file transfer plugin and see if it works then:

ionic plugin add cordova-plugin-file-transfer

If that doesn’t help then we may need to reconsider using angular-image-cache because to be honest it isn’t adding real value in your use case (because your images are already local so caching is redundant).

What we would really need to figure out is how to prevent “unsafe” from getting added before the “file:” protocol in your src attribute. If you want you could send me your source code and I could have a look at it, maybe it’s something simple …

104

Yes I will try to install the FileTransfer plugin and try again to check if it works.

In case it is not working I will send you the source code.

Thank you.

105

Hi leob

I have installed the FileTransfer plugin and rebuild the app and when deployed it the images were broken again. Now the < img > tag includes the following information:

< img ng-repeat=“image in images” img-cache="" ic-src=“file:///data/data/com.ionicframework.devdacticimages326829/files/Mf7gl20140530_172056_20140530194755740.jpg” style=“height: 200px; padding: 5px;” class="" src=“cdvfile://localhost/persistent/imgcache/5914b7e8b17444350c5a06581a1569f436d64465.jpg” >

and also I receive the following error:

GET cdvfile://localhost/persistent/imgcache/5914b7e8b17444350c5a06581a1569f436d64465.jpg 404 (Not Found)

I will send you the source code to have a look at it also

106

Hi leob

I have uploaded the source code in github

https://github.com/akarayiannis/devdactic-images.

Have a look at it if you like

Thank you in advance

107

Okay I’ll have a look!

108

P.S. I’ve downloaded your code from Github but haven’t had time yet to check it, it’s almost midnight do I’ll do that tomorrow …

109

Ok leob there is no problem when ever you can…thanks

110

Okay I had a look and I have it working on my Android device. To get it working I made only the following 2 changes in www/index.html:

  1. I noticed that the “ion-content” tag wasn’t closed properly, the end tag was coded “” instead of “” ( the “t” was missing).

  2. I went back from angular-image-cache to normal ng-src (without the cache, which is redundant anyway because the files are local).

Both lines were already there with the “ng-src” line commented out. So all I did was uncomment the line that was commented out, and comment out the line that was not commented out, resulting in:

    <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" style="height:200px; padding: 5px 5px 5px 5px;" />
    <!--<img ng-repeat="image in images" img-cache ic-src="{{urlForImage(image)}}" style="height:200px; padding: 5px 5px 5px 5px;" />-->

And then it just worked, I could take an image with the camera plugin and it displayed fine. No addition of “unsafe” to my “src” attribute.

111

Hi leob
I also tried the app with the changes that you mentioned and it works. I think that the app worked because of those two changes:

  1. The close of the tag in the ion-content
  2. The addition of the meta tag

considering that the first version of the code included the ng-source attribute and not the img-cache.

I think that what made the big difference was the addition of the meta tag that allows showing images from the filesystem.

Thanks a lot for your help and for your valuable suggestions :slight_smile:
Have a nice day

112

Cool!

Yes I noticed immediately that the closing tag was incorrect, my editor/IDE flagged it “red”.
And yes, the “Content-Security-Policy” tag (the meta tag) is important, and highly recommended.

So it means that you can remove angular-image-cache from the app again, since it’s not used anymore.