tqApp-webView/components/tq-face/index copy.vue

<template>
	<u-popup :show="isShow" @close="close" :closeOnClickOverlay="false">
		<view class="page-container">
			<view class="errortext" v-if="!startVideoStatus">{{ tip }}</view>
			<view class="errortext"><text v-if="errortext != ''">{{ errortext }}</text></view>
			<view id="show-content" :class="openCamera == true ? '' : 'show-content-hide'">
				<view class="home">
					<view :class="bgImgClass">
						<img src="../../static/neuralNets/img4.png" />
					</view>
				</view>
				<!-- <view class="uer-camera" @tap="changeUserCamera('hou')" v-if="useCamera == 'qian'">
					<img src="../../static/neuralNets/change_camera.png" /> 
				</view>
				<view class="uer-camera" @tap="changeUserCamera('qian')" v-if="useCamera == 'hou'">
					<img src="../../static/neuralNets/change_camera.png" /> 
				</view> -->
				<video
					src=""
					id="video"
					:style="{ width: vwidth + 'px', height: vheight + 'px', display: showVideo }"
					playsinline
					webkit-playsinline autoplay=true muted=true loop=true controls=false show-center-play-btn=false
					object-fit=fill>
				</video>
			</view>


			<view class="main_bottom">
				确认为<text style="color: red;padding: 6rpx;"
					v-if="userName">{{ userName }}</text>本人照片<br>保持正脸在取景框中根据屏幕指示完成
				<view class="bottom_main">
					<view class="bottom_main_list">
						<img src="../../static/neuralNets/img3.png" />
						<p>正对手机</p>
					</view>
					<view class="bottom_main_list">
						<img src="../../static/neuralNets/img2.png" />
						<p>光线充足</p>
					</view>
					<view class="bottom_main_list">
						<img src="../../static/neuralNets/img1.png" />
						<p>脸无遮挡</p>
					</view>
				</view>
			</view>

			<view class="button-view" :style="{ display: (openCamera == true ? 'flex' : 'none') }">

				<view class="click-button">
					<u-button type="primary" shape="circle" @click="startVideo"
						:disabled="startVideoStatus">{{ !startVideoStatus ? '开始刷脸' : '检测中...' }}</u-button>
					<u-button type="error"
						shape="circle" @click="close"
						:customStyle="{
							marginTop: '30rpx'
						}">退出</u-button>

				</view>

			</view>
		</view>
	</u-popup>
</template>

<script>
import $ from "@/static/collect_face/jquery2.3.js";
import faceFilter from "@/static/neuralNets/jeelizFaceFilter.module.js";
import JeelizCanvas2DHelper from "@/static/neuralNets/JeelizCanvas2DHelper.js";
// 引入uni.webview.1.5.2.js
import '@/static/js/uni.webview.1.5.4.js'
import { compareFace } from '@/api/common/system.js'
import { getToken } from '@/utils/auth'

let VIDEOELEMENT = null;
var CVD = null; // return of Canvas2DDisplay


export default {
	props: {

		// 用户名
		userName: {
			type: String,
			default: null
		},
		tip: {
			type: String,
			default: '需进行人脸验证后再继续学习'
		},
		querParams: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	data() {
		return {
			isShow: false,

			isTest: false,
			againCount: 0,
			openCamera: false,
			screenSize: {
				width: window.screen.width,
				height: window.screen.height,
			},
			vwidth: 240,
			vheight: 240,
			scanTip: '',
			errortext: '点击开始刷脸按钮开始拍摄',
			uploadHeadImg: '',
			imgUrl: '',
			pauseStatus: false,
			startCut: false,
			faceCoo: null,
			detectState: null,
			showVideo: 'block',
			appendCss: false,
			bgImgClass: 'home_wai',
			bgImgClass2: 'home_nei',
			mediaStreamTrack: null,
			startVideoStatus: false,
			useCamera: 'qian', //qian代表前置摄像头 hou代表后置摄像头

		}
	},
	mounted() { },

	methods: {

		show() {
			this.isShow = true;

			if (faceFilter && typeof faceFilter.toggle_pause == 'function') {
				faceFilter.destroy();
			}
			var that = this; //a
			setTimeout(function () {
				//初始化的时候给追加上canvas用作载体
				if ($('#jeeFaceFilterCanvas').html() == undefined) {
					$('#show-content').append('<canvas class="appendcanvas" width="' + that.vwidth +
						'" height="' + that.vheight + '" id="jeeFaceFilterCanvas"></canvas>');
				}
				if ($('#jeeFaceFilterCanvas2').html() == undefined) {
					$('#show-content').append('<canvas class="appendcanvas appendcanvas2"  width="' + that
						.vwidth + '" height="' + that.vheight + '" id="jeeFaceFilterCanvas2"></canvas>');
				}
				if (that.appendCss == false) {
					$('uni-page-body').append(`<style>
					#jeeFaceFilterCanvas{
						display:none;
					}
					#jeeFaceFilterCanvas2{
						display:none;
						border-radius:50%
					}
					.uni-video-bar{
						display:none !important; //去除底部菜单栏
					}
					.uni-video-cover{
						display:none !important; //去除中间播放按钮
					}
					video{
						transform: rotateY(180deg);
						-webkit-transform: rotateY(180deg);    /* Safari 和 Chrome */
						-moz-transform: rotateY(180deg);
						border-radius:50% !important;
					}
					.uni-video-container{border-radius:50% !important;}
					.uni-video-video{border-radius:50% !important;}
					</style>`);
					that.appendCss = true;
				}
				//uniapp编译过后无法获取video的dom，此处追加id
				$('#video').find('video').prop('id', 'myVideo');
				that.showVideo = 'block';
				if (that.isTest == true) {
					//是否是测试环境 测试环境直接调用视频
					that.openCamera = true;
					that.main();
				} else {
					that.openCamera = true;
					that.bgImgClass = 'home_wai remove_animation';
					that.bgImgClass2 = 'home_nei remove_animation';
					that.errortext = '点击开始刷脸按钮开始拍摄';
				}
			}, 100)

		},


		close() {
			this.startVideoStatus = false;
			this.closeVideo();
			this.isShow = false
			this.$emit('close')
		},

		closeVideo() {
			try {
				//页面卸载的时候关闭视频播放
				if (this.mediaStreamTrack) {
					this.mediaStreamTrack.getTracks()[0].stop();
				}
			} catch {
				console.log('close mediaStreamTrack error')
			}
			try {
				const video = document.getElementsByClassName('uni-video-video')[0];
				video.srcObject = null;
			} catch {
				console.log('close video.srcObject error')
			}
			try {
				faceFilter.toggle_pause(true);
				faceFilter.destroy(); //销毁注册对象
			} catch {
				console.log('close faceFilter toggle_pause error')
			}
		},
		changeUserCamera(type) {
			this.useCamera = type;
			if (type == 'hou') {
				$('uni-page-body').append(`<style>
					video{
						transform: rotateY(0deg);
						-webkit-transform: rotateY(0deg);    /* Safari 和 Chrome */
						-moz-transform: rotateY(0deg);
						border-radius:50% !important;
					}
					</style>`);
			} else {
				$('uni-page-body').append(`<style>
					video{
						transform: rotateY(180deg);
						-webkit-transform: rotateY(180deg);    /* Safari 和 Chrome */
						-moz-transform: rotateY(180deg);
						border-radius:50% !important;
					}
					</style>`);
			}
			this.playVideo();
		},
		startVideo() {
			if (this.startVideoStatus == false) {
				this.playVideo();
			} else {
				if (this.pauseStatus == false) {
					this.$api.msg('当前正在拍照');
					return;
				}
				this.savePause(false)
			}
		},
		savePause(status) {
			this.uploadHeadImg = '';
			this.imgUrl = '';
			this.pauseStatus = status;
			if (status == false) {
				this.startCut = false;
				this.bgImgClass = 'home_wai';
				this.bgImgClass2 = 'home_nei';
				this.showVideo = 'none';
				$('#jeeFaceFilterCanvas2').hide();
			} else {
				this.showVideo = 'block';
				$('#jeeFaceFilterCanvas2').hide();
			}
			//console.log(status)
			//true 暂停  false 继续执行
			faceFilter.toggle_pause(status);
		},
		playVideo() {

			var that = this;
			that.uploadHeadImg = '';
			that.imgUrl = '';
			that.startVideoStatus = true;
			that.startCut = false;
			var thatUseCamera = that.useCamera;
			if (thatUseCamera == 'qian') {
				var facingMode = 'user';
			} else if (thatUseCamera == 'hou') {
				var facingMode = {
					exact: "environment"
				};
			}
			if (faceFilter && typeof faceFilter.toggle_pause == 'function') {
				faceFilter.destroy();
			}
			setTimeout(function () {
				that.getUserMedia({
					//摄像头拍摄的区域
					video: {
						width: 500,
						height: 500,
						facingMode: facingMode,
					},
					/* 前置优先 */
				},
					that.success,
					that.error
				);
			}, 100)

		},
		// 访问用户媒体设备
		getUserMedia(constrains, success, error) {

			if (navigator.mediaDevices.getUserMedia) {
				navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error); //最新标准API
			} else if (navigator.webkitGetUserMedia) {
				navigator.webkitGetUserMedia(constrains).then(success).catch(error); //webkit内核浏览器
			} else if (navigator.mozGetUserMedia) {
				navagator.mozGetUserMedia(constrains).then(success).catch(error); //Firefox浏览器
			} else if (navigator.getUserMedia) {
				navigator.getUserMedia(constrains).then(success).catch(error); //旧版API
			} else {
				this.errortext = "你的浏览器不支持访问用户媒体设备";
			}
		},
		success(stream) {
			var that = this;
			that.bgImgClass = 'home_wai';
			that.bgImgClass2 = 'home_nei';
			that.openCamera = true;
			that.errortext = '请把人脸放在圆圈内拍摄脸部';
			that.mediaStreamTrack = stream;
			const video = document.getElementsByClassName('uni-video-video')[0];
			try {
				video.srcObject = stream;
			} catch {
				this.URL = window.URL || window.webkitURL;
				video.src = this.URL.createObjectURL(stream);
			}
			// webkit内核浏览器
			//苹果手机的系统弹框会阻止js的线程的继续执行 手动0.1秒之后自动执行代码
			setTimeout(() => {
				try {
					video.play();
				} catch {
					that.errortext = '视频流播放失败';
				}
				that.main();
			}, 100);

		},
		error(e) {
			var that = this;
			that.startVideoStatus = false;
			that.bgImgClass = 'home_wai remove_animation';
			that.bgImgClass2 = 'home_nei remove_animation';
			if (this.useCamera == 'hou') {
				that.errortext = "调用后置摄像头失败:" + (e.name ? e.name : '') + (e.message ? e.message : '');
			} else {
				that.errortext = "调用前置摄像头失败:" + (e.name ? e.name : '') + (e.message ? e.message : '');
			}

		},
		main() { // entry point
			var that = this;
			VIDEOELEMENT = document.getElementById('myVideo');

			if (VIDEOELEMENT['currentTime'] && VIDEOELEMENT['videoWidth'] && VIDEOELEMENT['videoHeight']) {

				that.start();
			} else {
				setTimeout(function () {
					that.main();
				}, 100);

			}
		},
		start() { // launched when the video is loaded

			var that = this;
			faceFilter.init({
				canvasId: 'jeeFaceFilterCanvas',
				videoSettings: {
					videoElement: VIDEOELEMENT
				},
				rotate: -90,
				NNCPath: '../../static/neuralNets/', // root of NN_DEFAULT.json file
				callbackReady: function (errCode, spec) {
					if (errCode) {
						//
						that.errortext = '人脸初始化出错' + errCode;
						that.startVideoStatus = false;
						console.log('AN ERROR HAPPENS. SORRY BRO :( . ERR =', errCode);
						return;
					}
					CVD = JeelizCanvas2DHelper(spec);
					CVD.ctx.strokeStyle = 'yellow';
				},

				callbackTrack: function (detectState) {
					//console.log(detectState.detected)
					that.detectState = '';
					that.faceCoo = '';

					if (detectState.detected > 0.9) {

						that.detectState = detectState; 
						that.showVideo = 'block';
						$('#jeeFaceFilterCanvas2').hide();
						var faceCoo = CVD.getCoordinates(detectState);
						that.faceCoo = faceCoo;
						CVD.ctx.clearRect(0, 0, CVD.canvas.width, CVD.canvas.height);
						CVD.update_canvasTexture();
						CVD.draw();
						var check = that.checkTrue();
						if (check) {
							that.errortext = '请保持不动，即将拍照';
							if (that.startCut == false) {

								that.startCut = true;
								setTimeout(function () {
									//console.log('setTimeout')
									that.savePause(true);
									that.cutPhoto();
								}, 1000)
							}
						}
					} else {
						that.showVideo = 'block';
						$('#jeeFaceFilterCanvas2').hide();
						that.errortext = '请将完整脸部对准屏幕中央';
					}

				}
			}); //end JEELIZFACEFILTER.init call
		},

		checkTrue(dump) {

			var that = this;
			var faceCoo = that.faceCoo;
			var faceCooStr = JSON.stringify(faceCoo);
			var detectState = that.detectState;
			if (!faceCoo || !detectState || detectState == '' || faceCoo == '') {
				return false;
			}
			var x = parseFloat(faceCoo.x).toFixed(2);
			var y = parseFloat(faceCoo.y).toFixed(2);
			var w = parseFloat(faceCoo.w).toFixed(2);
			var h = parseFloat(faceCoo.h).toFixed(2);
			var cw = parseFloat(CVD.canvas.width).toFixed(2);
			var ch = parseFloat(CVD.canvas.height).toFixed(2);
			var xcw = x / cw;
			var ycw = y / ch;
			if (xcw < 0.25 || xcw > 0.5 || ycw > 0.45 || ycw < 0.1) {
				that.errortext = '请将完整脸部对准屏幕中央';
			} else {
				that.errortext = '';
			}
			if (that.errortext && that.errortext != '') {
				return false;
			}
			var faceMj = w * h;
			var allMj = cw * ch;
			var zhanbi = faceMj / allMj;
			var mianjiObj = {
				faceMj: faceMj,
				zhanbi: zhanbi
			}
			var mianjiobj2 = {
				cw: cw,
				ch: ch,
				allMj: allMj,
			}
			var mianjiStr = JSON.stringify(mianjiObj);
			var mianjiStr2 = JSON.stringify(mianjiobj2);
			if (zhanbi < 0.18) {
				that.errortext = '请离脸部近一点'
			} else if (zhanbi > 0.28) {
				that.errortext = '请离脸部远一点'
			} else {
				return true;
			}
			return false;
		},

		cutPhoto(rectparams) {

			var that = this;
			var check = that.checkTrue(true);
			if (check == false) {
				that.savePause(false);
				return;
			}
			that.errortext = '拍照成功，请稍后';
			that.bgImgClass = 'home_wai remove_animation';
			that.bgImgClass2 = 'home_nei remove_animation';

			that.showVideo = 'none';
			$('#jeeFaceFilterCanvas2').show();
			CVD.ctx.clearRect(0, 0, CVD.canvas.width, CVD.canvas.height);
			CVD.draw();
			var clip = $('#jeeFaceFilterCanvas2')[0];
			var context_clip = clip.getContext('2d');

			context_clip.drawImage(
				$('#jeeFaceFilterCanvas')[0], //规定要使用的图像、画布或视频。
				0, 0, //开始剪切的 x 坐标位置。
				CVD.canvas.width, CVD.canvas.height, //被剪切图像的高度。
				0, 0, //在画布上放置图像的 x 、y坐标位置。
				this.vwidth, this.vwidth //要使用的图像的宽度、高度
			);

			//位移来做镜像翻转
			if (that.useCamera == 'qian') {
				//使用前置摄像头需要反转镜头
				context_clip.translate(this.vwidth, 0);
				context_clip.scale(-1, 1); //左右镜像翻转
				context_clip.drawImage($('#jeeFaceFilterCanvas2')[0], 0, 0, this.vwidth, this.vwidth);
			}

			this.imgUrl = clip.toDataURL("image/jpeg");
			/* clip.toBlob((blob) => {
			    if (blob) {
					this.imgUrl = createObjectURL(blob)
			    } else {
			        reject(new Error('Failed to create blob from canvas'));
			    }
			}, 'image/png'); */
			this.useImg();
		},
		useImg() {
			this.imgSize();
		},
		imgSize() {
			var that = this;
			if (this.imgUrl) {
				// 获取base64图片byte大小
				const equalIndex = this.imgUrl.indexOf("="); // 获取=号下标
				let size;
				if (equalIndex > 0) {
					const str = this.imgUrl.substring(0, equalIndex); // 去除=号
					const strLength = str.length;
					const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
					size = Math.floor(fileLength / 1024); // 向下取整
				} else {
					const strLength = this.imgUrl.length;
					const fileLength = strLength - (strLength / 8) * 2;
					size = Math.floor(fileLength / 1024); // 向下取整
				}
				if (size >= 800) {
					// 图片超过800k 重新再次压缩
					this.imgUrl = $('#jeeFaceFilterCanvas2')[0].toDataURL("image/jpeg", 0.8);
					this.imgSize();
				} else {

					that.faceOpeImg();
				}
			}
		},
		async faceOpeImg() {

			var that = this;
			uni.webView.postMessage({
				data: {
					photo: this.imgUrl
				}
			});
			
			console.log(that.imgUrl,'that.imgUrlthat.imgUrl')
			return false
			
			$('#jeeFaceFilterCanvas2')[0].toBlob(async (blob) => {
			    if (blob) {
					let newBlobUrl = that.createObjectURL(blob)
			       
					const {code,data} = await this.uploadFilePromise(newBlobUrl)
					if(code == 0) {
						// console.log(data,'datadata')
						if(data.data == false) {
							that.errortext = '不是有效的人脸，请重新拍照';
							that.startVideoStatus = false;
						
							return;
						} else {
							that.errortext = '人脸识别成功';
							that.startVideoStatus = false;
							this.$emit('success', data, newBlobUrl, that.imgUrl)
							 this.close()
							 
							return
						}
					} else {
						that.errortext = '比对人脸失败';
						that.startVideoStatus = false;
						return; 
					}
					
			    } else {
			        reject(new Error('Failed to create blob from canvas'));
			    }
			}, 'image/png');
			
			
		},
		
		/**
		* blob转url临时访问地址
		* @param String blob 对象
		*/
		
		createObjectURL(blob){
			return URL.createObjectURL(blob);
		},
		
		uploadFilePromise(url) {
		    return new Promise((resolve, reject) => {
				// console.log(url,'urlurl')
		        let a = uni.uploadFile({
		            url: compareFace, // 仅为示例，非真实的接口地址
					header: {
						'Authorization': 'Bearer ' + getToken()
					},
		            filePath: url,
		            name: 'file',
		            formData: {
		                ...this.querParams,
		            },
		            success: (res) => {			
						let data = JSON.parse(res.data)
						resolve(data)
		            },
					fail: (err) => {
						resolve({
							code: -1,
							msg: '上传失败'
						})
					}
		        });
		    })
		},

	},

}
</script>

<style lang="scss" scoped>
.page-container {
	min-width: 600rpx;
	font-size: 28rpx;
	height: 100vh;
	position: relative;

	.contentp1 {
		width: 100px;
		height: 30px;
		background: #EEEEEE;
		color: #28A745;
		line-height: 30px;
		margin-top: 30px;
		text-align: center;
	}

	.contentp {
		height: 120px;
	}

	.errortext {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		color: #e03030;
		// color: #333333;
		text-align: center;
		margin-top: 30rpx;
		font-size: 30rpx;
	}

	.img-face {
		display: -webkit-box;
		/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
		display: -moz-box;
		/* 老版本语法: Firefox (buggy) */
		display: -ms-flexbox;
		/* 混合版本语法: IE 10 */

		display: -webkit-flex;
		/* 新版本语法: Chrome 21+ */
		display: flex;

		flex-direction: column;
		align-items: center;
		justify-content: center;

		.imgurl {
			/* position: fixed;
			 top: 117.5px;
			 width: 266px;
			 height: 266px;
			 border-radius: 230rpx; */
		}
	}

	#show-content {
		width: 100%;
		margin-top: 30px;
		height: 260px;
		display: -webkit-box;
		/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
		display: -moz-box;
		/* 老版本语法: Firefox (buggy) */
		display: -ms-flexbox;
		/* 混合版本语法: IE 10 */

		display: -webkit-flex;
		/* 新版本语法: Chrome 21+ */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.show-content-hide {
		display: none !important;
	}

	.button-view {
		width: 100%;
		margin-top: 60rpx;
		height: 80rpx;
		display: -webkit-box;
		/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
		display: -moz-box;
		/* 老版本语法: Firefox (buggy) */
		display: -ms-flexbox;
		/* 混合版本语法: IE 10 */

		display: -webkit-flex;
		/* 新版本语法: Chrome 21+ */
		display: flex;
		justify-content: center;
		align-items: center;

		.click-button {
			width: 80%;
			height: 100%;

		}
	}

	.not-zhuanimg {
		width: 17.225rem;
		overflow: hidden;
		z-index: 10;
		position: absolute;
	}

	.home {
		overflow: hidden;
		text-align: center;
		width: 240px;
		height: 240px;
		position: absolute;
		z-index: 10;
	}

	.home_wai img {
		width: 100%;
		overflow: hidden;
		animation: myfirst 8s infinite linear;
	}

	@keyframes myfirst {
		0% {
			transform: rotate(0deg) scale(1);
		}

		50% {
			transform: rotate(360deg) scale(1);
		}

		75% {
			transform: rotate(540deg) scale(0.9);
		}

		100% {
			transform: rotate(720deg) scale(1);
		}
	}

	.home_nei {
		overflow: hidden;
		width: 12.575rem;
		margin: 3.69133rem auto;
	}

	.home_nei img {
		width: 100%;
		overflow: hidden;
		animation: mysecond 8s infinite linear;
	}

	.remove_animation img {
		animation: none;
	}

	@keyframes mysecond {
		0% {
			transform: rotate(0deg) scale(1);
		}

		50% {
			transform: rotate(-360deg) scale(1);
		}

		75% {
			transform: rotate(-540deg) scale(0.9);
		}

		100% {
			transform: rotate(-720deg) scale(1);
		}
	}


	.title {
		background: #FFFFFF;
		padding: 0.9rem 0;
		text-align: center;
		box-shadow: 0 0 10px #e5e5e5;
		font-size: 0.9rem;
		font-weight: bold;
		color: #000;
	}

	.main_top {
		padding-top: 2.5rem;
		text-align: center;
		color: #757575;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.main_top_cricle {
		margin: 1.25rem auto;
		width: 9.2rem;
		height: 9.2rem;
		position: relative;
		overflow: hidden;
	}

	.main_top_cricle img {
		width: 98%;
	}

	.main_cricle {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 5;
		animation: myfirst 4s infinite linear;
	}

	@keyframes myfirst {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(360deg);
		}

		75% {
			transform: rotate(540deg);
		}

		100% {
			transform: rotate(720deg);
		}
	}

	.main_cricle img {
		width: 100%;
		height: 100%;
	}

	.main_bottom {
		margin-top: 30rpx;
		overflow: hidden;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}

	.bottom_main {
		margin-top: 1rem;
		display: flex;
		overflow: hidden;
	}

	.bottom_main_list {
		text-align: center;
		flex-grow: 1;
		font-size: 28rpx;
		color: #333;
	}

	.bottom_main_list img {
		width: 2.5rem;
		margin-bottom: 10rpx;
	}



	.uer-camera {
		position: fixed;
		top: 200rpx;
		right: 42%;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		padding: 6rpx 8rpx 8rpx 6rpx;
		border-radius: 24rpx;
		height: 88rpx;
		width: 88rpx;
		overflow: hidden;
	}

	.uer-camera img {
		width: 100%;
		height: 100%;
	}
}
</style>