uniapp人脸识别

流浪的菜袅

已于 2023-11-13 11:25:14 修改

阅读量230

点赞数

分类专栏： uniapp 文章标签：笔记 uni-app

于 2023-11-12 20:52:34 首次发布

本文链接：https://blog.csdn.net/m0_75062458/article/details/134364600

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码思路借鉴于这个文章https://blog.csdn.net/maidu_xbd/article/details/110296865https://blog.csdn.net/maidu_xbd/article/details/110296865

如果和我一样是菜鸟那就先看一下文档，主要先了解Video、Io、Zip、Webview模块HTML5+ API Reference (html5plus.org)https://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusherStyles

完整代码

plusVideo.vue页面

<template>
	<view class="body" :style="{height:height+'px'}">
		<img :src="imgData" ref="img" class="img-data" />
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				imgData: '',
				pusher: null,
				scanWin: null,
				snapshotTimeoutNumber: 3000,
				faceInitTimeout: null,
				snapshTimeout: null
			};
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					// this.height = res.windowHeight
					this.height= 200
				}
			})
		},
		onLoad() {
			uni.showToast({
				title: "正在打开摄像头，请稍后",
				icon: "none"
			})
			//#ifdef APP-PLUS
			this.faceInit();
			//#endif
		},
		onHide() {
			this.faceInitTimeout && clearTimeout(this.faceInitTimeout);
			this.snapshTimeout && clearTimeout(this.snapshTimeout);
			this.scanWin.hide();
		},
		methods: {
			// （5）将base64图片【this.imgData】发送给后台
			faceHttp() {
				// 省略后台请求
				uni.navigateTo({
					url: "/pages/code/code"
				})
 
			},
			// （1）通过plus.video.createLivePusher创建直播推流
			pusherInit() {
				//获取当前窗口对象
				const currentWebview = this.$mp.page.$getAppWebview();
				//创建视频推流对象，url是视频上传到的服务器地址，不填表示不传视频
				this.pusher = plus.video.createLivePusher('livepusher', {
					url: '',
					top: '29%',
					mode:'FHD',
					beauty:1,
					whiteness:3,
					left: '30%',
					width: '170px',
					height: '172px',
					position: 'absolute',
					aspect: '9:16',
					'z-index':777
				});
				// 将推流对象append到当前页面中
				currentWebview.append(this.pusher);
				// 预览摄像头采集数据
				this.pusher.preview();
			},
 
			faceInit() {
				this.faceInitTimeout = setTimeout(() => {
					this.pusherInit();
					//覆盖在视频之上的内容，-比如扫描框 
					// （2）利用plus.webview.create将扫描框页面及扫描动画（hybrids.html）覆盖在视频之上；
					this.scanWin = plus.webview.create('/hybrid/html/scan.html', '', {borderRaduis: '50%',top:'160px',bottom:'0px',background: 'transparent', replacewebapi:{geolocation:'auto'}});
					// 显示视频播放控件
					this.scanWin.show();
					this.snapshotPusher();
					uni.hideToast();
				}, 200);
			},
			// （3）利用liverPusher对象的snapshot方法创建视频快照
			snapshotPusher() {
				// 切换摄像头
				this.pusher.switchCamera();
				this.snapshTimeout = setTimeout(() => {
					this.pusher.snapshot(
						e => {
							// 关闭直播推流控件
							this.pusher.close();
							// 隐藏视频播放控件
							this.scanWin.hide();
							var src = e.tempImagePath;
							// 使用plus.zip.compressImage压缩图片
							this.getMinImage(src);
						},
						function(e) {
							plus.nativeUI.alert('snapshot error: ' + JSON.stringify(e));
						}
					);
				}, this.snapshotTimeoutNumber);
			},
			// （4）使用plus.zip.compressImage压缩图片
			getMinImage(imgPath) {
				plus.zip.compressImage({
						src: imgPath,
						dst: imgPath,
						overwrite: true,
						quality: 40
					},
					zipRes => {
						setTimeout(() => {
							// IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象
							// 文件系统中的读取文件对象，用于获取文件的内容
							var reader = new plus.io.FileReader();
							// 文件读取操作完成时的回调函数
							reader.onloadend = res => {
								var speech = res.target.result; //base64图片
								console.log(speech.length);
								this.imgData = speech;
								//将图片发送给后台
								this.faceHttp();
							};
							//一定要使用plus.io.convertLocalFileSystemURL将target地址转换为本地文件地址，否则readAsDataURL会找不到文件
							reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));
						}, 1000);
					},
					function(error) {
						console.log('Compress error!', error);
					}
				);
			},
 
		},
 
	};
</script>
 
<style lang="scss" scoped>
	.body {
		width:100%;
	}
	.img-data {
		width: 100%;
		height: auto;
	}
</style>

scan.html页面

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>人脸采集</title>
	<style>
		.center2 {
			top: 0%;
			position: absolute;
			width: 450px;
			height: 450px;
			left:9%;
			margin: auto;
			border: 200px solid #fff;
			z-index: 999;
			border-radius: 50%;
			background: transparent;
		}
	</style>
	</head>
	<body>
		<div style="position: relative;">
			<div class="center1"></div>
			<div class="center2"></div>
		</div>
	</body>	
</html>

遇到的问题

用作扫描框的页面无法打开

scan.html页面当前所在位置：

在利用plus.webview.create将扫描框进行覆盖操作时：

this.scanWin = plus.webview.create('/aaaa/html/scan.html', '', {borderRaduis: '50%',top:'160px',bottom:'0px',background: 'transparent', replacewebapi:{geolocation:'auto'}});

此时所填写的文件名和地址和实际是没有错的，但是会报错，说请求的页面无法打开

这个问题在网上搜了很多，没有看到解决办法，只看到在一片文章中有人说扫描框页面所在的文件文件名必须是 hybrid，具体是为什么没说。然后我试了一下，将aaaa改成hybrid之后，扫描框页面就能正常打开了。（要是有会的看到了，麻烦留言告知，谢谢！）

this.scanWin = plus.webview.create('/hybrid/html/scan.html', '', {borderRaduis: '50%',top:'160px',bottom:'0px',background: 'transparent', replacewebapi:{geolocation:'auto'}});

预览的直播推流窗口层级太高、样式无法修改

当成功将预览窗口打开后，会发现窗口是矩形的，需求正常是展现出来的窗口应该是圆形的，而实际上矩形的。

翻了半天文档，没有找到可以去设置窗口形状的属性或者方法，网上看了很多文章也没有说这个的，可能这就是大牛和菜鸟之间的鸿沟吧，人家觉得不值一提的东西，我在这里眼巴巴的，哎，这个咋回事，这个咋不行啊？

没办法，只能从扫描框的样式去入手解决问题。因为扫描框是覆盖在上面的，它始终是在预览窗口之上。

在扫描框页面中设置一个圆形的盒子，边框要大大大大，背景色透明，调整好距离，展现出来的效果就是圆形了。

但是这样有个问题，不同的设备它样式上会稍有点差异，难免会出现偏差。（要是有会的看到了，麻烦留言告知，谢谢！）

后端nodejs的还没做，等看了百度的api再做，要是调api用钱的话就不搞了，的亏穷不犯法，不然我就牢底坐穿了。

流浪的菜袅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uniapp人脸识别

scan.html页面当前所在位置：此时所填写的文件名和地址和实际是没有错的，但是会报错，说请求的页面无法打开这个问题在网上搜了很多，没有看到解决办法，只看到在一片文章中有人说扫描框页面所在的文件文件名必须是 hybrid，具体是为什么没说。然后我试了一下，将aaaa改成hybrid之后，扫描框页面就能正常打开了。
复制链接

扫一扫