解决cordova 录制视频后,读取文件造成页面闪退的问题
1.在android中通过录制cordova-plugin-camera-captura录制视频,视频文件会非常大,在我们用window.resolveLocalSystemFile读取文件时,会造成闪退;闪退的极限是10s;录制10s之后,获取文件就会闪退;当然也看手机在录制过程中,是不是会对视频做处理;例如我的小米x版录制之后,视频文件就会比较小,可以读取超过10的视频文件;
那要怎么解决这个问题呢?
cordova提供了一种解决办法就是cordova-plugin-fileTransfer,可以运用这个插件直接上传;那在上传之前怎么预览呢?cordova-plugin-camera-captura录制成功的回调函数中,会返回一个mediaFile数组对象,可以循环获取到对象数据,其中,具体的视频文件对象中有个参数是localURL;这个参数的路径是cdv:file//开头的;在cordova的官网中提到,我们可以通过这个参数,预览视频、图片、或者是MP3文件;更详细的,可以到cordova官网查看;
接下来就展示一下从录制,到上传文件这个过程的代码示例吧:
注意:均以vue项目为例;
1.录制视频
let options = { quality: 0 //该参数建议指定,不然,对于新机型例如安卓的P40 pro的视频格式就不是正常的mp4格式 limit: 1, //在ios中能且只能录制一个视频, duration: 10, //录制时长,已s为单位 } const that = this; navigator.device.capture.captureVideo( that.onSuccess, that.onError,options); onSuccess(mediaFile) { for(let i = 0 ; i < mediaFile.length; i ++) { const path = mediaFile[i].localURL; //预览以及上传文件均通过该参数返回的路径进行 const fullPath = mediaFile[i].fullPath; const size= mediaFile[i].size; const fileName= mediaFile[i].name; // 预览文件代码示例 const video = document.createElement('video'); video.src = path ; video.width = 200; video.height = 200; video.controls= true; document.querySelector(div).appendChild(video); // 上传视频文件的方法 that.uploadFile(path);
}
},
onError(error){
console.log(error);
}
2.文件上传
uploadFile(path) { const that = this; let baseURL = "http://x.x.x.x/x' + '/uploadToLocal'; //这是后台提供的上传文件的接口地址 let uploadPath = encodeURI(baseURL ); // 必须要encodeURI let options = new FIleUploadOptions(); let params = {}; params.hash = sha1('sssss'); params.fileName = '测试上传文件.mov'; // 如果要具体的真实的文件名,可以根据录制成功的回调函数中获取,并传到uploadFilePath这个方法中 options.params = params; // options.params 这个对象中的属性是自定义的,可以根据后台接口的要求去传参,如果后台接口不需要,这个参数可以不填;非必填 let ft = new FileTransfer(); // 上传函数 ft.upload(path, uploadPath, (success) => { //上传成功调用的函数 }, (error) => { console.log(error) } ) // 改方法获取上传的进度 ft.onprogress = function(progressEvent) { if (progressEvent) { let percent = (progressEvent.loaded/progressEvent.total).tofixed(2)*100 } } }