saas_miniprogram/components/popup/camera.vue

<template>
	<view>
		<u-popup v-model="isShow" mode="bottom" border-radius="40" :mask-close-able="false">
			<view class="photoBox" v-if="isShow">
				<view class="photoTop">
					<view class="centersq">请正视手机屏幕</view>
				</view>
				<view class="photoCenter">
					<view class="center_camera" v-if="isTaking">
						<!-- #ifdef MP-WEIXIN -->
						<camera device-position="front" flash="off" @error="error" style="width: 100%; height: 100%">
							<!-- 加人脸框 -->
							<cover-view class="head_take">
								<cover-view class="headTake_up color"></cover-view>
								<cover-view class="headTake_minddle">
									<cover-view class="min_left color"></cover-view>
									<cover-view class="min_img"></cover-view>
									<cover-view class="min_right color"></cover-view>
								</cover-view>
								<cover-view class="headTake_down color"></cover-view>
							</cover-view>
						</camera>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<video :controls="false" id="video" width="400" height="300" class="photo_v"></video>
						<view class="mask"></view>
						<!-- #endif -->
					</view>
					<view class="custom" v-if="!isTaking">
						<!-- #ifdef MP-WEIXIN -->
						<image :src="avatarUrl" mode=""></image>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<image :src="faceUrl" mode=""></image>
						<!-- #endif -->
					</view>
				</view>
				<view class="btns">
					<!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
              >拍照</view
            > -->
					<view v-if="isTaking" class="takePhoto_btn">
						<view style="width: 100rpx; height: 2rpx"></view>
						<view class="middle_btn" @click="takePhoto">
							<view class="square"></view>
						</view>
						<view class="rights" @click="takePhTips()">
							<text>拍照提示</text>
							<u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
						</view>
					</view>
					<view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
					<view class="btnResult" v-if="!isTaking" @click="submit">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 播放前拍照end -->
		<u-popup v-model="showSet" :mask-close-able="false" mode="center" border-radius="24">
			<view style="
          align-items: center;
          padding: 0 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
        ">
				<view style="
            font-weight: bold;
            color: #333333;
            font-size: 30rpx;
            margin-top: 30rpx;
          ">温馨提示</view>
				<view style="
            width: 457rpx;
            color: #666666;
            font-size: 30rpx;
            margin-top: 30rpx;
          ">学习过程中需要拍照验证学员身份， 拍照功能需要使用您的相机。
					是否授权使用？</view>
				<view style="margin: 40rpx 0">
					<button open-type="openSetting" @bindopensetting="openSetting" class="btnSet">
						去授权
					</button>
				</view>
			</view>
		</u-popup>
		<!-- 拍照提示 -->
		<popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto="openCamera"></popup-photo>
	</view>
</template>

<script>
	import myCompressImage from "@/common/compressPhoto.js";
	import PopupPhoto from "./index.vue";
	export default {
		name: "SaasMiniprogramCamera",
		inject: ["paramsFn"],
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				isShow: false,
				isTaking: true,
				avatarUrl: "",
				isCameraAuth: false,
				showSet: false,
				popupPhotoShow: false,
				faceUrl: "",
			};
		},
		methods: {
			error(err){
				console.log(err)
			},
			async submit() {
				if (this.uploadLock) {
					return;
				}
				this.uploadLock = true;
				let compareFaceData = await this.faceRecognition();
				if (compareFaceData >= 80) {
					this.$emit("submitPhoto", await this.imageInfos(), compareFaceData);
				} else {
					uni.showToast({
						title: "人脸匹配不通过，请重新拍照上传",
						icon: "none",
						duration: 2000,
					});

					setTimeout(() => {
						if (!this.isTaking) {
							this.reTake();
						}
					}, 2000);
				}
			},
			async imageInfos() {
				let resPath = await myCompressImage(this.avatarUrl || this.faceUrl, 50);
				const waitUpload = await this.$method.uploadFile(resPath, 0);
				return waitUpload;
			},
			closeCamera() {
				this.isShow = false;
				this.showSet = false;
				this.popupPhotoShow = false;
			},

			openCamera() {
				console.log("openCamera");
				this.uploadLock = false;
				this.popupPhotoShow = false;
				// 同一个商品只谈一次提示
				let popupList = uni.getStorageSync("popupList") || [];
				if (!popupList.includes(this.goodsId)) {
					popupList.push(this.goodsId);
					uni.setStorageSync("popupList", popupList);
					this.popupPhotoShow = true;
					return;
				}
				// #ifdef MP-WEIXIN
				// 屏幕亮度
				uni.setKeepScreenOn({
					keepScreenOn: true,
				});
				uni.getSetting({
					success: (res) => {
						if (res.authSetting["scope.camera"]) {
							this.isCameraAuth = true;
							this.showCamera();
						} else {
							wx.authorize({
								scope: "scope.camera",
								success: () => {
									this.isCameraAuth = true;
									this.showCamera();
								},
								fail: () => {
									this.isCameraAuth = false;
									this.showSet = true;
								},
							});
						}
					},
					fail: (res) => {},
				});
				// #endif
				// #ifdef H5
				if (
					(window.navigator.mediaDevices &&
						window.navigator.mediaDevices.getUserMedia) ||
					window.navigator.getUserMedia ||
					window.navigator.webkitGetUserMedia ||
					window.navigator.mozGetUserMedia
				) {
					console.log("getUserMedia----");
					// 调用用户媒体设备, 访问摄像头
					this.getUserMedia({
							video: {
								width: 400,
								height: 300,
								facingMode: "user",
							},
						},
						this.photographSuccess,
						this.photographError
					);
				} else {
					console.log("1111没有摄像");
					this.photographError();
				}
				// #endif
			},
			showCamera() {
				this.isTaking = true;
				this.isShow = true;
			},
			//确认拍照
			takePhoto() {
				// #ifdef MP-WEIXIN
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: "high",
					success: (res) => {
						this.avatarUrl = res.tempImagePath;
						console.log("开始拍照this.avatarUrl:", this.avatarUrl);
						this.isTaking = false;
					},
					fail: (err) => {},
				});
				// #endif
				// #ifdef H5
				const canvas = document.createElement("canvas");
				canvas.width = 400;
				canvas.height = 400;
				const context = canvas.getContext("2d");
				const box = document.querySelector(".photo_v");
				const video = box.querySelector("video");
				context.drawImage(video, 0, 0, 400, 400);
				this.faceUrl = canvas.toDataURL("image/png");
				this.isTaking = false;
				// #endif
			},
			reTake() {
				this.uploadLock = false;
				this.isTaking = true;
				// #ifdef MP-WEIXIN
				// 屏幕亮度
				uni.setKeepScreenOn({
					keepScreenOn: true,
				});
				this.avatarUrl = ""
				uni.getSetting({
					success: (res) => {
						if (res.authSetting["scope.camera"]) {
							this.isCameraAuth = true;
							this.showCamera();
						} else {
							wx.authorize({
								scope: "scope.camera",
								success: () => {
									this.isCameraAuth = true;
									this.showCamera();
								},
								fail: () => {
									this.isCameraAuth = false;
									this.showSet = true;
								},
							});
						}
					},
					fail: (res) => {},
				});
				// #endif
				// #ifdef H5
				this.faceUrl = "";
				this.getUserMedia({
						video: {
							width: 400,
							height: 300,
							facingMode: "user",
						},
					},
					this.photographSuccess,
					this.photographError
				);
				// #endif
			},
			takePhTips() {
				this.popupPhotoShow = true;
				this.isShow = false;
				this.isTaking = false;
			},
			/**
			 * 人脸匹配
			 */
			faceRecognition() {
				return new Promise((resolve) => {
					// #ifdef MP-WEIXIN
					let fileSystem = uni.getFileSystemManager();
					fileSystem.readFile({
						filePath: `${this.avatarUrl}`,
						encoding: "base64",
						position: 0,
						success: (res) => {
							let base64 = "data:image/jpg;base64," + res.data;
							this.CompareFace(base64, resolve);
						},
						fail(err) {
							// this.$u.toast('人脸识别错误!')
							console.error(err, "err-----人脸识别错误");
						},
					});
					// #endif
					// #ifdef H5
					this.CompareFace(this.faceUrl, resolve);
					// #endif
				});
			},
			CompareFace(url, resolve) {
				let timer = setTimeout(() => {
					uni.showToast({
						icon: "none",
						title: "拍照超时，请重新拍照",
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						},
					});
				}, 10 * 1000);

				this.$api
					.faceCertificationCompareFace({
						imageA: url,
						orderGoodsId: this.params.orderGoodsId,
						gradeId: this.params.gradeId,
					})
					.then((res) => {
						clearTimeout(timer);
						console.log(res, "人脸识别成功res");
						resolve(res.data.data);
					})
					.catch((err) => {
						clearTimeout(timer);
						// 当前网络延迟，
						console.log("人脸识别错误:", err);
						uni.showModal({
							content: "当前网络延迟",
							showCancel: false,
							success: (resultst) => {
								if (resultst.confirm) {
									uni.navigateBack();
								}
							},
						});
					});
			},
			photographSuccess(stream) {
				console.log("有摄像头---", stream);
				this.isCameraAuth = true;
				this.showCamera();
				this.$nextTick(() => {
					const box = document.querySelector(".photo_v");
					const video = box.querySelector("video");
					video.srcObject = stream;
					video.play();
				});
			},
			photographError(err) {
				console.log("没有摄像头：", err);
				uni.showModal({
					title: "提示",
					content: "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",

					cancelText: "取消",
					confirmText: "确定",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						} else if (res.cancel) {}
					},
				});
			},
			getUserMedia(constraints, success, error) {
				console.log("getUserMedia===", constraints);
				if (window.navigator.mediaDevices.getUserMedia) {
					// 最新的标准API
					window.navigator.mediaDevices
						.getUserMedia(constraints)
						.then(success)
						.catch(error);
				} else if (window.navigator.webkitGetUserMedia) {
					// webkit核心浏览器
					window.navigator.webkitGetUserMedia(constraints, success, error);
				} else if (window.navigator.mozGetUserMedia) {
					// firfox浏览器
					window.navigator.mozGetUserMedia(constraints, success, error);
				} else if (window.navigator.getUserMedia) {
					// 旧版API
					window.navigator.getUserMedia(constraints, success, error);
				}
			},
		},
		computed: {
			params() {
				return this.paramsFn();
			},
			goodsId() {
				return this.params.goodsId;
			},
		},
		components: {
			PopupPhoto,
		},
		watch: {
			visible(val) {
				if (val) {
					this.openCamera();
				} else {
					this.closeCamera();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btnSet {
		width: 440rpx;
		height: 80rpx;
		background: #007aff;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.photoBox {
		width: 100%;

		.photoTop {
			width: 100%;
			height: 74rpx;
			border-radius: 20px 20px 0px 0px;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0rpx 38rpx;

			.centersq {
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}
		}

		.photoCenter {
			width: 750rpx;
			height: 75vh;
			position: relative;

			.center_camera {
				width: 100%;
				height: 75vh;
				position: fixed;

				.head_take {
					width: 100%;
					height: 75vh;
					display: flex;
					flex-direction: column;
				}

				.headTake_up {
					width: 100%;
					height: 100rpx;
				}

				.headTake_minddle {
					display: flex;

					.min_img {
						width: 500rpx;
						height: 550rpx;
					}

					.min_left,
					.min_right {
						flex: 1;
						height: 550rpx;
					}
				}

				.headTake_down {
					width: 100%;
					flex: 1;
				}

				.color {
					background-color: #333;
					opacity: 0.5;
				}

				.photo_v {
					width: 100%;
					height: 100%;
				}

				.mask {
					width: 500rpx;
					height: 550rpx;
					position: absolute;
					top: 100rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin: 0 auto;
					box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
				}
			}

			.custom {
				width: 750rpx;
				height: 75vh;
				position: absolute;
				z-index: 1000;
				top: 0;
				left: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btns {
			display: flex;

			.takePhoto_btn {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #a9a7a9;
				padding: 40rpx 26rpx;

				.middle_btn {
					width: 120rpx;
					height: 120rpx;
					border-radius: 40rpx;
					border: 4rpx solid #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.square {
					width: 96rpx;
					height: 96rpx;
					background: #ffffff;
					border-radius: 28rpx;
				}

				.rights {
					font-size: 32rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.btnResult {
				height: 100rpx;
				flex: 1;
				background-color: #07c160;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>