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文件得参数和注释!!