uniapp项目—h5端人脸采集功能实现

原创

已于 2024-06-26 11:15:43 修改

· 2.9k 阅读

21 ·

版权

文章标签：

#uni-app #微信公众平台

于 2024-06-25 18:01:47 首次发布

这里写自定义目录标题

需求

需求

uniapp写的h5应用，放到微信公众号里使用，需要采集人脸信息，传到后台调阿里云实人认证接口

思路

1.如何调用移动端设备摄像头
2.使用tracking.js捕捉人脸
3.对人脸进行拍照，描绘到canvas画布上面
4.将照片转换成base64格式
5.调用后台接口。

代码以及注释

1.下载tracking.js 网址：https://trackingjs.com 将需要的js文件复制到静态资源文件夹
源下载文件
f放到uniapp项目中

代码实现

<template>
	<view>
		<view v-show="showContainer" class="face-capture">
			<text class="tip">请保持人像在取景框内</text>
			<video id="faceVideo" :autoplay="true" object-fit="cover" :show-mute-btn="false" :show-play-btn="false"
				:show-progress="false"></video>
			<canvas id="refCanvas" :width="300" :height="300"></canvas>
			<text class="contentp">{
   {
    scanTip }}</text>
		</view>
		<view v-if="!showContainer" class="img-face">
			<img class="imgurl" :src="imgUrl" />
		</view>
	</view>
</template>
<script>
	import tracking from "@/static/tracking/tracking-min.js";
	import "@/static/tracking/face-min.js";
	import "@/static/tracking/eye-min.js";
	import "@/static/tracking/mouth-min.js";
	export default {
   
		data() {
   
			return {
   
				URL: null,
				streamIns: null, // 视频流
				showContainer: true, // 显示
				tracker: null,
				tipFlag: false, // 提示用户已经检测到
				flag: false, // 判断是否已经拍照
				context: null, // canvas上下文
				removePhotoID: null, // 停止转换图片
				scanTip: "人脸识别中...", // 提示文字
				imgUrl: "",
				canvas: null,
				trackertask: null
			};
		},
		mounted() {
   
			this.initGetUserMedia();
		},
		methods: {
   
			async initGetUserMedia() {
   
				const constraints = {
   
					video: {
   
						width: 300,
						height: 300
					}
				};
				try {
   
					const stream = await navigator.mediaDevices.getUserMedia(constraints);
					this.success(stream);
				} catch