uniapp:人脸识别功能,已测试,直接复制源码,支持H5,APP安卓。不依赖任何js,SDK。

news2024/11/13 4:29:10

先看效果图H5:
在这里插入图片描述
在这里插入图片描述
APP效果图:
在这里插入图片描述

H5:H5端代码用.html实现,uniapp打包H5拉相机有问题,不多赘述。
时间原因没有适配,直接用的px单位,
注意:本地无法测试,必须传到线上之后,通过https访问才能正常开启摄像头!!!

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Camera Capture</title>
		<style>
			.header {
     
				padding: 20px 0 10px;
				text-align: center;
			}

			.header .text1 {
     
				font-size: 14px;
				color: #141414;
				margin-bottom: 15px;
			}

			.header .text2 {
     
				font-size: 12px;
				color: #AAAAAA;
			}

			.img {
     
				width: 204px;
				height: 204px;
				border-radius: 50%;
				border: 2px solid #8FEEAC;
				background-color: #7D7D7D;
				margin: 0 auto 32px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#camera {
     
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-color: #7D7D7D;
			}
			.list{
     
				padding: 24px 0;
				width: 90%;
				margin: auto;
				border-top: 1px solid #A0A0A0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.list img{
     
				display: block;
				margin: 0 auto 12px;
				width: 40px;
				height: 40px;
			}
			.list p {
     
				text-align: center;
				font-size: 12px;
				color: #505050;
			}
			
			.btn {
     
				display: block;
				width: 90%;
				height: 40px;
				line-height: 40px;
				background: #2CD25F;
				border-radius: 10px;
				margin: 12px auto 0;
				text-align: center;
				font-size: 14px;
				color: #FEFEFE;
				border: none;
			}

			.tips {
     
				text-align: center;
				font-size: 14px;
				color: #AAAAAA;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="text1">确认某*某本人操作</div>
			<div class="text2">请保持正脸在取景框中根据屏幕指示完成识别</div>
		</div>
		<div class="img">
			<video 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164336.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python二进制文件转nc(以PIOMAS海冰厚度数据为例)

一、数据下载 数据网址Polar Science Center PIOMAS Variables on Model Grid (uw.edu) 以其中的海冰厚度数据为例进行转化 点击下载需要的年份&#xff1a; 首先要明白&#xff0c;二进制文件是4个字节按顺序依次存储所有数据&#xff0c;因此heff.H1979是没有记录对应的地…

CN考研真题知识点二轮归纳(5)

本轮的最后一贴&#xff0c;真题中涉及计网的部分彻底总结完&#xff01;后期的3轮总结可能会上一些大题&#xff0c;比如路由转发、子网划分什么的&#xff0c;以及重点的背诵内容~ 上期目录&#xff1a; CN考研真题知识点二轮归纳&#xff08;4&#xff09;https://jslhyh32…

19.10 Boost Asio 同步文件传输

在原生套接字编程中我们介绍了利用文件长度来控制文件传输的方法&#xff0c;本节我们将采用另一种传输方式&#xff0c;我们通过判断字符串是否包含goodbye lyshark关键词来验证文件是否传输结束了&#xff0c;当然了这种传输方式明显没有根据长度传输严谨&#xff0c;但使用这…

创新工具箱!重塑手机页面原型设计体验

在2024年&#xff0c;随着移动设备的普及和用户对移动体验的要求不断提升&#xff0c;手机页面原型设计工具变得越来越重要。在这篇文章中&#xff0c;我将为您推荐几款在2024年非常流行且值得一试的手机页面原型设计工具。 Pixso Pixso是一款基于云端的协作设计工具&#xf…

输入几个数,分别输出其中的奇数和偶数

这个问题我们只需要设计几个循环嵌套在一起就可以解决&#xff0c;话不多说&#xff0c;我们直接上代码 目录 1.运行代码 2.运行结果 1.运行代码 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #include<string.h>int main() {int arr[10] {1,2,3,4,5,6,…

【蓝桥杯基础题】星期一

👑专栏内容:蓝桥杯刷题⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停目录 一、题目描述二、题目分析三、代码汇总1、C++代码2、Java代码四、总结求解闰年一、题目描述 题目链接:星期一 整个20世纪(1901年1月1日至2000年12月31日之间),一共有多少个星期一…

kvm--网桥搭建

确定需要桥接的网卡 查看ip地址&#xff1a; 这里使用网卡enp125s0f2做桥接网卡 修改网卡配置 操作系统&#xff1a;kylinv10SP1(Tercel) 查看网卡配置文件&#xff1a; cd /etc/sysconfig/network-scripts/ ls 备份网卡文件 cp ifcfg-enp125s0f2 ifcfg-enp125s0f2.bak …

AutoDL 云/本地部署 百川2、GLM2

AutoDL 云上部署 百川2、GLM2 AutoDL 云上部署 百川2、GLM2配置环境体验常见问题huggingface访问不了&#xff0c;使用学术资源加速大文件上传&#xff0c;百度、阿里网盘都可CUDA 空间不足系统盘空间不足省钱绝招软件源 本地部署 百川2、GLM2根据显存大小选模型拉取docker镜像…

Linux编译器vim的使用

文章目录 vim基本概念vim的常用三种模式vim三种模式的相互转换 vim命令模式下的命令集移动光标删除文字剪切/删除复制替换撤销和恢复跳转至指定行 vim底行模式下的命令集 vim基本概念 vim是Linux下的一个多模式的编译器 简单来说就是写代码的工具 不提供编译调试等功能 有语法…

警惕!当心AI诈骗!

本文参照材料有&#xff1a; 鄂尔多斯新闻公众号、澎湃新闻网、搜孤新闻、腾讯网等 AI换脸诈骗实例&#xff08;就发生在近期&#xff09; 事例一&#xff1a; 近期 “AI换脸”新型诈骗频发和你视频对话的可能不是本人&#xff01; 近日&#xff0c;东胜市民李女士遭遇了冒充…

AN动画基础——路径动画

【AN动画基础——路径动画】 路径动画基础使用其他效果沿着路径放大沿路径着色调整到路径 本篇内容&#xff1a;了解路径动画 重点内容&#xff1a;路径动画应用 工 具&#xff1a;Adobe Animate 2022 路径动画 路径动画是一种在动画中沿着一条预设路径进行移动的效果。 路径可…

【Qt控件之QLineEdit】N多种用法及技巧

【Qt控件之QLineEdit】N多种用法及技巧 介绍用法用法1&#xff1a;信号触发 用法2&#xff1a;添加动作用法3&#xff1a;删除光标最侧字符用法4&#xff1a;设置光标位置用法5&#xff1a;删除用法6&#xff1a;选择和取消选择用法7&#xff1a;不为空时是否显示清除按钮用法8…

2023年江西省职业院校技能大赛网络建设与运维赛项省赛样题

2023年江西省职业院校技能大赛 网络建设与运维赛项省赛样题 竞赛说明&#xff1a; 1.禁止携带和使用移动存储设备、计算器、通信工具及参考资料。 2.请根据大赛所提供的比赛环境&#xff0c;检查所列的硬件设备、软件及文档清单、材料清单是否齐全&#xff0c;计算机设备是否能…

Java实验一编程环境使用

1&#xff0e;String类的常用方法&#xff08;StringExample.java&#xff09; package step1;public class StringExample {public static void main(String args[]) {String s1 new String("you are a student");String s2 new String("how are you")…

outlook是什么软件outlook邮箱撤回邮件方法

Outlook是微软公司开发的一款邮件客户端&#xff0c;也是Office办公套件的一部分。它可以与多个电子邮件服务提供商&#xff08;如Outlook.com、Exchange、Gmail等&#xff09;集成&#xff0c;用户可以使用Outlook来发送、接收和管理电子邮件、日历、联系人、任务等信息。本篇…

【好玩的开源项目】Linux系统之部署捕鱼达人经典小游戏

【好玩的开源项目】Linux系统之部署捕鱼达人经典小游戏 一、捕鱼达人小游戏介绍1.1 捕鱼达人小游戏简介1.2 项目地址 二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍 三、安装httpd软件3.1 检查yum仓库3.2 安装httpd软件3.3 启动httpd服务3.4 查看httpd服务3.5 防火墙和sel…

vue-浏览器安装Vue开发者工具

极简插件&#xff1a;下载->开发者模式->拖曳安装->插件详情允许访问文件 网址&#xff1a;https://chrome.zzzmh.cn/index 搜索Vue Devtools 下载下来的安装包先解压 然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项&#xff0c;然后点进去管理…

提示3D标题编辑器仍在运行怎么解决,以及3D标题编辑器怎么使用

在进行视频剪辑时&#xff0c;尤其是剪辑一些带有文字的开场视频&#xff0c;一般都会使用具有立体效果的3D标题&#xff0c;这样制作出来的视频效果不仅好看&#xff0c;还非常的炫酷&#xff0c;但是对于一些刚刚开始接触视频剪辑的小伙伴来说&#xff0c;可能对3D标题还不是…

网工内推 | 大专以上,福利待遇好,IE认证优先(云厂商)

01 主动脉科技有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1.负责云计算&#xff0c;IDC&#xff0c;BGP网络&#xff0c;通过团队协作&#xff0c;构建云业务后台技术支持服务体系。 2.通过工单、其他通讯工具等线上方式完成对客户的实施售后支持&#x…

后端开发基本步骤(未完成继续写中)

1.使用spring initializr创建项目 注意&#xff1a;然后低下提供的依赖可用可不用&#xff0c;先不用&#xff0c;后边Maven统一配置依赖&#xff0c; 2.导入依赖 <!-- web --> <dependency><groupId>org.springframework.boot</groupId><artifa…