当前位置: 首页 > news >正文

uni-app简单模拟人脸识别

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>

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

相关文章:

uni-app简单模拟人脸识别

uni-app使用live-pusher简单模拟人脸识别页面样式 实现想法调起手机摄像头设置圆形 实现想法 公司的需求是模拟一个人脸识别&#xff0c;不用第三发插件&#xff0c;简单模拟样式即可。 基本思路是调起手机前置摄像头&#xff0c;再设置一个圆形的样式来达到一个基本样式 调起…...

华为HCIE-OpenEuler认证详解

华为HCIE认证&#xff08;Huawei Certified ICT Expert&#xff09;是华为提供的最高级别的专业认证&#xff0c;它旨在培养和认证在特定技术领域具有深厚理论知识和丰富实践经验的专家级工程师。对于华为欧拉&#xff08;OpenEuler&#xff09;方向的HCIE认证&#xff0c;即HC…...

从零开始的Go语言之旅(2 Go by Example: Values)

Go 语言有多种值类型&#xff0c;包括字符串、整数、浮点数、布尔值等。以下是一些基本示例。 package mainimport "fmt"func main() {fmt.Println("go" "lang")fmt.Println("11 ", 11)fmt.Println("7.0/3.0 ", 7.0/3.0)f…...

XShell 中实现免密登录 Linux 服务器的详细流程

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;Linux系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;Linux知识点的补充_Jason_from_China的博客-CSDN博客 XShell 中实现免密登录 Linux 服务器的详细流程&#xff1a; 一、在本地生成…...

跨界创新|使用自定义YOLOv11和Ollama(Llama 3)增强OCR文本识别

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

一些关于 WinCC Comfort 和 WinCC Advanced 脚本编程语言 VBS 的实用技巧

为什么一个由内部变量的 “数值更变” 事件触发的脚本不执行&#xff1f; 如果使用一个内部变量调用另外一个内部变量&#xff0c;以此&#xff0c;例如被调用的变量又去执行一个脚本&#xff08;比如&#xff0c;根据变量变化&#xff09;&#xff0c;此时一个安全机制会阻止这…...

Java|乐观锁和悲观锁在自旋的时候分别有什么表现?

乐观锁和悲观锁是两种不同的并发控制策略&#xff0c;各自采用不同的机制来处理线程之间的资源竞争。 乐观锁 1. 定义 乐观锁是一种假设冲突不会发生的并发控制策略&#xff0c;通常不对资源进行加锁&#xff0c;而是在操作前不加锁&#xff0c;操作后再进行验证。乐观锁通常…...

Linux定时器定时任务清理log日志文件

首先&#xff0c;创建xx.sh文件&#xff0c;内容如下 #!/bin/bash sfecho "" > /var/lib/docker/containers/12379e809ea1294eea9b117368181cff1dd3915fdb1611f940c5cf3d6077d734/12379e809ea1294eea9b117368181cff1dd3915fdb1611f940c5cf3d6077d734-json.log 打…...

美国大学生数学建模竞赛(MCM/ICM)介绍

美国大学生数学建模竞赛(MCM/ICM)是一项具有较高影响力的国际赛事。以下是一份美赛教程: 一、前期准备 组队 寻找合适的队友,最好具备不同的专业技能,如数学、计算机、工程等。团队成员应具备良好的沟通能力、合作精神和责任心。明确各自的分工,例如有人负责建模、有人负…...

【独家:AI编程助手Cursor如何revolutionize Java设计模式学习】

【独家:AI编程助手Cursor如何revolutionize Java设计模式学习】 导语 在Java高级编程的世界里,设计模式是每个开发者必须掌握的利器。但是,如何快速理解并灵活运用这些模式呢?让我们一起探索如何借助AI编程助手Cursor,轻松掌握设计模式,提升Java编程技能! 正文 设计模式:J…...

数据仓库宽表概述

宽表是指一种将多个相关数据集整合到一个表中的数据建模方法&#xff0c;具有减少连接操作、提高查询性能、简化数据管理的优点。 一、宽表的定义 宽表&#xff0c;顾名思义&#xff0c;是一种在数据仓库中使用的表格形式&#xff0c;其特征是包含了大量的列。这种表格设计的…...

在数据库中编程 vs 在应用程序中编程

原文地址 https://brandur.org/fragments/code-database-vs-app 数据库领域有一个长期存在的问题&#xff1a;你是更愿意将应用逻辑放在更接近数据库本身的存储过程和触发器中&#xff0c;还是置于数据库之上的应用程序代码中&#xff1f; 没有客观正确的答案&#xff0c;只有…...

【设计模式系列】装饰器模式

目录 一、什么是装饰器模式 二、装饰器模式中的角色 三、装饰器模式的典型应用场景 四、装饰器模式在BufferedReader中的应用 一、什么是装饰器模式 装饰器模式是一种结构型设计模式&#xff0c;用于在不修改对象自身的基础上&#xff0c;通过创建一个或多个装饰类来给对象…...

你真的知道TCP协议中的序列号确认、上层协议及记录标识问题吗?

引言 在前面的内容中&#xff0c;我们已经详细讲解了一系列与TCP相关的面试问题。然而&#xff0c;这些问题都是基于个别知识点进行扩展的。今天&#xff0c;我们将重点讨论一些场景问题&#xff0c;并探讨如何解决这些问题。 序列号确认问题 当A主机与B主机建立了TCP连接后…...

一家生物技术企业终止,科创属性可能不足,报告期内专利数猛增

轩凯生物九成以上营业收入来源于植物营养领域&#xff0c;收入来源结构单一&#xff0c;产品下游应用领域较为集中。报告期内公司应收账款账面价值逐年上升&#xff0c;回款比例显著低于前两年&#xff0c;遭交易所问询是否存在较大的坏账风险。 轩凯生物核心技术是否成熟以及是…...

使用 Python 的 BeautifulSoup(bs4)解析复杂 HTML

使用 Python 的 BeautifulSoup&#xff08;bs4&#xff09;解析复杂 HTML&#xff1a;详解与示例 在 Web 开发和数据分析中&#xff0c;解析 HTML 是一个常见的任务&#xff0c;尤其是当你需要从网页中提取数据时。Python 提供了多个库来处理 HTML&#xff0c;其中最受欢迎的就…...

Spring Cache Caffeine 高性能缓存库

​ Caffeine 背景 Caffeine是一个高性能的Java缓存库&#xff0c;它基于Guava Cache进行了增强&#xff0c;提供了更加出色的缓存体验。Caffeine的主要特点包括&#xff1a; 高性能&#xff1a;Caffeine使用了Java 8最新的StampedLock乐观锁技术&#xff0c;极大地提高了缓存…...

Python3入门--数据类型

文章目录 一、基础语法编码标识符注释单行注释以 # 开头多行注释用多个 # 号&#xff0c;还有 和 """ 空行行与缩进同一行显示多条语句多行语句 二、数据类型Number&#xff08;数字&#xff09;type和isinstance查询变量类型数值运算 String&#xff08;字符串…...

开发运维警示录-20241024

开发警示录 1、作为开发&#xff0c;不要私自修改业务人员给的SQL语句&#xff0c;虽然个人感觉SQL很冗余&#xff0c;效率低等。 2、开发前&#xff0c;要明确需求&#xff0c;必要时通过图和文字形成文档与需求方确认、留痕。 3、开发复杂的业务逻辑代码前&#xff0c;先疏通…...

Linux运维_搭建smb服务

Samba&#xff08;SMB&#xff09;是一个开源软件&#xff0c;允许Linux和Unix系统与Windows系统共享文件和打印机。以下是一些关于Samba和SMB的基本信息和操作步骤&#xff1a; Samba 和 SMB 基本概念 Samba&#xff1a;实现了SMB&#xff08;Server Message Block&#xff…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...