How to run native camera using ionic devapp
I am trying to run ionic devapp Ionic DevApp Doc using my Android mobile but it seems like the cordova plugin isn't setup correctly. I can't understnd why even if I did a $ ionic cordova plugin add cordova-plugin-camera and $ npm install --save @ionic-native/camera@beta any line is added into my config.xml file. I also try to add manually this line into my config.xml file
So when I click upon my button (from my mobile) who's suppose to trigger the camera to take a picture, it do do nothing.
Here's my code (very basic one):
home.page.ts:
export class HomePage {
public image = '';
public options: CameraOptions;
constructor(public navCtrl: NavController, public camera: Camera) {
this.options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
}
getPicture() {
this.camera.getPicture(this.options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
console.log('image loaded !');
},
err => {
console.log('handled error !', err);
// Handle error
}
);
}
}
home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-img [src]="image"></ion-img>
<ion-button shape="round" color="primary" (click)="getPicture()">Take
Picture</ion-button>
</ion-content>
ionic-framework ionic4 ionic-devapp
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
add a comment |
I am trying to run ionic devapp Ionic DevApp Doc using my Android mobile but it seems like the cordova plugin isn't setup correctly. I can't understnd why even if I did a $ ionic cordova plugin add cordova-plugin-camera and $ npm install --save @ionic-native/camera@beta any line is added into my config.xml file. I also try to add manually this line into my config.xml file
So when I click upon my button (from my mobile) who's suppose to trigger the camera to take a picture, it do do nothing.
Here's my code (very basic one):
home.page.ts:
export class HomePage {
public image = '';
public options: CameraOptions;
constructor(public navCtrl: NavController, public camera: Camera) {
this.options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
}
getPicture() {
this.camera.getPicture(this.options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
console.log('image loaded !');
},
err => {
console.log('handled error !', err);
// Handle error
}
);
}
}
home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-img [src]="image"></ion-img>
<ion-button shape="round" color="primary" (click)="getPicture()">Take
Picture</ion-button>
</ion-content>
ionic-framework ionic4 ionic-devapp
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
add a comment |
I am trying to run ionic devapp Ionic DevApp Doc using my Android mobile but it seems like the cordova plugin isn't setup correctly. I can't understnd why even if I did a $ ionic cordova plugin add cordova-plugin-camera and $ npm install --save @ionic-native/camera@beta any line is added into my config.xml file. I also try to add manually this line into my config.xml file
So when I click upon my button (from my mobile) who's suppose to trigger the camera to take a picture, it do do nothing.
Here's my code (very basic one):
home.page.ts:
export class HomePage {
public image = '';
public options: CameraOptions;
constructor(public navCtrl: NavController, public camera: Camera) {
this.options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
}
getPicture() {
this.camera.getPicture(this.options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
console.log('image loaded !');
},
err => {
console.log('handled error !', err);
// Handle error
}
);
}
}
home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-img [src]="image"></ion-img>
<ion-button shape="round" color="primary" (click)="getPicture()">Take
Picture</ion-button>
</ion-content>
ionic-framework ionic4 ionic-devapp
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
I am trying to run ionic devapp Ionic DevApp Doc using my Android mobile but it seems like the cordova plugin isn't setup correctly. I can't understnd why even if I did a $ ionic cordova plugin add cordova-plugin-camera and $ npm install --save @ionic-native/camera@beta any line is added into my config.xml file. I also try to add manually this line into my config.xml file
So when I click upon my button (from my mobile) who's suppose to trigger the camera to take a picture, it do do nothing.
Here's my code (very basic one):
home.page.ts:
export class HomePage {
public image = '';
public options: CameraOptions;
constructor(public navCtrl: NavController, public camera: Camera) {
this.options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
}
getPicture() {
this.camera.getPicture(this.options).then(
imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
console.log('image loaded !');
},
err => {
console.log('handled error !', err);
// Handle error
}
);
}
}
home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-img [src]="image"></ion-img>
<ion-button shape="round" color="primary" (click)="getPicture()">Take
Picture</ion-button>
</ion-content>
ionic-framework ionic4 ionic-devapp
ionic-framework ionic4 ionic-devapp
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
edited Nov 15 '18 at 11:30
Emile Cantero
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
asked Nov 15 '18 at 11:02
Emile CanteroEmile Cantero
5232727
5232727
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317998%2fhow-to-run-native-camera-using-ionic-devapp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317998%2fhow-to-run-native-camera-using-ionic-devapp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
