在听到⼈脸识别，连忙去看看，去阿⾥腾讯看他们的⼈脸识别⽅法，官⽅sdk什么的。
到后来，需求确定了，拍照（照⽚）上传，后台去识别是不是本⼈，这⼀瞬间从天堂到地狱，放着官⽅那么好的⽅法，不要。
⽤照⽚，还的⾃⼰去写，去实现。
下⾯为⼤家提供⼀个 uni-app ⾃动拍照上传照⽚后端做匹配处理。
在使⽤前先去manifest.json 选择APP模块配置，勾选直播推流 直接采⽤nvue开发，直接使⽤live-pusher组件进⾏直播推流，如果是vue开发，则需要使⽤h5+的plus.video.LivePusher对象来获取nuve js注意事项 注意nuve 页⾯ main.js 的封装函数。⽆法直接调⽤（⼩程序其他的端没有测试） 在APP端 this.api报错，显⽰是undefined，难道nvue页⾯，要重新引⼊api⽂件
在APP端，main.js中挂载Vuex在nvue页⾯⽆法使⽤this.$
简单粗暴点直接⽤StorageSync 重新获取⼀遍
//获取⽤户数据 userInfo在Data⾥定义
this.userInfo = StorageSync('userInfo')
nuve css注意事项
单位只⽀持px
其他的em,rem,pt,%,upx 都不⽀持
需要重新引⼊外部css
不⽀持使⽤ import 的⽅式引⼊外部 css
<style src="@/common/test.css"></style>
默认flex布
display: flex; //不需要写
/
/直接⽤下⾯的标签
flex-direction: column;
align-items: center;
justify-content: space-between;
页⾯样式
<view class="live-camera" :>
<view class="title">
{{second}}秒之后开始识别
</view>
<view class="preview" :>
<live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="1" whiteness="0"
aspect="2:3" min-bitrate="1000" audio-quality="16KHz" :auto-focus="true" :muted="true"
:enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
:></live-pusher>
<!--提⽰语-->
<cover-view class="remind">
<text class="remind-text" >{{ message }}</text>
</cover-view>
<!--辅助线-->
<cover-view class="outline-box" :>
<cover-image class="outline-img" src="../../static/idphotoskin.png"></cover-image>
</cover-view>
</view>
</view>
JS部分
<script>
import operate from '../../common/operate.js'
import api from '../../common/api.js'
export default {
data() {
return {
//提⽰
message: '',
/
/相机画⾯宽度
cameraWidth: '',
//相机画⾯宽度
cameraHeight: '',
//屏幕可⽤宽度
windowWidth: '',
//屏幕可⽤⾼度
windowHeight: '',
//流视频对象
livePusher: null,
//照⽚
snapshotsrc: null,
//倒计时
second: 0,
ifPhoto: false,
// ⽤户信息
userInfo: []
};
},
onLoad() {
//获取屏幕⾼度
this.initCamera();
/
/获取⽤户数据
this.userInfo = StorageSync('userInfo')
setTimeout(() => {
//倒计时
}, 500)
},
onReady() {
// console.log('初始化直播组件');
this.livePusher = ateLivePusherContext('livePusher', this); },
onShow() {
/
this.startPreview();
},
methods: {
//获取屏幕⾼度
initCamera() {
let that = this
success: function(res) {
that.windowWidth = res.windowWidth;
that.windowHeight = res.windowHeight;
that.cameraWidth = res.windowWidth;
that.cameraHeight = res.windowWidth * 1.5;
}
});
},
//启动相机
startPreview() {
this.livePusher.startPreview({
success(res) {
console.log('启动相机', res)
}
});
},
//停⽌相机
stopPreview() {
let that = this
this.livePusher.stopPreview({
success(res) {
console.log('停⽌相机', res)
}
});
},
/
/摄像头状态
statechange(e) {
console.log('摄像头', e);
if (this.ifPhoto == true) {
//拍照
this.snapshot()
}
},
//抓拍
snapshot() {
let that = this
this.livePusher.snapshot({
success(res) {
that.snapshotsrc = pImagePath; that.pImagePath) }
});
},
// 倒计时
getCount() {
this.second = 5
let timer = setInterval(() => {
this.second--;
if (this.second < 1) {
clearInterval(timer);
this.second = 0
this.ifPhoto = true
this.statechange()
}
}, 1000)
},
// 图⽚上传
uploadingImg(e) {
let url = e
// console.log(url);
let that = this
uni.uploadFile({
url: operate.api + 'api/common/upload',
filePath: url,
name: 'file',
formData: {
token: ken
},
success(res) {
// console.log(res);
let list = JSON.parse(res.data)
/
/ console.log(list);
}
})
},
//验证请求
request(url) {
let data = {
token: ken,
photo: url
}
// console.log(res);
title: res.data.msg
})
if (de == 1) {
setTimeout(() => {
}, 500)
}
if (de == 0) {
setTimeout(() => {
this.anew(res.data.msg)
}, 500)
}
})
},
// 认证失败，重新认证
anew(msg) {
let that = this
uni.showModal({
content: msg,
confirmText: '重新审核',
success(res) {
if (firm) {
// console.log('⽤户点击确定');
} else if (res.cancel) {
// console.log('⽤户点击取消');
uni.navigateBack({
delta: 1
})
}
}
})
},
}
};
</script>
css 样式
<style lang="scss">
// 标题
.title {
font-size: 35rpx;
align-items: center;
justify-content: center;
}
.live-camera {
.preview {
justify-content: center; align-items: center;
.outline-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 99;
align-items: center;
justify-content: center; .outline-img {
width: 750rpx;
height: 1125rpx;
}
}
.remind {
人脸抓拍
position: absolute;
top: 880rpx;
width: 750rpx;
z-index: 100;
align-items: center;
justify-content: center; .remind-text {
color: #dddddd;
font-weight: bold; }
}
}
}
</style>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议