媒体捕捉原生插件 Ionic 3

Posted 2023-03-13

【中文标题】媒体捕捉原生插件 Ionic 3

【英文标题】：Media Capture Native Plugin Ionic 3

【发布时间】：2018-01-27 00:37:09

【问题描述】：

我正在制作一个 ionic 3 应用程序，我希望用户能够在其中捕获图片和视频。所以我使用了媒体捕捉插件，一旦我捕捉到图像或视频，我就会得到MediaFile[] 作为回报。现在，当我尝试将该图像显示为带有[src] = mediaFile[‘0’].fullPath 的ion-img 标记中的预览时。它不显示图像。

如果我的方法有问题，请告诉我该怎么办。

这里是捕获部分：

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>

这里是newpostpage的.ts文件：

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);    
  

【参考方案1】：

不知道你是否还有这个问题。

我解决此问题的方法是在控制台中打印文件路径，然后我尝试删除它的不同部分并查看哪些有效。

具体的工作是删除 "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);
            ); 

然后我可以使用路径来传输/播放文件。

【讨论】：

实际上问题是，插件返回的路径错误..我使用相机插件处理图像，使用媒体捕获插件处理视频。 mediaCapture 插件的 captureImage() 函数返回错误路径。

@FaizanUllah 路径没有错，它只是可以在媒体插件中使用的不同路径格式。出于其他目的，路径必须不同，这就是我试图在回答中描述的内容：编辑返回的路径是解决方案。