0

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);
  }
}
Attachments gg.png 93.6 KB
1
Contributor
1
Reply
14
Views
8 Months
Discussion Span
Last Post by SimonIoa
0

To answer my own thread all you have to do, is deletenode_modules, platformsand plugins and perform npm install from the start.

This is the code that worked for me....

selectvideo() {
      console.log("Record Video");
      const options: CameraOptions = {
          mediaType: this.camera.MediaType.VIDEO,
          destinationType: this.camera.DestinationType.FILE_URI,
          targetWidth: 800,
          targetHeight: 800,
          quality: 90
      };

      this.camera.getPicture(options).then(video => {
          console.log("coming here");

          }
      );
  }
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.