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 -100destinationType: 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 URIconst 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文件得参数和注释！！