APP端:
因为APP端无法使用uni的camera组件,最开始考虑使用内嵌webview的方式,通过原生dom调用video渲染画面然后通过canvas截图。但是此方案兼容性在ios几乎为0,如果app只考虑安卓端的话可以采用此方案。后面又想用live-pusher组件来实现,但是发现快照api好像需要真实流地址才能截取图像。因为种种原因,也是安卓ios双端兼容性不佳。最终决定采用5+api实现。经实测5+api兼容性还算可以,但是毕竟是调用原生能力,肯定是没有原生开发那么丝滑的,难免会出现一些不可预测的兼容性问题。所以建议app和手机硬件交互强的话还是不要用uni开发了。不然真的是翻文档能翻死人。社区也找不到靠谱的解决方案。
5+api 文档
https://www.html5plus.org/doc/zh_cn/video.html#plus.video.createLivePusher
就是使用这个api调用原生的camera完成。并且可以直接在预览模式下完成快照,也不需要真实的推流地址。
<template>
<view class="content">
<view class="c-footer">
<view class="msg-box">
<view class="msg">
1、请保证本人验证。
</view>
<view class="msg">
2、请使头像正面位于画框中。
</view>
<view class="msg">
3、请使头像尽量清晰。
</view>
<view class="msg">
4、请保证眼镜不反光,双眼可见。
</view>
<view class="msg">
5、请保证无墨镜,口罩,面膜等遮挡物。
</view>
<view class="msg">
6、请不要化浓妆,不要戴帽子。
</view>
</view>
<view class="but" @click="snapshotPusher" v-if="!cilckSwitch">采集本人人脸</view>
</view>
</view>
</template>
<script>
import permission from '../../util/permission.js'
export default {
data() {
return {
type: '', //是否是补签拉起的人脸识别
imgData: '',
pusher: null,
scanWin: null,
faceInitTimeout: null,
snapshTimeout: null,
uploadFileTask: null,
cilckSwitch: false, //防止多次点击
};
},
methods: {
//人脸比对
handleFaceContrast(param) {
uni.hideLoading()
this.$http({
url: '/API_AUTH/AppIaiFace/faceContrast.api',
data: {
...param,
userid: uni.getStorageSync('userInfo').id
}
}).then(res => {
console.log(res)
if (res.data.compareResult == 1) {
let pages = getCurrentPages(); //获取所有页面栈实例列表
let nowPage = pages[pages.length - 1]; //当前页页面实例
let prevPage = pages[pages.length - 2]; //上一页页面实例
if (this.type == 'signOut') {
prevPage.$vm.signOutXh = param.xh;
prevPage.$vm.signOutPhotoPath = param.path
} else {
prevPage.$vm.xh = param.xh;
prevPage.$vm.photoPath = param.path
}
uni.navigateBack()
} else {
uni.showToast({
title: '人脸比对不通过,请重试',
icon: 'none'
})
this.cilckSwitch = false
}
}).catch(err => {
uni.showToast({
title: '人脸比对不通过,请重试',
icon: 'none'
})
this.cilckSwitch = false
})
},
//初始化
faceInit() {
uni.showLoading({
title: '请稍后...'
})
this.faceInitTimeout = setTimeout(async () => {
//创建livepusher
if (uni.getSystemInfoSync().platform === 'android') {
const data1 = await permission.requestAndroidPermission(
"android.permission.RECORD_AUDIO")
const data2 = await permission.requestAndroidPermission("android.permission.CAMERA")
console.log(data1,data2,1111)
if (data1 == 1 && data2 == 1) {
this.pusherInit();
}
} else {
this.pusherInit();
}
//覆盖在视频之上的内容,根据实际情况编写
// this.scanWin = plus.webview.create('/hybrid/html/faceTip.html', '', {
// background: 'transparent'
// });
//新引入的webView显示
// this.scanWin.show();
//初始化上传本地文件的api
this.initUploader()
}, 500);
},
//初始化播放器
pusherInit() {
const currentWebview = this.$mp.page.$getAppWebview();
this.pusher = plus.video.createLivePusher('livepusher', {
url: '',
top: '0px',
left: '0px',
width: '100%',
height: '50%',
position: 'absolute',
aspect: '9:16',
muted: false,
'z-index': 999999,
'border-radius': '50%',
});
currentWebview.append(this.pusher);
//反转摄像头
this.pusher.switchCamera();
//开始预览
this.pusher.preview();
uni.hideLoading()
},
//初始化读取本地文件
initUploader() {
let that = this
this.uploadFileTask = plus.uploader.createUpload(
"完整的接口请求地址", {
method: "POST",
headers: {
// 修改请求头Content-Type类型 此类型为文件上传