uniapp app 人脸识别的实现示例

由于 小程序端 有camera组件 直接就可以调起摄像头 但是 app端是不支持这个标签的 所以只能用其他的方法 使用 nvue 中 live-pusher 组件

子组件

<template>
	<div>
		<div class="livefater">
			<div style="width: 300px;height: 300px;border-radius: 150px;overflow: hidden;">
				<!-- orientation="horizontal" //设置垂直水平方向 -->
				<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
					mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
					aspect="1:1" @statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>
			</div>
			<cover-image src="/static/image/gai1.png" class="gaiimg"></cover-image>
		</div>
		<view class="message" style="color: #fff;">
			<text class="info">{{message}}</text>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			time: {
				default: 5000,
				type: Number
			},
			message: {
				default: '识别中,请稍后...',
				type: String
			}
		},
		data() {
			return {}
		},
		mounted() {

			// 注意:需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext("livePusher", this);
			var that = this
			uni.getSystemInfo({
				success: function(e) {
					// 计算导航栏高度
					that.statusBar = e.statusBarHeight
					// #ifndef MP
					if (e.platform == 'android') {
						that.CustomBar = e.statusBarHeight + 50
					} else {
						that.CustomBar = e.statusBarHeight + 45
					}
					console.log(that.statusBar)
					// #endif
					// #ifdef MP-WEIXIN
					let custom = wx.getMenuButtonBoundingClientRect()
					that.CustomBar = custom.bottom + custom.top - e.statusBarHeight

					// #endif  

					// #ifdef MP-ALIPAY
					that.CustomBar = e.statusBarHeight + e.titleBarHeight
					// #endif
				}
			})
			setTimeout(() => {
				this.startPreview()
			})
		},
		methods: {
			// 拍照事件
			snapshot: function() {
				var that = this
				this.context.snapshot({
					success: (e) => {
						console.log(e.message, '拍照信息');
						this.$emit('faceImg', e.message)
					}
				});
			},
			// 开启摄像头
			startPreview() {
				console.log("1")
				var that = this
				this.context.startPreview({
					success: (a) => {
						console.log("livePusher.startPreview:" + JSON.stringify(a));
						that.Timer = setInterval(function() {
							that.snapshot()
						}, that.time)
					},
					fail(err) {
						console.log(err);
					}
				});
			},
		},
	}
</script>

<style>
	<style lang="less">page {
		background: #0c8cf9;
	}

	.u-navbar__content__left {
		display: flex !important;
		align-items: center;
	}

	.u_nav_slot {
		display: flex;
		align-items: center;
		flex-direction: row;
		color: rgba(0, 0, 0, 0.9);
		font-size: 14.4rpx;
		font-weight: 700;

	}

	.text {
		margin-left: 1rpx;
		color: #fff;
		font-size: 16rpx;
	}

	.box {
		z-index: 99;
		position: absolute;
		left: 35%;
		top: 25%;
		width: 250rpx;
		height: 250rpx;
		background: pink;
	}

	.message {
		flex: 1;
		justify-content: center;
		align-items: center;
		font-weight: 700;
	}

	.info {
		color: #fff !important;
		font-size: 20rpx;
	}

	.livePusher {
		width: 300px;
		height: 300px;
	}

	.livefater {
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 50rpx;
		height: 350px;
	}

	.gaiimg {
		width: 300px;
		height: 300px;
		margin-top: -300px;
	}
</style>
</style>

由于 人脸一般是 原型 样式 但是默认的live-pusher 是正方形 而且层级是比较高的 其他普通元素标签是无法压住他的  但是 cover-imgae的图片是可以压上去的

父组件

<TestingFace :time="5000" @faceImg="faceImg" :message="message"></TestingFace>

faceImg 就是子组件传过来的 图片 message 是传过去的内容  time是倒计时的拍照时间,具体内容可以根据内容去加逻辑   注意 子父组件都是 nvue

到此这篇关于uniapp app 人脸识别的实现示例的文章就介绍到这了,更多相关uniapp app 人脸识别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解uniapp的全局变量实现方式

    前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook

  • uniapp动态修改元素节点样式详解

    目录 一,通过style属性绑定来修改 html: 对应的js: 实现的效果: 二,利用ref来获取dom元素节点 代码: 实现的效果: 总结 一,通过style属性绑定来修改 第一步:肯定是需要获取元素节点 在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效. 查看uniapp官网有一个uni.createSelectorQuery() API:可以通过这个属性获取标签的样式,在通过动态绑

  • uniapp和vue的区别详解

    目录 1.简单的页面示例 2.uni-app支持vue组件和小程序原生组件混用 3.常用标签,常用组件包括view.text.swiper.scroll-view等. 4.生命周期 4.1应用生命周期,这app.vue里面 4.2页面生命周期,可以做每个页面中写. 4.3组件生命周期, 相当于vue的生命周期. 5.使用插件 总结 项目目录: ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb │─components 符合vue组件规范的

  • uniapp实现可滑动选项卡

    本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l

  • uniapp实现日期时间选择器

    本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下 由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker.js dateTimePicker.js function withData(param){ return param < 10 ? '0' + param : '' + param; } function ge

  • uniapp 仿微信的右边下拉选择弹出框的实现代码

    在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件 这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单 这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

  • uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    前言 实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏.ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0) 一.需要用到的事件touchmove.touchend 二.话不多说上代码 1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view 代码如下: <view class="container" @touchmove="handletouchstart" @touchend="handl

  • uniapp app 人脸识别的实现示例

    由于 小程序端 有camera组件 直接就可以调起摄像头 但是 app端是不支持这个标签的 所以只能用其他的方法 使用 nvue 中 live-pusher 组件 子组件 <template> <div> <div class="livefater"> <div style="width: 300px;height: 300px;border-radius: 150px;overflow: hidden;"> <

  • python3.8动态人脸识别的实现示例

    一.准备依赖库 pip install dlib pip python-opencv 二.代码实现  #coding: utf-8 """ 从视屏中识别人脸,并实时标出面部特征点 """ import dlib #人脸识别的库dlib import cv2 #图像处理的库OpenCv # 使用特征提取器get_frontal_face_detector detector = dlib.get_frontal_face_detector() # 读

  • android实现人脸识别技术的示例代码

    1.前沿 人工智能时代快速来临,其中人脸识别是当前比较热门的技术,在国内也越来越多的运用,例如刷脸打卡,刷脸APP,身份识别,人脸门禁等.当前的人脸识别技术分为WEBAPI和SDK调用两种方式,WEBAPI需要实时联网,SDK调用可以离线使用. 本次使用的虹软提供的人脸识别的SDK,此SDK也可根据不同应用场景设计,针对性强.包括人脸检测.人脸跟踪.人脸识别,即使在离线环境下也可正常运行. 虹软公司是一家具有硅谷背景的图像处理公司,除了人脸技术以外,还有多项图像及视频处理技术.他们的双摄像头处理

  • 微信小程序实现人脸识别登陆的示例代码

    前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口.本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获! 步骤 步骤 涉及接口(百度云) 拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册) 拍摄照片并上传,云服务器在线比对 人脸

  • Dlib+OpenCV深度学习人脸识别的方法示例

    前言 人脸识别在LWF(Labeled Faces in the Wild)数据集上人脸识别率现在已经99.7%以上,这个识别率确实非常高了,但是真实的环境中的准确率有多少呢?我没有这方面的数据,但是可以确信的是真实环境中的识别率并没有那么乐观.现在虽然有一些商业应用如员工人脸识别管理系统.海关身份验证系统.甚至是银行人脸识别功能,但是我们可以仔细想想员工人脸识别管理,海关身份证系统的应用场景对身份的验证功能其实并没有商家吹嘘的那么重要,打个比方说员工上班的时候刷脸如果失败了会怎样,是不是重新识

  • Android人脸识别Demo竖屏YUV方向调整和图片保存(分享)

    本博客包含三个常用方法,用于盛开Android版人脸识别Demo中竖屏使用时送入yuv数据,但一直无法识别的情况. 1.首先可以尝试顺时针旋转90°或270°,然后送入识别SDK. 2.旋转方向后依然无法识别时,可以尝试saveImg( ),保存本地检查图片是否符合要求. /** * 视频顺时针旋转90 * 该方法仅仅在竖屏时候使用 * */ public static byte[] rotateYUV420Degree90(byte[] data, int imageWidth, int im

  • python+opencv实现的简单人脸识别代码示例

    # 源码如下: #!/usr/bin/env python #coding=utf-8 import os from PIL import Image, ImageDraw import cv def detect_object(image): '''检测图片,获取人脸在图片中的坐标''' grayscale = cv.CreateImage((image.width, image.height), 8, 1) cv.CvtColor(image, grayscale, cv.CV_BGR2GR

  • .NET做人脸识别并分类的实现示例

    在游乐场.玻璃天桥.滑雪场等娱乐场所,经常能看到有摄影师在拍照片,令这些经营者发愁的一件事就是照片太多了,客户在成千上万张照片中找到自己可不是件容易的事.在一次游玩等活动或家庭聚会也同理,太多了照片导致挑选十分困难. 还好有.NET,只需少量代码,即可轻松找到人脸并完成分类. 本文将使用Microsoft Azure云提供的认知服务(Cognitive Services)API来识别并进行人脸分类,可以免费使用,注册地址是:https://portal.azure.com.注册完成后,会得到两个

  • 使用卷积神经网络(CNN)做人脸识别的示例代码

    上回书说到了对人脸的检测,这回就开始正式进入人脸识别的阶段. 关于人脸识别,目前有很多经典的算法,当我大学时代,我的老师给我推荐的第一个算法是特征脸法,原理是先将图像灰度化,然后将图像每行首尾相接拉成一个列向量,接下来为了降低运算量要用PCA降维, 最后进分类器分类,可以使用KNN.SVM.神经网络等等,甚至可以用最简单的欧氏距离来度量每个列向量之间的相似度.OpenCV中也提供了相应的EigenFaceRecognizer库来实现该算法,除此之外还有FisherFaceRecognizer.L

  • 使用python-cv2实现Harr+Adaboost人脸识别的示例

    Haar特征 哈尔特征使用检测窗口中指定位置的相邻矩形,计算每一个矩形的像素和并取其差值.然后用这些差值来对图像的子区域进行分类. haar特征模板有以下几种: 以第一个haar特征模板为例 计算方式 1.特征 = 白色 - 黑色(用白色区域的像素之和减去黑色区域的象征之和) 2.特征 = 整个区域 * 权重 + 黑色 * 权重 使用haar模板处理图像 从图像的起点开始,利用haar模板从左往右遍历,从上往下遍历,并设置步长,同时考虑图像大小和模板大小的信息 假如我们现在有一个 1080 *

随机推荐