ngCordova camera functions properly on emulator, but encounters issues on actual devices

Question

ngCordova camera functions properly on emulator, but encounters issues on actual devices

I am currently developing an app using Ionic for my Course Conclusion, and I am facing an issue with the ngCordova Camera Plugin. The deadline is approaching fast as I only have 2 weeks left to complete this project.

While testing the app on the emulator, the camera functions properly without any issues. However, when I tried running it on my actual device, no image appeared. Instead of showing a broken image icon, it just displayed a blank square.

On the emulator, I tested the app using 3 different Android API versions: 17, 19, and 22, and it worked fine on all three. But when I tried running it on my device with API 22, the camera feature failed to work.

I am using Genymotion emulator along with >ionic run android. Here are the details:

Emulator: Xperia Z - Android 4.2.2 API 17

However, when I build the app using >ionic build android and install it on my device, this is what happens:

Device: Xperia Z2 - Android 5.1 API 22

The issue persists for all images on every page, whether I capture a new photo or select one from the library. Below is the code snippet from where the pictures come from:

form.html (modal):

<!-- Code snippet removed for brevity -->

This is the controller for the page where the modal is launched (only the camera part has been shown here, additional code can be provided if necessary):

<!-- Code snippet removed for brevity -->

I have already attempted the following troubleshooting steps:

Reinstalling the plugin
Reinstalling the platform
Changing from DATA_URL to FILE_URI
Removing 'data:image/jpeg;base64,' from the < img > tag and using it in the function with imageData

If anyone could provide assistance, it would be greatly appreciated.

EDIT:

Upon using Chrome Inspect, the following error was displayed when attempting to load an image:

Refused to load the image because it violates the Content Security Policy directive: "default-src *". Please note that 'img-src' was not explicitly set, so 'default-src' is being used as a fallback.

I have now added img-src 'self' *; to the meta tag on my index file, which resulted in a new error message:

Refused to load the image because it violates the Content Security Policy directive: "img-src *".

android angularjs cordova ionic-framework camera

Answer 1

Answer №1

Consider updating img-src 'self' *; to img-src 'self' data:; This adjustment will enable the loading of resources using the data scheme (such as Base64 encoded images).

Answer 2

Consider updating img-src 'self' *; to img-src 'self' data:; This adjustment will enable the loading of resources using the data scheme (such as Base64 encoded images).

Answer 3

Answer №2

1) I noticed a mistake in your code on this line

$scope.fotoperfil = imageData; The variable imageData contains only a base64 string, so it cannot be displayed in the UI.

It should instead be $scope.fotoperfil = "data:image/jpeg;base64," + imageData; here data:image/jpeg;base64 converts the base64 string into a .jpeg image.

2) Don't forget to add a placeholder in your img tag for previewing the taken picture.

3) For an easy way to implement camera functionality, check out Nic Raboy's blog post here.

Update your HTML img tag like this

<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">

and include

<script src="js/ng-cordova.min.js"></script>

in your html file.

Also, modify your module as follows

angular.module('starter', ['ionic', 'ngCordova'])

Depending on your requirements, use DATA_URL or FILE_URI as explained in the ng-Cordova camera documentation.

Answer 4

1) I noticed a mistake in your code on this line

$scope.fotoperfil = imageData; The variable imageData contains only a base64 string, so it cannot be displayed in the UI.

It should instead be $scope.fotoperfil = "data:image/jpeg;base64," + imageData; here data:image/jpeg;base64 converts the base64 string into a .jpeg image.

2) Don't forget to add a placeholder in your img tag for previewing the taken picture.

3) For an easy way to implement camera functionality, check out Nic Raboy's blog post here.

Update your HTML img tag like this

<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">

and include

<script src="js/ng-cordova.min.js"></script>

in your html file.

Also, modify your module as follows

angular.module('starter', ['ionic', 'ngCordova'])

Depending on your requirements, use DATA_URL or FILE_URI as explained in the ng-Cordova camera documentation.

ngCordova camera functions properly on emulator, but encounters issues on actual devices

Answer №1

Answer №2

Similar questions

Global scope controller constructors do not seem to be functioning

Exploring the topic of AngularJS unit testing and working with httpBackend timeouts

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Ensuring Form Accuracy - Mandatory Selection from Group

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

adjusting the template of the @Component programmatically

Provide the aggregated content within d3's text() or html() function

Generating data for a table by choosing a row from another table through ng-repeat

Can someone explain the role of $ctrl in angularjs and when it is more appropriate to use $ctrl instead of $scope in

What is the best way to transfer information from a model to the screen?

Is there a way to implement CSS stylesheets on a particular component?

What is the best way to retrieve additional data from a JSON file on an Android device?

AngularJS shows as "true" yet remains in a state of "ng-hide" due to its specified class

Integrating Spring MVC with AngularJS for File Upload results in an error message: org.apache.commons.fileupload.FileUpload

When switching tabs, Ion-select should not reload the selected name

AngularJS ng-repeat not displaying bold fonts in HTML output

Tips for running a post-installation script when deploying an Angular 4 application to an Azure website using KuduScript

Issues Persist with Updating mySQL Database using PHP

Ways to launch angularjs project in production mode sans the use of npm start

IE9 causing issues with Angularjs ng-route - views fail to display