这次使用uni-app框架开发一个APP,有一个刷脸功能,其实现原理是:通过livePusher对象(直播推流技术)实现视频预览和截屏,通过plus.zip.compressImage压缩图片上传至服务器
实现流程:调用手机摄像头创建直播推流 → 截图 → 压缩图片 → 上传图片到服务器 → 服务器调用百度人脸api → 百度api返回该图片与底图的相似度
利用直播推流技术开启摄像头,获取视频流
如果是nvue开发,可以直接使用live-pusher组件进行直播推流,如果是vue开发,则需要使用h5+的plus.video.LivePusher对象来获取,详情请查看https://uniapp.dcloud.io/component/live-pusher?id=live-pusher
下面以vue开发为例,vue开发有个不好的点,如果要在视频上展示其他内容,必须通过web-view嵌入其他html页面,cover-view始终都会在视频下面
进入页面的时候调用faceInit()方法,faceTip.html是显示在视频之上的其他内容,比如刷脸有一个类似于扫二维码一样的方框,
通过plus.video.createLivePusher创建直播推流,具体配置请参考文档:http://www.html5plus.org/doc/zh_cn/video.html
methods:{
pusherInit() {
//获取当前窗口对象
const currentWebview = this.$mp.page.$getAppWebview();
//创建视频推流对象,url是视频上传到的服务器地址,不填表示不传视频
this.pusher = plus.video.createLivePusher('livepusher', {
url: '',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
position: 'absolute',
aspect: '9:16',
'z-index': 999
});
//一定要将推流对象append到当前页面中
currentWebview.append(this.pusher);
//视频预览
this.pusher.preview();
}
}
methods:{
snapshotPusher() {
this.snapshTimeout = setTimeout(() => {
this.pusher.snapshot(
e => {
this.pusher.close();
//获取图片地址
var src = e.tempImagePath;
//压缩图片
this.getMinImage(src);
},
function(e) {
plus.nativeUI.alert('snapshot error: ' + JSON.stringify(e));
}
);
}, this.snapshotTimeoutNumber);
},
}
具体文档请参考:http://www.html5plus.org/doc/zh_cn/zip.html
methods:{
getMinImage(imgPath) {
plus.zip.compressImage(
{
src: imgPath,
dst: imgPath,
overwrite: true,
quality: 40
},
zipRes => {
setTimeout(() => {
var reader = new plus.io.FileReader();
reader.onloadend = res => {
var speech = res.target.result; //base64图片
console.log(speech.length);
this.imgData = speech;
//将图片发送给后台
this.faceHttp();
};
//一定要使用plus.io.convertLocalFileSystemURL将target地址转换为本地文件地址,否则readAsDataURL会找不到文件
reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));
}, 1000);
},
function(error) {
console.log('Compress error!', error);
}
);
},
}
以上是主要的技术点,下面贴出face.vue的全部逻辑: