uni-app简单模拟人脸识别

news/2024/10/25 14:08:31/

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

    • 实现想法
    • 调起手机摄像头
    • 设置圆形

实现想法

公司的需求是模拟一个人脸识别,不用第三发插件,简单模拟样式即可。
基本思路是调起手机前置摄像头,再设置一个圆形的样式来达到一个基本样式

调起手机摄像头

看了官方的媒体组件,只有camera和live-pusher比较合适
camera不支持App,并且需要触发调用,不合符需求
在这里插入图片描述
所以只剩下live-pusher一个选择
引入组件,并基础设置后

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

我们在页面上可以看见效果
在这里插入图片描述

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

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

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

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

设置圆形

这是一个令人头疼的问题
组件设置宽高为正方形后,设置了圆角属性不生效
尝试了nvue页面在父级元素画圆后设置溢出隐藏,也无济于事
最后添加了cover-img标签,用一张圆形的图片盖住四角达到的效果

  <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>

看下最终效果,先这样吧。
有别的好的方法,请路过留言,万分感谢!
在这里插入图片描述


http://www.ppmy.cn/news/1541841.html

相关文章

计算机网络-MSTP概述

一、RSTP/STP的缺陷与不足 前面我们学习了RSTP对于STP的一些优化与快速收敛机制。但在划分VLAN的网络中运行RSTP/STP&#xff0c;局域网内所有的VLAN共享一棵生成树&#xff0c;被阻塞后的链路将不承载任何流量&#xff0c;无法在VLAN间实现数据流量的负载均衡&#xff0c;导致…

开放式耳机推荐千元左右有哪些?开放式耳机推荐品牌

而近年来&#xff0c;开放式耳机异军突起&#xff0c;受到了越来越多人的关注与喜爱。然而&#xff0c;市面上的开放式耳机种类繁多&#xff0c;品牌各异&#xff0c;质量和性能也参差不齐&#xff0c;这让消费者在选择时常常感到困惑。开放式耳机推荐千元左右有哪些&#xff1…

实时面部情绪识别(一)

文章目录 实时面部情绪识别&#xff08;一&#xff09;一、linux一、Tensorflow 安装1、虚拟环境2、安装cudnn和cuda2、校验依赖 二、复现1、依赖2、运行 三、常见问题1、cant open camera by index 二、Windows一、环境1、虚拟环境2、设置镜像&#xff08;可选&#xff09;3、…

Rust 问号(?)操作符简化错误处理

Rust以其安全性和性能而闻名&#xff0c;它引入了几个特性来确保健壮的错误处理。其中&#xff0c;问号&#xff1f;操作符是Rust语言中的重要工具。它能够简化错误处理&#xff0c;使代码更具可读性和简洁性。 什么是&#xff1f;操作符 在Rust中&#xff0c;错误处理通常使…

计算机组成原理一句话

文章目录 计算机系统概述数据的表示与运算存储系统DRAM固态硬盘芯片片选磁盘RAID多模块存储器cache 指令系统寻址方式指令格式扩展操作码 中央处理器单周期处理器各类部件微程序控制器中断与异常流水线 总线输入输出设备I/O方式 计算机系统概述 指令和数据以同等地位存储在存储…

【C++面试刷题】快排(quick_sort)和堆排(priority_queue)的细节问题

一、快排的快速选择算法两种思路&#xff08;面试会考&#xff09;O(N) 快排的三数取中思路&#xff1a; 重要的是将它三个数进行排序最左为最小&#xff0c;中间为次小&#xff0c;最右为最大的数。&#xff08;错误原因&#xff1a;我刚开始没有将这三个数进行排序&#xff…

设计模式(五)原型模式详解

设计模式&#xff08;五&#xff09;原型模式详解 原型模型简介 定义&#xff1a;原型模型是一种创建型设计模型&#xff0c;它允许通过克隆/复制现有对象来创建新的对象&#xff0c;而无需通过常规的构造函数进行实例化。 这种方式的主要优势是在运行时不需要知道具体的类&a…

E108-GN系列GNSS多模卫星导航定位模块产品说明

E108-GN03和E108-GN04系列系列GNSS多模卫星定位导航模块&#xff0c;具有高性能、高集成度、低功耗、低成本等特点。该系列GNSS多模卫星定位导航模块支持BDS/GPS/GLONASS/GALILEO卫星定位&#xff0c;可多系统联合定位或多系统单独定位&#xff01;米级高精度定位&#xff0c;A…