Ionic-native error

Elgenidi · January 29, 2019, 10:24am

When I install any ionic-native plugin this error appears especially with  @ionic-native/media-capture @ionic-native/media @ionic-native/file


App module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;

import { MediaCapture } from ‘@ionic-native/media-capture/ngx’;
import { Media } from ‘@ionic-native/media/ngx’;
import { File } from ‘@ionic-native/file/ngx’;

import { IonicStorageModule } from ‘@ionic/storage’;

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
MediaCapture,
Media,
File
]
})
export class AppModule {}

home.ts

import { Component , ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from ‘@ionic-native/media-capture/ngx’;
import { Storage } from ‘@ionic/storage’;
import { Media, MediaObject } from ‘@ionic-native/media/ngx’;
import { File } from ‘@ionic-native/file/ngx’

const MEDIA_FILES_KEY = ‘mediaFiles’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

mediaFiles = ;
@ViewChild(‘myvideo’) myVideo: any;

constructor(public navCtrl: NavController, private mediaCapture: MediaCapture, private storage: Storage, private file: File, private media: Media) {

}

ionViewDidLoad() {
this.storage.get(MEDIA_FILES_KEY).then(res => {
this.mediaFiles = JSON.parse(res) || ;
})
}

captureAudio() {
this.mediaCapture.captureAudio().then(res => {
this.storeMediaFiles(res);
}, (err: CaptureError) => console.error(err));
}

captureVideo() {
let options: CaptureVideoOptions = {
limit: 1,
duration: 30
}
this.mediaCapture.captureVideo(options).then((res: MediaFile) => {
let capturedFile = res[0];
let fileName = capturedFile.name;
let dir = capturedFile[‘localURL’].split(’/’);
dir.pop();
let fromDirectory = dir.join(’/’);
var toDirectory = this.file.dataDirectory;

  this.file.copyFile(fromDirectory , fileName , toDirectory , fileName).then((res) => {
    this.storeMediaFiles([{name: fileName, size: capturedFile.size}]);
  },err => {
    console.log('err: ', err);
  });
      },
(err: CaptureError) => console.error(err));

}

play(myFile) {
if (myFile.name.indexOf(’.wav’) > -1) {
const audioFile: MediaObject = this.media.create(myFile.localURL);
audioFile.play();
} else {
let path = this.file.dataDirectory + myFile.name;
let url = path.replace(/^file:///, ‘’);
let video = this.myVideo.nativeElement;
video.src = url;
video.play();
}
}

storeMediaFiles(files) {
this.storage.get(MEDIA_FILES_KEY).then(res => {
if (res) {
let arr = JSON.parse(res);
arr = arr.concat(files);
this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr));
} else {
this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files))
}
this.mediaFiles = this.mediaFiles.concat(files);
})
}

}


home.html

<ion-header>

<ion-navbar>

<ion-title>

Ionic Sound Recorder

</ion-title>

</ion-navbar>

</ion-header>

<ion-content >

<ion-row>

<ion-col>

<button ion-button full (click)=“captureAudio()”>Capture Audio</button>

</ion-col>

<ion-col>

<button ion-button full (click)=“captureVideo()”>Capture Video</button>

</ion-col>

</ion-row>

<ion-list>

<ion-item *ngFor=“let file of mediaFiles” tappable (click)=“play(file)” text-wrap>

<p>{{ file.size / 1000 / 1000 | number }} MB</p>

</ion-item>

</ion-list>

</video>

</ion-content>