title: Ionic v4 Uncaught TypeError: Object(...) is not a function
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
  import { ModalController, NavParams } from '@ionic/angular';
  import { SelecttopicPage } from '../selecttopic/selecttopic.page';
  import { ActionSheetController } from '@ionic/angular';
  import { Platform } from '@ionic/angular';
  import { Storage } from '@ionic/storage';
  import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';
  import { Media } from '@ionic-native/media';
  import { File } from '@ionic-native/file';
  import { Diagnostic } from '@ionic-native/diagnostic';
  import { AndroidPermissions } from '@ionic-native/android-permissions';
  
  const MEDIA_FILES_KEY = 'mediaFiles';
  
  @Component({
    selector: 'app-uploadvid',
    templateUrl: './uploadvid.page.html',
    styleUrls: ['./uploadvid.page.scss'],
  })
  export class UploadvidPage implements OnInit {
    @ViewChild('myvideo') myVideo: any;
    //uploadVid: FormGroup;
    public filePath: string;
    public mediaFiles = [];
    public isAndroid: boolean;
  
    uploadVid = new FormGroup({
      title: new FormControl('', Validators.required),
      topic: new FormControl({value: '', disabled: true}, Validators.required),
      target: new FormControl('', Validators.required)
    });
  
    PERMISSION = {
      WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
      READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
      CAMERA: this.diagnostic.permission.CAMERA,
    };
  
    constructor(public formBuilder: FormBuilder, 
      public modalCtrl: ModalController, 
      public platform: Platform, 
      public actionSheetController: ActionSheetController, 
      public storage: Storage, 
      public mediaCapture: MediaCapture, 
      public media: Media, 
      public file: File, 
      private diagnostic: Diagnostic, 
      private androidPermissions: AndroidPermissions) { 
  
      // this.uploadVid = formBuilder.group({
      //   title: ['', Validators.compose([Validators.required])],
      //   topic: ['', Validators.compose([Validators.required])],
      //   target: ['', Validators.compose([Validators.required])]
      // });
    }
  
    ngOnInit() {
      this.checkIfMobile();
    }
  
    loadStoredVideo(){
      this.storage.get(MEDIA_FILES_KEY).then(res =&gt; {
          this.mediaFiles = JSON.parse(res) || [];
      });
    }
  
    checkIfMobile(){
      if(this.platform.is('android')){
        this.isAndroid = true;
      }else{
        this.isAndroid = false;
      }
    }
  
    async openModal() {
      const modal = await this.modalCtrl.create({
        component: SelecttopicPage,
        //componentProps: { value: 123 }
      });
  
      modal.onDidDismiss((topic) =&gt; {
  
        console.log("topic2: "+topic);
        this.uploadVid.controls['topic'].setValue(topic);
  
      })
  
      return await modal.present();
  
    }
  
    // for web &amp; ios
    handleFileSelect(evt){
      this.filePath = evt.target.files;
      alert("Selected Video: "+this.filePath);
    }
  
    // for android
    async openVidOption() {
      const actionSheet = await this.actionSheetController.create({
        header: "Albums",
        buttons: [{
          text: 'Camera',
          role: 'destructive',
          icon: 'camera',
          handler: () =&gt; {
            console.log('Delete clicked');
          }
        }, {
          text: 'Gallery',
          role: 'cancel',
          icon: 'folder-open',
          handler: () =&gt; {
            console.log('Cancel clicked');
          }
        }]
      });
      await actionSheet.present();
    }
  
    checkAndroidPerm(){
      if(this.platform.is('android')){
         //this.requestAllPermissions();
         this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
          (success) =&gt; {console.log('Succes granted the permissions');
          this.captureVideo()},
          (err) =&gt; {this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)}
      );
  
      this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE]);
      }
    }
  
    // requestAllPermissions(){
    //   const permissions = Object.keys(this.PERMISSION).map(k =&gt; this.PERMISSION[k]);
    //   this.diagnostic.requestRuntimePermissions(permissions).then((status) =&gt; {
    //           alert(JSON.stringify(status));
    //       }, error =&gt; {
    //           alert('Error: '+ error);
    //   });
    // }
  
    captureVideo(){
      let options: CaptureVideoOptions = {
        limit: 1,
        duration: 30
      }
      this.mediaCapture.captureVideo(options).then((res: MediaFile[]) =&gt; {
          //this.storeMediaFiles(res);
          let capturedFile = res[0];
          console.log('capturedFile: '+capturedFile);
          let fileName = capturedFile.name;
          let dir = capturedFile['localURL'].split('/');
          dir.pop();
          let fromDirectory = dir.join('/');
          let toDirectory = this.file.dataDirectory;
  
          this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res =&gt; {
            let url = res.nativeURL.replace(/^file:\/\//, '');
            this.storeMediaFiles([{name: fileName, size: capturedFile.size, localURL: url}]);
          });
      });
    }
  
    storeMediaFiles(files){
      this.storage.get(MEDIA_FILES_KEY).then(res =&gt;{
        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();
      })
    }
  
    playFile(myFile){
      console.log('play: ', myFile);
      let video = this.myVideo.nativeElement;
      video.src = myFile.localURl;
    }
  
  
  
    
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am new in Ionic and was working on video capture functionality from this <a href="https://ionicacademy.com/capture-audio-video-local/" rel="noreferrer">tutorial</a>. When I build android apk and opened the app I got blank screen. So I checked in computer browser and got error as shown in screenshot. I tried to search for its solution and found this posts <a href="https://github.com/ionic-team/ionic-native/issues/2621" rel="noreferrer">Link1</a> and <a href="https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/502" rel="noreferrer">Link2</a> but this also did not resolved my issue.</p>
  
  <p>If anyone can help me in this regard, it would be good. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// config.xml
  
  &lt;plugin name="cordova-plugin-whitelist" spec="1.3.3" /&gt;
      &lt;plugin name="cordova-plugin-device" spec="2.0.2" /&gt;
      &lt;plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" /&gt;
      &lt;plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" /&gt;
      &lt;plugin name="cordova-plugin-splashscreen" spec="^5.0.2" /&gt;
      &lt;plugin name="cordova-sqlite-storage" spec="^2.3.3" /&gt;
      &lt;plugin name="cordova-plugin-filechooser" spec="^1.0.1" /&gt;
      &lt;plugin name="cordova-plugin-filepicker" spec="^1.1.5" /&gt;
      &lt;plugin name="cordova-plugin-filepath" spec="^1.4.2" /&gt;
      &lt;plugin name="cordova-plugin-camera" spec="^4.0.3" /&gt;
      &lt;plugin name="cordova-plugin-file" spec="^6.0.1" /&gt;
      &lt;plugin name="cordova-plugin-media" spec="^5.0.2"&gt;
      &lt;plugin name="cordova-plugin-android-permissions" spec="^1.0.0" /&gt;
      &lt;plugin name="cordova.plugins.diagnostic" spec="^4.0.8" /&gt;
      &lt;engine name="ios" spec="4.5.5" /&gt;
      &lt;engine name="android" spec="7.0.0" /&gt;
      &lt;plugin name="cordova-plugin-media-capture" spec="^3.0.2" /&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>// package.json
  
  "dependencies": {
      "@angular/common": "6.0.9",
      "@angular/core": "6.0.9",
      "@angular/forms": "6.0.9",
      "@angular/http": "6.0.9",
      "@angular/platform-browser": "6.0.9",
      "@angular/platform-browser-dynamic": "6.0.9",
      "@angular/router": "6.0.9",
      "@ionic-native/android-permissions": "^4.12.0",
      "@ionic-native/core": "5.0.0-beta.14",
      "@ionic-native/diagnostic": "^4.12.0",
      "@ionic-native/file": "^4.12.0",
      "@ionic-native/file-chooser": "^4.12.0",
      "@ionic-native/file-path": "^4.12.0",
      "@ionic-native/media": "^4.12.0",
      "@ionic-native/media-capture": "^4.12.0",
      "@ionic-native/splash-screen": "5.0.0-beta.14",
      "@ionic-native/status-bar": "5.0.0-beta.14",
      "@ionic/angular": "4.0.0-beta.0",
      "@ionic/lab": "^1.0.2",
      "@ionic/ng-toolkit": "1.0.0",
      "@ionic/schematics-angular": "1.0.1",
      "@ionic/storage": "^2.1.3",
      "angular-progress-http": "^1.0.0",
      "cordova-android": "7.0.0",
      "cordova-ios": "4.5.5",
      "cordova-plugin-android-permissions": "^1.0.0",
      "cordova-plugin-camera": "^4.0.3",
      "cordova-plugin-device": "^2.0.2",
      "cordova-plugin-file": "^6.0.1",
      "cordova-plugin-filechooser": "^1.0.1",
      "cordova-plugin-filepath": "^1.4.2",
      "cordova-plugin-filepicker": "^1.1.5",
      "cordova-plugin-ionic-keyboard": "^2.1.2",
      "cordova-plugin-ionic-webview": "^2.0.2",
      "cordova-plugin-media": "^5.0.2",
      "cordova-plugin-media-capture": "^3.0.2",
      "cordova-plugin-splashscreen": "^5.0.2",
      "cordova-plugin-whitelist": "^1.3.3",
      "cordova-sqlite-storage": "^2.3.3",
      "cordova.plugins.diagnostic": "^4.0.8",
      "core-js": "^2.5.3",
      "rxjs": "^6.2.2",
      "rxjs-compat": "^6.2.2",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/cli": "6.0.8",
      "@angular/compiler": "6.0.9",
      "@angular/compiler-cli": "6.0.9",
      "@angular/language-service": "6.0.9",
      "@angular-devkit/architect": "0.7.0-rc.3",
      "@angular-devkit/build-angular": "0.7.0-rc.3",
      "@angular-devkit/core": "0.7.0-rc.3",
      "@angular-devkit/schematics": "0.7.0-rc.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~10.5.2",
      "codelyzer": "~4.4.2",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~2.0.2",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~2.7.2"
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/NnLXT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NnLXT.png" alt="Error"></a></p>