uni-app app端人脸识别

一点心 發表於 2021-7-13 18:11:00

在听到人脸识别，连忙去看看，去阿里腾讯看他们的人脸识别方法，官方sdk什么的。
 到后来，需求确定了，拍照（照片）上传，后台去识别是不是本人，这一瞬间从天堂到地狱，放着官方那么好的方法，不要。
 用照片，还的自己去写，去实现。
 下面为大家提供一个 uni-app 自动拍照上传照片后端做匹配处理。
 参考插件市场的 https://ext.dcloud.net.cn/plugin?id=4892
<h3 class="md-end-block md-heading">在使用前先去manifest.json 选择APP模块配置，勾选直播推流</h3>
<h3 class="md-end-block md-heading"><img src="https://img2020.cnblogs.com/blog/2237618/202107/2237618-20210713180105766-1235686586.png" alt="" loading="lazy"></h3>
直接采用nvue开发，直接使用live-pusher组件进行直播推流，如果是vue开发，则需要使用h5+的plus.video.LivePusher对象来获取
<h3 class="md-end-block md-heading">nuve js注意事项</h3>
注意nuve 页面 main.js 的封装函数。无法直接调用（小程序其他的端没有测试）
在APP端 this.api报错，显示是undefined，难道nvue页面，要重新引入api文件
在APP端，main.js中挂载Vuex在nvue页面无法使用this.$store.state.xxx
简单粗暴点直接用uni.getStorageSync 重新获取一遍
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">//获取用户数据 userInfo在Data里定义
this.userInfo = uni.getStorageSync('userInfo')</pre>
</div>
<h3 class="md-end-block md-heading">nuve css注意事项</h3>
单位只支持px
其他的em,rem,pt,%,upx 都不支持
需要重新引入外部css
不支持使用 import 的方式引入外部 css
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><style src="@/common/test.css"></style>
</pre>
</div>
　默认flex布
<div class="cnblogs_code">
<pre>display: flex; //不需要写
//直接用下面的标签
flex-direction: column;
align-items: center;
justify-content: space-between;</pre>
</div>
<h3 class="md-end-block md-heading md-focus">页面样式</h3>
<div class="cnblogs_code">
<pre><view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
 <view class="title">
 {{second}}秒之后开始识别
 </view>
 <view class="preview" :style="{ width: windowWidth, height: windowHeight-80 }">
 <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"
 :style="{ width: cameraWidth, height: cameraHeight }"></live-pusher>

 
 <cover-view class="remind">
 <text class="remind-text" style="">{{ message }}</text>
 </cover-view>

 
 <cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight-80 }">
 <cover-image class="outline-img" src="../../static/idphotoskin.png"></cover-image>
 </cover-view>
</view>
</view></pre>
</div>
<h3 class="md-end-block md-heading md-focus">JS部分<script>    import operate from '../../common/operate.js'    import api from '../../common/api.js'</h3>
<div class="cnblogs_code">
<pre> export default {
 data() {
 return {
 //提示
 message: '',
 //相机画面宽度
 cameraWidth: '',
 //相机画面宽度
 cameraHeight: '',
 //屏幕可用宽度
 windowWidth: '',
 //屏幕可用高度
 windowHeight: '',
 //流视频对象
 livePusher: null,
 //照片
 snapshotsrc: null,
 //倒计时
 second: 0,
 ifPhoto: false,
 // 用户信息
 userInfo: []
 };
 },
 onLoad() {
 //获取屏幕高度
 this.initCamera();
 //获取用户数据
 this.userInfo = uni.getStorageSync('userInfo')
 setTimeout(() => {
 //倒计时
 this.getCount()
 }, 500)
 },
 onReady() {
 // console.log('初始化直播组件');
 this.livePusher = uni.createLivePusherContext('livePusher', this);
 },
 onShow() {
 //开启预览并设置摄像头 　　　　　　　/* 　　　　　　　　* 2023年12月28日 　　　　　　　　* 在最新的APP上面这个周期比onReady 直播初始要早执行故而第二次进入页面相机启动失败　 　　　　　　　　* 把该方法移步到　onReady 即可</pre>
<pre>　　　　　　　　*/　　 　　　　　　　　this.startPreview();</pre>
<pre> },
 methods: {
 //获取屏幕高度
 initCamera() {
 let that = this
 uni.getSystemInfo({
 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 = res.message.tempImagePath;
 that.uploadingImg(res.message.tempImagePath)
 }
 });
 },
 // 倒计时
 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: that.userInfo.token
 },
 success(res) {
 // console.log(res);
 let list = JSON.parse(res.data)
 // console.log(list);
 that.request(list.data.fullurl)
 }
 })
 },
 //验证请求
 request(url) {
 let data = {
 token: this.userInfo.token,
 photo: url
 }
 api.renzheng(data).then((res) => {
 // console.log(res);
 operate.toast({
 title: res.data.msg
 })
 if (res.data.code == 1) {
 setTimeout(() => {
 operate.redirectTo('/pages/details/details')
 }, 500)
 }
 if (res.data.code == 0) {
 setTimeout(() => {
 this.anew(res.data.msg)
 }, 500)
 }
 })
 },
 // 认证失败，重新认证
 anew(msg) {
 let that = this
 uni.showModal({
 content: msg,
 confirmText: '重新审核',
 success(res) {
 if (res.confirm) {
 // console.log('用户点击确定');
 that.getCount()
 } else if (res.cancel) {
 // console.log('用户点击取消');
 uni.navigateBack({
 delta: 1
 })
 }
 }
 })
 },
 }
};
</script></pre>
</div>
<h3 class="md-end-block md-heading md-focus">css 样式</h3>
<div class="cnblogs_code">
<pre><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></pre>
</div>
<img src="https://img2020.cnblogs.com/blog/2237618/202107/2237618-20210713181028816-711610927.png" alt="" loading="lazy">
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/15007797.html 
来源：https://www.cnblogs.com/lovejielive/p/15007797.html

頁: [1]

琼殿技术论坛's Archiver

uni-app app端 人脸识别

uni-app app端人脸识别