uni-app简单模拟人脸识别

uni-app使用live-pusher简单模拟人脸识别页面样式

实现想法

公司的需求是模拟一个人脸识别,不用第三发插件,简单模拟样式即可。

基本思路是调起手机前置摄像头 ,再设置一个圆形的样式来达到一个基本样式

调起手机摄像头

看了官方的媒体组件,只有camera和live-pusher比较合适

camera不支持App,并且需要触发调用,不合符需求

所以只剩下live-pusher一个选择

引入组件,并基础设置后

javascript 复制代码
<live-pusher id="pusherId" 
			 ref="pusherRef" 
			 class="livePusher" 
             aspect="1:1"    // 宽高比例
             :whiteness="1"  // 美白
             :beauty="1"     // 美颜
             />

我们在页面上可以看见效果

不过这里需要注意一下,如果你是 nvue 页面,还需要手动调起一下摄像头

javascript 复制代码
onMounted(() => {
	const instance = getCurrentInstance() as ComponentInternalInstance;
    const pusherContext = uni.createLivePusherContext("pusherId", instance.ctx)
    pusherContext.startPreview() 
})

官方文档中写默认摄像头为前置,但此时显示的是后置摄像头,并且设置的默认前置也是不生效的,需要手动翻转一下

javascript 复制代码
onMounted(() => {
	// 获取当前组件实例
	const instance = getCurrentInstance() as ComponentInternalInstance;
    // 获取live-pusher上下文对象
    const pusherContext = uni.createLivePusherContext("pusherId", instance.ctx)
    // 翻转摄像头
    pusherContext.switchCamera()
})

设置圆形

这是一个令人头疼的问题

组件设置宽高为正方形后,设置了圆角属性不生效

尝试了nvue页面在父级元素画圆后设置溢出隐藏,也无济于事

最后添加了cover-img标签,用一张圆形的图片盖住四角达到的效果

javascript 复制代码
  <template>
	   <div class="face">
	     <view>拿起手机,眨眨眼</view>
	     <div class="pushContent">
	       <live-pusher id="pusherId" ref="pusherRef" class="livePusher" 
	                  aspect="1:1" :whiteness="1" :beauty="1" device-position="front"
	                  />
	       <cover-image class="pusherImg" src="/static/images/faceRadio.png" alt=""></cover-image>
	     </div>
	   </div>
  </template>
  <script lang="ts" setup>
  import { onMounted, ref, getCurrentInstance, type ComponentInternalInstance } from 'vue';

  const pusherRef = ref({} as UniHelper.LivePusherInstance)
  
  onMounted(() => {
    const instance = getCurrentInstance() as ComponentInternalInstance;
    const pusherContext = uni.createLivePusherContext("pusherId", instance.ctx)
	pusherContext.switchCamera()
    // pusherContext.startPreview({}) // nvue 页面吊起摄像头
  })   
  </script> 
  <style>
	  page{
	    background-color: #FFF !important;
	  }
  </style>
  <style lang="scss"  scoped>
  .face{
    padding: 46rpx 45rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .pushContent{
      position: relative;
      width: 300rpx;
      height: 300rpx;
      border-radius: 250rpx;
      overflow: hidden;
      margin: 50rpx auto;
      .livePusher{
        width: 300rpx;
        height: 300rpx;
        border-radius: 50%;
      }
      .pusherImg{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          width: 300rpx;
          height: 300rpx;
        }
    }
  }
  </style>

看下最终效果,先这样吧。

有别的好的方法,请路过留言,万分感谢!

相关推荐
希忘auto1 天前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE2 天前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king2 天前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐7 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui7 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng9268 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20218 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒9 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang20219 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节
一个通信老学姐9 天前
专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节