媒體捕捉本地插件Ionic 3

我正在製作一個離子3應用程序，其中我想讓用戶捕捉圖片和視頻。所以我使用了媒體捕捉插件，一旦我捕捉到圖像或視頻，我就會得到MediaFile[]的承諾。現在，當我試圖在ion-img標記[src] = mediaFile[‘0’].fullPath中以預覽形式顯示該圖像時。它不顯示圖像。媒體捕捉本地插件Ionic 3

請告訴我，如果我的appraoch是錯誤的，那麼我該怎麼做。

這裏是捕獲部：

this.mediaCapture.captureImage() 
    .then(

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

這裏是newpostpage的HTML：

<ion-content padding> 

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

</ion-content>

這裏是.ts文件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);  
    } 

}

來源

2017-08-18 Faizan Ullah

嘿別知道你是否仍然有這個問題。

我解決這個問題的方法是通過在控制檯中打印文件路徑，然後嘗試刪除它的不同部分，看看有什麼作用。

具體是什麼工作是去掉前綴"file:"像這樣：

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

然後我可以使用路徑來傳輸/播放文件。

來源

2017-09-25 09:51:08

實際上問題是，插件返回的路徑是錯誤的..我用相機插件的圖像和媒體捕獲插件的視頻。 mediaCapture插件的captureImage（）函數返回false路徑。 –

@FaizanUllah路徑沒有錯，它只是可以在媒體插件中使用的不同路徑格式。爲了其他目的，路徑必須不同，這就是我在回答中試圖描述的內容：編輯返回的路徑是解決方案。 –

感謝您的詳細解釋。 –

媒體捕捉本地插件Ionic 3

回答

相關問題