uniapp 自定义相机人脸和人脸识别

uniapp 自定义相机人脸 和人脸识别

使用组件 live-pusher ，结合组件的预览（startPreview）和快照（snapshot）实现相机功能，人脸识别使用的是tracking-min.js和face-min.js 使用h5和uniapp交互识别人脸，人脸识别android可以识别，但是ios 快照的图片传递给h5 始终加载不出来，无法识别人脸，不知道为啥，若有好的方案感谢留言，整体代码如下（人脸背景图可以替换）：

<template>
	<view class="container">

		<live-pusher id='livePusher' ref="livePusher" mode="FHD" :muted="true" :enable-camera="true" :auto-focus="true"
			:beauty="1" whiteness="2" :aspect="aspect" :style="{ width: windowWidth, height: windowHeight}">
		</live-pusher>

		<view class="menu-bg" :style="{ width: windowWidth, height: windowHeight }">
			<image src="../../static/camera_bg.png" :style="{ width: windowWidth, height: windowHeight }"></image>

			<view class="take-photo-bg" :style="{ width: windowWidth}">
				<view class="take-photo" @click="takePhoto()"></view>
			</view>

			<view :style="{ width: windowWidth}" class="hint">
				<text style="color: #FFFFFF;font-size: 18px;padding: 15px;">{{hint}}</text>
			</view>
		</view>

		<web-view ref="webview" src="/hybrid/html/face.html" :style="{ width: windowWidth, height: windowHeight}"
			@onPostMessage="handlePostMessage">
		</web-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				livePusherContext: "",
				aspect: "3:2",
				windowWidth: '',
				windowHeight: '',
				hint: "",
				faceInterval: "",
			}
		},

		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
					this.windowHeight = res.windowHeight;
					let zcs = this.aliquot(this.windowWidth, this.windowHeight);
					this.aspect = (this.windowWidth / zcs) + ':' + (this.windowHeight / zcs);
				}
			});
		},

		onReady() {
			this.livePusherContext = uni.createLivePusherContext("livePusher", this);
			setTimeout(() => {
				this.preview()
			}, 500)

			this.faceInterval = setInterval(() => {
				this.checkFace()
			}, 3000)
		},

		onUnload() {
			clearInterval(this.faceInterval)
		},

		methods: {

			//整除数计算
			aliquot(x, y) {
				if (x % y == 0) return y;
				return this.aliquot(y, x % y);
			},

			preview() {
				this.livePusherContext.startPreview({
					success: (res) => {
						console.log("livePusher.start:" + JSON.stringify(res));
					}
				});
			},

			takePhoto() {
				this.livePusherContext.snapshot({
					success: res => {
						if (res.errMsg == "snapshot:ok") {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例

							prevPage.$vm.imgPath = res.message.tempImagePath; //修改上一页data里面的tagIndex 参数值
							prevPage.$vm.isImgPath = true; //修改上一页data里面的tagIndex 参数值
							uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
								delta: 1
							});
						}
					}
				});
			},

			checkFace() {
				this.livePusherContext.snapshot({
					success: res => {
						if (res.errMsg == "snapshot:ok") {
							this.$refs.webview.evalJs(
								"setFaceImg('" +
								res.message.tempImagePath +
								"')"
							);
						}
					}
				});
			},

			handlePostMessage(e) {
				console.log(e)
				this.hint = e.detail.data[0].code == 0 ? "未检测到人脸" : "人脸检测完毕";
				// #ifdef APP-PLUS
				plus.io.resolveLocalFileSystemURL(e.detail.data[0].imgPath, (entry) => {
					if (entry.isFile) {
						entry.remove((entry) => {
							console.log("删除成功")
						}, (err) => {
							console.log(err.message)
						});
					}
				}, (err) => {
					console.log(err.message)
				});
				// #endif
			}
		}

	}
</script>

<style lang="scss" scoped>
	.menu-bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
	}

	.take-photo-bg {
		position: fixed;
		bottom: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.take-photo {
		height: 100rpx;
		width: 100rpx;
		background-color: #cfd7db;
		border-radius: 50px;
		border: 5px solid #FFFFFF;
	}

	.hint {
		position: fixed;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.take-photo:active {
		background-color: #239AFF;
	}
</style>

h5部分，建同级目录hybrid/html/face.html,其中tracking-min.js和face-min.js 百度引入即可，代码如下：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>

		<style type="text/css">
			.img {
				height: 200px;
			}
		</style>


	</head>
	<body>

		<img id="img" src='' class="img"  />

		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script src="./js/tracking-min.js"></script>
		<script src="./js/face-min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var isReady = false

			// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
			document.addEventListener('UniAppJSBridgeReady', () => {
				isReady = true;
			});

			function setFaceImg(imgPath) {
				var img = document.getElementById("img");
				img.src = imgPath;
				var tracker = new tracking.ObjectTracker(['face']);
				tracker.setStepSize(1.7)
				tracking.track('#img', tracker);
				tracker.on('track', function(event) {
					if (isReady) {
						uni.postMessage({
							data: {
								code: event.data.length,
								imgPath: imgPath
							}
						});
					}
				});
			}

		</script>
	</body>
</html>