Hello i have a problem working with Camera on Ionic and i need some advice. I have installed both ionic camera and media capture plugins.
I am using two scripts one to capture Video (Start Reocording) and one to capture a Photo (Take Photo)
I am getting the errors displayed on the image i show you here. I guess that is because i am calling the Camera Method on @ionic-native/Camerawhen i should called it from ionic-native.
I try to use both import { MediaCapture, Camera, CameraOptions } from 'ionic-native';
home.ts
import { Component, ViewChild } from "@angular/core";
import { NavController, App, AlertController } from "ionic-angular";
import { AuthService } from "../../providers/auth-service";
import { Common } from "../../providers/common";
import { Camera, CameraOptions } from "@ionic-native/camera";
import { MediaCapture } from 'ionic-native';
@Component({ selector: "page-home", templateUrl: "home.html" })
export class HomePage {
@ViewChild("updatebox") updatebox;
@ViewChild("myvideo") myVideo: any;
public photos: any;
public base64Image: string;
public fileImage: string;
public userDetails: any;
public resposeData: any;
public dataSet: any;
public noRecords: boolean;
userPostData = {
user_id: "",
token: "",
imageB64: "",
feed: "",
feed_id: "",
lastCreated: ""
};
constructor(
public common: Common,
private alertCtrl: AlertController,
private camera: Camera,
public navCtrl: NavController,
public app: App,
public authService: AuthService
) {
const data = JSON.parse(localStorage.getItem("userData"));
this.userDetails = data.userData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
this.userPostData.lastCreated = "";
this.noRecords = false
this.getFeed();
}
ngOnInit() {
this.photos = [];
}
startrecording() {
MediaCapture.captureVideo((videodata) => {
alert(JSON.stringify(videodata));
})
}
selectvideo() {
let video = this.myVideo.nativeElement;
var options = {
sourveType: 2,
mediaType: 1
};
this.camera.getPicture(options).then((data) => {
video.src = data;
video.play();
})
}
getFeed() {
this.common.presentLoading();
this.authService.postData(this.userPostData, "feed").then(
result => {
this.resposeData = result;
if (this.resposeData.feedData) {
this.common.closeLoading();
this.dataSet = this.resposeData.feedData;
console.log(this.dataSet);
const dataLength = this.resposeData.feedData.length;
this.userPostData.lastCreated = this.resposeData.feedData[
dataLength - 1
].created;
} else {
console.log("No access");
}
},
err => {
//Connection failed message
}
);
}
feedUpdate() {
if (this.userPostData.feed) {
this.common.presentLoading();
this.authService.postData(this.userPostData, "feedUpdate").then(
result => {
this.resposeData = result;
if (this.resposeData.feedData) {
this.common.closeLoading();
this.dataSet.unshift(this.resposeData.feedData);
this.userPostData.feed = "";
//this.updatebox.setFocus();
setTimeout(() => {
// this.updatebox.focus();
}, 150);
} else {
console.log("No access");
}
},
err => {
//Connection failed message
}
);
}
}
feedDelete(feed_id, msgIndex) {
if (feed_id > 0) {
let alert = this.alertCtrl.create({
title: "Delete Feed",
message: "Do you want to buy this feed?",
buttons: [
{
text: "Cancel",
role: "cancel",
handler: () => {
console.log("Cancel clicked");
}
},
{
text: "Delete",
handler: () => {
this.userPostData.feed_id = feed_id;
this.authService.postData(this.userPostData, "feedDelete").then(
result => {
this.resposeData = result;
if (this.resposeData.success) {
this.dataSet.splice(msgIndex, 1);
} else {
console.log("No access");
}
},
err => {
//Connection failed message
}
);
}
}
]
});
alert.present();
}
}
doInfinite(e): Promise<any> {
console.log("Begin async operation");
return new Promise(resolve => {
setTimeout(() => {
this.authService.postData(this.userPostData, "feed").then(
result => {
this.resposeData = result;
if (this.resposeData.feedData.length) {
const newData = this.resposeData.feedData;
this.userPostData.lastCreated = this.resposeData.feedData[
newData.length - 1
].created;
for (let i = 0; i < newData.length; i++) {
this.dataSet.push(newData[i]);
}
} else {
this.noRecords = true;
console.log("No user updates");
}
},
err => {
//Connection failed message
}
);
resolve();
}, 500);
});
}
converTime(time) {
let a = new Date(time * 1000);
return a;
}
backToWelcome() {
const root = this.app.getRootNav();
root.popToRoot();
}
takePhoto() {
console.log("coming here");
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
targetWidth: 450,
targetHeight: 450,
saveToPhotoAlbum: false
};
this.camera.getPicture(options).then(
imageData => {
this.base64Image = "data:image/jpeg;base64," + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
this.sendData(imageData);
},
err => {
console.log(err);
}
);
}
sendData(imageData) {
this.userPostData.imageB64 = imageData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
console.log(this.userPostData);
this.authService.postData(this.userPostData, "userImage").then(
result => {
this.resposeData = result;
},
err => {
// Error log
}
);
}
logout() {
//Api Token Logout
localStorage.clear();
setTimeout(() => this.backToWelcome(), 1000);
}
}