一.序言
之前講過(guò)Cordova結(jié)合Vue學(xué)習(xí)Camera，并講述怎么通過(guò)Cordova來(lái)打包一個(gè)app，如果對(duì)Cordova和Vue不熟的同學(xué)，可以自行查閱相關(guān)資料，然后本文接著講如何實(shí)習(xí)視頻錄取與文件上傳，之后希望大家自己去實(shí)現(xiàn)音頻錄取與播放、
下面是大家需要了解的一些相關(guān)文檔
cordova-plugin-media-capture----這個(gè)是Cordova媒體捕捉，主要使用其中capture.captureVideo（啟動(dòng)錄像機(jī)應(yīng)用程序）
cordova-plugin-file-transfer----這個(gè)是Cordova文件傳輸，主要使用其中的upload（文件傳輸上傳）
此文中將不再講述如何打包app，想了解可以查看Cordova結(jié)合Vue學(xué)習(xí)Camera
二.app項(xiàng)目中安裝plugin-media-capture與plugin-file-transfer插件api
首先進(jìn)入你的app項(xiàng)目然后調(diào)用cmd命令行工具，分別執(zhí)行命令
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-file-transfer
三.Vue中使用插件
以下代碼則是調(diào)用攝像機(jī)進(jìn)行錄制，當(dāng)成功時(shí)則會(huì)調(diào)用onSuccess方法并返回文件對(duì)象
//開始錄制視頻
videoCapture: function() {
var options = {
imit: 1,
duration: 10
};
navigator.device.capture.captureVideo(this.onSuccess, this.onError, options);
},
onSuccess: function(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
this.path = mediaFiles[i].fullPath;
// do something interesting with the file
}
alert(this.path);
},
以上都能成功時(shí)我們就可以上傳文件了，以下代碼是上傳視頻文件。
uploadHandle: function() {
//這里這段后期測(cè)試發(fā)現(xiàn)沒(méi)有用
if(device.platform == "iOS") {
var src = cordova.file.tempDirectory + +Date.now()+ ".m4a";
} else if(device.platform == "Android") {
var src = cordova.file.externalRootDirectory + +Date.now()+ ".m4a";
}
//判斷是否有文件被上傳
if (!this.path) {
Toast({
message: '文件不存在',
position: 'bottom',
duration: 5000
});
return false;
}
var fileURL = this.path;
//上傳成功的回調(diào)方法
var win = function(r) {
console.info(r);
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
//上傳失敗的回調(diào)方法
var fail = function(error) {
console.info(error);
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
//上傳參數(shù)
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";
var params = {
value1: 'test',
value2: 'param'
};
options.params = params;
//實(shí)例化上傳類
var ft = new FileTransfer();
console.info(ft);
//綁定上傳進(jìn)度函數(shù)
ft.onprogress = this.selectload;
//開始上傳
ft.upload(fileURL, encodeURI('http://192.168.1.23:8087'), win, fail,options);
},
//綁定顯示上傳進(jìn)度
selectload:function(e){
if (e.lengthComputable) {
// this.sheetVisible=true;
var num=(e.loaded / e.total)*100;
this.load_val=num.toFixed(2);
console.log(this.load_val);
console.log('當(dāng)前進(jìn)度：' + e.loaded / e.total);
}
}
四.最后會(huì)出現(xiàn)的問(wèn)題與bug
- 第一個(gè)就是文件獲取但是并沒(méi)有上傳成功，首先你要注意服務(wù)端對(duì)上傳文件的大小限制
- 第二個(gè)就是上傳文件一定要授權(quán)手機(jī)存儲(chǔ)權(quán)限，這一點(diǎn)非常重要，沒(méi)有存儲(chǔ)權(quán)限就等于拿不到剛才錄制的文件，自然也就上傳不了，可以再安裝apk的時(shí)候讓用戶勾選存儲(chǔ)權(quán)限，
