效果图
代码
使用live-pusher
<live-pusher id='livePusher' class="livePusher" mode="FHD" beauty="0" whiteness="0" aspect="9:16"
min-bitrate="1000" audio-quality="16KHz" device-position="front" :auto-focus="true" :muted="true"
:enable-camera="true" :enable-mic="false" :zoom="true"></live-pusher>
获取实例
context = uni.createLivePusherContext("livePusher", ctx.proxy);
开启摄像头预览
function startPreview() {
context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
}
让用户选择进出卡,然后使用定时器循环执行打卡
function openCard() {
snapshot()
state.intervalId = setInterval(() => {
snapshot()
}, 2500);
}
截取图片转为base64传递给后台,这里是一个重点
一开始我是将图片压缩 然后上传给后台,获取http的图片,然后使用uni.reques转为base64
function snapshot() {
context.snapshot({
success: (e) => {
console.log('打卡', e.message.tempImagePath)
uni.compressImage({
src: e.message.tempImagePath,
quality: 10,
success: res => {
console.log('截取', res.tempFilePath)
uni.uploadFile({
url: 'xxxxxxxxx/upload/files',
name: 'formFile',
filePath: res.tempFilePath,
fileType: 'image',
formData: {
'formParam': `{"userId":"${state.userInfo.userId}", "fileType":"images", "subDir":"usr"}`
},
header: {
'token': localStorage.get('token'),
'uid': state.userInfo.userId,
'pid': state.projInfo.proId
},
success: (uploadFileRes) => {
let imgDate = JSON.parse(uploadFileRes.data)
console.log('图片', imgDate.result.fileUrls[0])
uni.request({
url: imgDate.result.fileUrls[0],
method: 'GET',
responseType: 'arraybuffer',
success: (res) => {
const base64 =uni.arrayBufferToBase64(res.data)
let dataObj = {
"projId":state.projInfo.proId,
"installType":state.activeTopIsImg,
"ioTime":ACutils.time.getCurrentTime(
'yy-mm-dd HH:MM:SS'),
"image":base64,
"longitude":state.center_lng,
"latitude":state.center_lat
}
console.log('整个参数:',dataObj);
},
fail: (err) => {
console.log(err);
},
})
},
fail: (res) => {
console.log('上传失败', res)
},
})
}
})
}
});
};
但是每次传递base64人脸图片都要上传一张图片 就会让打开速度很慢,如何直接使用本地图片转为base64,就需要 plus.io 了
- 什么是plus?
以plus开头的方法都是属于HTML5+环境调用的方法。
plus不能在浏览器环境下使用,它必须在手机APP上才能使用,因为以安卓为例,他是操纵webview的API。在5+中,我们在使用plus之前要监听HTML5+环境是否已经加载完毕,而在uniapp中,则可以直接调用,可以参看uni-app使用plus注意事项。
plus地址:HTML5+ API Reference
续代码
let privateDocPath = filePath
plus.io.resolveLocalFileSystemURL(privateDocPath, function(entry) {
entry.file(function(file) {
const fileReader = new plus.io.FileReader();
console.log(fileReader);
fileReader.onloadend = function(e) {
console.log('55555',e.target.result);
};
fileReader.readAsDataURL(file);
});
}, function(err) {
console.log(err, '444444');
});
使用plus.io完整代码
context.snapshot({
success: (e) => {
console.log('打卡', e.message.tempImagePath)
uni.compressImage({
src: e.message.tempImagePath,
quality: 20,
success: res => {
console.log('截取', res.tempFilePath)
let privateDocPath = res.tempFilePath
plus.io.resolveLocalFileSystemURL(privateDocPath, function(entry) {
entry.file(function(file) {
const fileReader = new plus.io.FileReader();
console.log(fileReader);
fileReader.onloadend = function(e) {
console.log('55555');
let dataObj = {
"projId":state.projInfo.proId,
"installType":state.activeTopIsImg,
"ioTime":ACutils.time.getCurrentTime(
'yy-mm-dd HH:MM:SS'),
"image":e.target.result.split(',')[1],
"longitude":state.center_lng,
"latitude":state.center_lat
}
console.log('整个参数:',dataObj);
};
fileReader.readAsDataURL(file);
});
}, function(err) {
console.log(err, '444444');
});
}
})
}
});