angular ionic移动端 调动摄像头拍照和录制视频并且上传

angular ionic移动端 调动摄像头拍照和录制视频并且上传

最近写了ionic移动端开发调动摄像头。分享一哈

一、插件

1.调动手机摄像头插件
Camera
链接：https://ionicframework.com/docs/native/camera
node安装：
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
引入：import { Camera, CameraOptions } from ‘@ionic-native/camera/ngx’;
constructor(private camera: Camera) { }
2.上传插件
File Transfer
链接：https://ionicframework.com/docs/native/file-transfer
node安装：
ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/file-transfer
引入：
import { FileTransfer, FileUploadOptions, FileTransferObject } from ‘@ionic-native/file-transfer/ngx’;
import { File } from ‘@ionic-native/file’;
constructor(private transfer: FileTransfer, private file: File) { }

二、使用

一，调动摄像头拍摄照片：
1.大家一定要注意CameraOptions 这个对象是配置图片相关的参数，官方给了很多参数，Ctrl加左键点击CameraOptions就会跳转到封装这个对象的ts文件，里面给了很详细的参数和注释！！！！！
this.camera.getPicture(options)拍摄图片的方法
2. 大家打包了以后。在手机上测试，记得打印返回的参数（注意要JSON字符串形式），调用手机摄像头的时候，手机首先就会询问权限。拍摄了图片以后点击确定，就会返回相应的参数和数据。
3. 点击确定了以后拿到了图片相关的数据，这时候就需要上传
首先 const fileTransfer: FileTransferObject = this.transfer.create();
然后 配置FileUploadOptions，需要其他参数的朋友可以进入相应的TS文件查看。
最后：fileTransfer.upload(imageData, encodeURI(url), options)上传文件的数据，地址，和相应得配置！！

 openCamera() {
    // console.log(66);
    const options: CameraOptions = {
      quality: 100,// 相片质量 0 -100
      destinationType: this.camera.DestinationType.FILE_URI, // DATA_URL 是 base64  FILE_URL 是文件路径
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,      // 是否保存到相册
      // sourceType: this.camera.PictureSourceType.CAMERA ,  // 是打开相机拍照还是打开相册选择  PHOTOLIBRARY : 相册选择选择CAMERA : 拍照,
    };
    this.camera.getPicture(options).then((imageData) => {
      // console.log(JSON.stringify(imageData), '6666666');      // If it's base64:
      this.cerFlag = false;
      //If it's file URI
      const fileTransfer: FileTransferObject = this.transfer.create();
      // 更多的 Options 可以点进去自己看看，不懂的就谷歌翻译他的注释
      let options: FileUploadOptions = {
        fileKey: 'file',
        httpMethod: 'POST',
        headers: {
          Authorization: 'Bearer ' + this.localStorage.getObjectItem('currentUser').token,
          // 'token': this.localstore.getObjectItem('flywin.currentUserInfo').token
        },
        params: {}    // 如果要传参数，写这里

      };
      const url = this.http.getUrlBy(AppEntityConfig.upload_path);

      fileTransfer.upload(imageData, encodeURI(url), options)
        .then((res) => {
          const result = JSON.parse(res.response);
          // console.log('文件上传返回值.....');
          // console.log(JSON.stringify(res));
          const paths = result.resData.url.lastIndexOf('.'); // 取到文件名开始到最后一个点的长度
          const namelength = result.resData.url.length; // 取到文件名长度
          const imgtype = result.resData.url.substring(paths + 1, namelength); // 截取获得后缀
          this.malfunctionAnnexes.push({
            annexId: result.resData.uid,
            annexName: result.resData.name,
            annexPath: result.resData.url,
            annexSuffix: result.resData.fileServers.type,
            delFlag: '0',
            showurl: this.apiUrl + `fileServer/fileServers/downloadFile/${result.resData.uid}`,
            typeOf: imgtype,
            looktype: 'img'
          });
          this.http.presentLoading('正在加载图片');
          this.cerFlag = false;
          // console.log(JSON.stringify(this.malfunctionAnnexes));

        }, (err) => {
          // error
        });
    }, (err) => {
      // alert("获取图片失败");      // Handle error
    });

二，调动摄像头拍摄视频：
1.基本跟拍摄图片一致。至少配置选项和方法变了
CaptureVideoOptions 是配置视频相关得数据，参数limit：是一次拍几段！这里注意了 如果是1 拍一次就可以点击确定了，如果是2 拍第一次了以后会停顿一下然后紧接着拍第二次！！然后才能点击确定 才算拍摄完成！！！duration是视频最多能拍摄多少秒。若需要其他的配置参数，方法同上！！
2.拍摄了以后大家测试要打印看相关的数据
3.上传方法和上传图片一致！！

 openVideo() {

    let options: CaptureVideoOptions = { limit: 1, duration: 60, };
    this.mediaCapture.captureVideo(options)
      .then(
        (data: MediaFile[]) => {
          this.http.presentLoading('正在上传视频');
          this.cerFlag = false;
          // console.log('2222222222222222222222222222');
          // console.log(JSON.stringify(data));

          const fileTransfer: FileTransferObject = this.transfer.create();
          let options: FileUploadOptions = {
            fileKey: 'file',
            fileName: data[0].name,
            mimeType: data[0].type,
            httpMethod: 'POST',
            headers: {
              Authorization: 'Bearer ' + this.localStorage.getObjectItem('currentUser').token,
              // 'token': this.localstore.getObjectItem('flywin.currentUserInfo').token
            },
            params: {}    // 如果要传参数，写这里

          };
          const url = this.http.getUrlBy(AppEntityConfig.upload_path);

          fileTransfer.upload(data[0].fullPath, encodeURI(url), options)
            .then((res) => {
              this.http.presentLoading('正在加载视频');
              const result = JSON.parse(res.response);
              // console.log('文件上传返回值.....');
              // console.log(JSON.stringify(res));
              const paths = result.resData.url.lastIndexOf('.'); // 取到文件名开始到最后一个点的长度
              const namelength = result.resData.url.length; // 取到文件名长度
              const videotype = result.resData.url.substring(paths + 1, namelength); // 截取获得后缀
              this.malfunctionAnnexes.push({
                annexId: result.resData.uid,
                annexName: result.resData.name,
                annexPath: result.resData.url,
                annexSuffix: result.resData.fileServers.type,
                delFlag: '0',
                showurl: this.apiUrl + `fileServer/fileServers/downloadFile/${result.resData.uid}`,
                typeOf: videotype,
                looktype: 'video'
              });


              this.cerFlag = false;
              // console.log(JSON.stringify(this.malfunctionAnnexes));
            }, (err) => {
              // error
            });
        });

  }

总结

angular和ionic得坑还是比较多，费时间，大家需要仔细阅读一下他相关得ts文件得参数和注释！！