Media Capture Native Plugin Ionic 3

Question

I am making a ionic 3 application in which i want enable the user to capture pictures and videos. So i used the media capture plugin, once i capture a image or video i get the MediaFile[] promise in return. Now when i am trying to display that image as a preview in ion-img tag with [src] = mediaFile[‘0’].fullPath. it is not displaying the image.

please tell me if my appraoch is wrong then what should i do.

here is the capturing part:

this.mediaCapture.captureImage()
  .then(

    (data: MediaFile[]) => {
         this.navCtrl.push('NewPostPage', {
         mediaFile : data
         })
    },
    (err: CaptureError) => console.error(err)
  );

here is the html of newpostpage:

<ion-content padding>

  <ion-img [src] = 'image'></ion-img>

</ion-content>

here is the .ts file of newpostpage:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MediaFile } from '@ionic-native/media-capture';

/**
 * Generated class for the NewPostPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-new-post',
  templateUrl: 'new-post.html',
})
export class NewPostPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  mediaFile: MediaFile[] = this.navParams.get('mediaFile');
  image: string = this.mediaFile['0'].fullPath;


  ionViewDidLoad() {
    console.log('ionViewDidLoad NewPostPage');
    console.log(this.image);    
  }

}

Anton Toshik Anton Toshik · Accepted Answer · 2017-09-25T09:51:08

Hey don't know if you are still having this issue.

The way I solved this issue is by printing the file path in the console and then I attempted to remove different parts of it and see what works.

Specifically what worked was removing the "file:" prefix like so:

self.media.captureVideo().then((data: MediaFile[]) => {
                let file = data.pop();
                let path = file.fullPath.replace('file:', '');
                resolve(path);
            }, err => {
                console.dir(err);
                reject(err);
            });

I could then use the path to transfer/play the file.

Media Capture Native Plugin Ionic 3

1 Answers