适配移动端

src/page/index/HandTrack/index.vue

@@ -19,11 +19,11 @@
 			ref="showVideoBtn"
 			@click="initVideo($event)"
 		>
-			开启摄像头
+			开启
 		</button>
 
 		<!-- info -->
-		<div class="info-dialog">
+		<div class="info-dialog" ref="info">
 			<div class="progress" ref="progress">
 				当前进度: {{ progressText }}..
 			</div>
@@ -32,9 +32,25 @@
 			</div>
 		</div>
 
+		<!-- progress -->
+		<div class="progress-bar" ref="progressBar">
+			<div class="bar">
+				<div class="progress" :style="'width:' + progress + '%'"></div>
+			</div>
+		</div>
+
+		<!-- hand -->
+		<div
+			class="hand-dialog"
+			ref="handDialog"
+			v-if="handStep > 0 && handStep < 3"
+		>
+			<p>请在镜头前尝试做出以下手势</p>
+			<div class="hand" :class="'hand-' + handStep" ref="hand"></div>
+		</div>
+
 		<!-- unsuit-dialog -->
-		<div class="unsuit-dialog" ref="unsuit">请在浏览器中打开</div>
-		<div class="unsuit-dialog" ref="unsuit2">您的系统版本过低</div>
+		<div class="des-dialog" ref="unsuit"></div>
 	</div>
 </template>
 <script>
@@ -53,11 +69,13 @@ export default {
 	components: {},
 	data() {
 		return {
+			progress: 0,
 			progressText: "0%", //进度文字
-			BORDER_PADDING_FACTOR: 0.01, //边界阀值
+			BORDER_PADDING_FACTOR: 0.02, //边界阀值
 			VIDEO_WIDTH_FACTOR: 0.8, //宽度阀值
 			videoRealSize: {},
 			handStatus: "未检测到手",
+			handStep: 1,
 		};
 	},
 	mounted() {
@@ -67,50 +85,54 @@ export default {
 	},
 	methods: {
 		// 检测用户手机是否兼容
+		// > 14 safria ok   || > 14.3 ios webview ok
 		checkUserDeviceSuitable() {
 			if (
 				window.deviceInfo.system === "IOS" &&
 				window.deviceInfo.app === "WX"
 			) {
 				let iosV = this.getIOSVersion();
-				// console.log(
-				// 	!this.versionStringCompare(iosV, "14.5"),
-				// 	this.versionStringCompare(iosV, "11.0")
-				// );
 				if (
-					!this.versionStringCompare(iosV, "14.5") &&
-					this.versionStringCompare(iosV, "11.0")
+					!this.versionStringCompare(iosV, "14.3") &&
+					this.versionStringCompare(iosV, "14.0")
 				) {
-					gsap.to(this.$refs.unsuit, { autoAlpha: 1 });
-				} else if (!this.versionStringCompare(iosV, 11.0)) {
-					gsap.to(this.$refs.unsuit2, { autoAlpha: 1 });
+					this.$Utils.showTips({
+						message: "请点击右上角 ...</br>在浏览器打开",
+						autoClose: false,
+					});
+				} else if (!this.versionStringCompare(iosV, "14.0")) {
+					this.$Utils.showTips({
+						message:
+							"😭 很抱歉</br>⚠️ 当前系统版本过低</br>无法体验该Demo",
+						autoClose: false,
+					});
 				}
 			}
 		},
 		// 版本号比较
 		versionStringCompare(preVersion = "", lastVersion = "") {
-			var sources = preVersion.split(".");
-			var dests = lastVersion.split(".");
-			var maxL = Math.max(sources.length, dests.length);
-			var result = 0;
-			for (let i = 0; i < maxL; i++) {
-				let preValue = sources.length > i ? sources[i] : 0;
-				let preNum = isNaN(Number(preValue))
-					? preValue.charCodeAt()
-					: Number(preValue);
-				let lastValue = dests.length > i ? dests[i] : 0;
-				let lastNum = isNaN(Number(lastValue))
-					? lastValue.charCodeAt()
-					: Number(lastValue);
-				if (preNum < lastNum) {
-					result = false;
-					break;
-				} else if (preNum > lastNum) {
-					result = true;
-					break;
+			// 将版本号格式化为相同位数数字字符串
+			function toNum(a) {
+				var a = a.toString();
+				//也可以这样写 var c=a.split(/\./);
+				var c = a.split(".");
+				// eslint-disable-next-line camelcase
+				var num_place = ["", "0", "00", "000", "0000"],
+					// eslint-disable-next-line camelcase
+					r = num_place.reverse();
+				for (var i = 0; i < c.length; i++) {
+					var len = c[i].length;
+					c[i] = r[len] + c[i];
 				}
+				var res = c.join("");
+				return res;
 			}
-			return result;
+
+			var _a = toNum(preVersion),
+				_b = toNum(lastVersion);
+			console.log(_a, _b);
+			if (_a == _b || _a > _b) return true;
+			else return false;
 		},
 		// 获取设备权限
 		getDevicePermission(constraints) {
@@ -186,6 +208,12 @@ export default {
 				video: {
 					deviceId: { exact: await this.getBackCameraDeviceId() },
 					facingMode: "environment",
+					// width: {
+					// 	min: 480,
+					// },
+					// height: {
+					// 	min: 640,
+					// },
 				},
 				// video: {
 				// 	facingMode: { exact: "environment" },
@@ -215,19 +243,20 @@ export default {
 			const videoTracks = stream.getVideoTracks();
 			this.stream = stream; // make variable available to browser console
 			let streamSize = this.GetStreamDimensions(stream);
-			let handledSize = this.ScaleResolutionToWidth(
+			let handledSize = this.ScaleResolutionToHeight(
 				streamSize,
-				window.innerWidth
+				window.innerHeight
 			);
 
 			this.videoRealSize = handledSize;
 
 			console.log("Got stream with constraints:", constraints);
 			console.log(`Using video device: ${videoTracks[0].label}`);
+			console.log("Got stream size:", videoTracks);
 			console.log("Got stream size:", streamSize);
 			console.log(
 				"Got streamHandled size:",
-				window.innerWidth,
+				window.innerHeight,
 				handledSize
 			);
 
@@ -253,7 +282,7 @@ export default {
 				height: stream.getVideoTracks()[0].getSettings().height,
 			};
 		},
-		// 等比缩放视频
+		// 等比缩放视频 宽
 		ScaleResolutionToWidth(resolution, width) {
 			const cw = resolution.width;
 			const ch = resolution.height;
@@ -264,6 +293,17 @@ export default {
 				height: ch / (cw / tw),
 			};
 		},
+		// 等比缩放视频 高
+		ScaleResolutionToHeight(resolution, height) {
+			const cw = resolution.width;
+			const ch = resolution.height;
+			const th = height;
+
+			return {
+				width: cw / (ch / th),
+				height: th,
+			};
+		},
 		// 创建手势识别引擎
 		async CreateEngine() {
 			let API = IHandTrackingApi;
@@ -275,9 +315,17 @@ export default {
 		},
 		// 开始识别
 		async startDraw() {
+			console.log("engine start load");
+			gsap.to(this.$refs.progressBar, {
+				autoAlpha: 1,
+				delay: 0.5,
+			});
 			this.engine = await this.CreateEngine();
+
+			console.log("engine model start load");
 			await this.engine.DownloadModel((progress) => {
-				this.progressText = `${Math.round(progress * 100)}%`;
+				this.progress = Math.round(progress * 100);
+				this.progressText = `${this.progress}%`;
 			});
 
 			this.progressText = "引擎准备中…";
@@ -298,24 +346,42 @@ export default {
 			}
 
 			this.progressText = "引擎已就绪";
-			gsap.to(this.$refs.progress, {
+			gsap.to([this.$refs.progress, this.$refs.progressBar], {
 				autoAlpha: 0,
 				delay: 0.5,
 				onComplete: () => {
 					this.$refs.progress.style.display = "none";
+					this.$refs.myVideo.style.display = "block";
 				},
 			});
+			gsap.to([this.$refs.handDialog, this.$refs.info], {
+				autoAlpha: 1,
+				delay: 0.5,
+			});
 
 			this.engine.Start((e) => {
+				if (e.coordinates) {
+					const cursorPos = this.ExponentialCoordinateAverage(
+						this.ComputeCursorPositionFromCoordinates(e.coordinates)
+					);
+					console.log(cursorPos);
+				}
+
 				if (e.type === EventEnum.RESULT) {
 					if (e.poses.fist) {
 						this.handStatus = "握拳";
+						if (this.handStep == 1) {
+							this.handStep++;
+						}
 						// document.getElementById("status").innerText = "握拳";
 					} else if (e.poses.pinch) {
 						this.handStatus = "捏合";
 						// document.getElementById("status").innerText = "捏合";
 					} else {
 						this.handStatus = "张开";
+						if (this.handStep == 2) {
+							this.handStep++;
+						}
 						// document.getElementById("status").innerText = "张开";
 					}
 				} else if (e.type === EventEnum.LOST) {
@@ -337,6 +403,48 @@ export default {
 				return ver[1].replace(/_/g, ".");
 			}
 		},
+		// 计算坐标值平均数
+		ExponentialMovingAverage(value, alpha) {
+			if (this.curValue_ === undefined || this.curValue_ === null) {
+				this.curValue_ = value;
+			} else {
+				this.curValue_ = this.curValue_ * (1 - alpha) + value * alpha;
+			}
+			return this.curValue_;
+		},
+		// 计算出手指四个点
+		ExponentialCoordinateAverage(coord, alpha = 0.85) {
+			let xAvg_ = this.ExponentialMovingAverage(coord[0], alpha),
+				yAvg_ = this.ExponentialMovingAverage(coord[1], alpha),
+				zAbg_ = this.ExponentialMovingAverage(coord[2], alpha),
+				aAvg_ = this.ExponentialMovingAverage(coord[3], alpha);
+
+			return [xAvg_, yAvg_, zAbg_, aAvg_];
+		},
+		// 计算几个点的中间值
+		ComputeCursorPositionFromCoordinates(coords) {
+			// return [
+			// 	(coords[3][0] + coords[7][0]) / 2,
+			// 	(coords[3][1] + coords[7][1]) / 2,
+			// ];
+			if (coords[17][0] < coords[2][0]) {
+				// console.log('Right')
+				return [
+					((coords[0][0] + coords[9][0]) / 2) * 1,
+					(coords[0][1] + coords[9][1]) / 2,
+					coords[3][0] - coords[18][0],
+					coords[3][1] - coords[18][1],
+				];
+			} else {
+				// console.log('Left')
+				return [
+					((coords[0][0] + coords[9][0]) / 2) * 1.1,
+					(coords[0][1] + coords[9][1]) / 2,
+					coords[3][0] - coords[18][0],
+					coords[3][1] - coords[18][1],
+				];
+			}
+		},
 	},
 };
 </script>
@@ -351,14 +459,15 @@ export default {
 	align-content: center;
 	align-items: center;
 	.video {
-		position: relative;
-		z-index: 0;
+		.paLayout(50%,50%,auto,100%,0);
+		transform: translate(-50%, -50%);
 		// transform: scaleX(-1);
-		width: 750px;
-		height: auto;
+		// width: 750px;
+		display: none;
 		// height: 700px;
 	}
 	.info-dialog {
+		visibility: hidden;
 		.paLayout(0,0, 50%,130px,2);
 		background-color: rgba(255, 255, 255, 0.25);
 		border-radius: 0 0 30px 0;
@@ -383,14 +492,61 @@ export default {
 		.progress {
 		}
 	}
+	.hand-dialog {
+		visibility: hidden;
+		.paLayout(0,0,100%,100%,11);
+		background-color: rgba(0, 0, 0, 0.4);
+		color: #fff;
+		text-align: center;
+		line-height: 50px;
+		font-size: 30px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-content: center;
+		align-items: center;
+		pointer-events: none;
+		.hand {
+			margin-top: 20px;
+			.prLayout(160px*2.5,277px*2.5);
+			.bg-norepeat("hand_1","png");
+			background-size: contain;
+			&.hand-1 {
+				.bg-norepeat("hand_1","png");
+				background-size: contain;
+			}
+			&.hand-2 {
+				.bg-norepeat("hand_2","png");
+				background-size: contain;
+			}
+		}
+	}
 	.btn {
-		.paCenterBottom(200px,280px,80px,2);
-		background-color: #fff;
+		.paCenterBottom(50%,280px,80px,2);
+		background-color: rgba(255, 255, 255, 0.85);
 		line-height: 40px;
 		text-align: center;
 		border-radius: 8px;
 		font-size: 25px;
 	}
+	.progress-bar {
+		visibility: hidden;
+		.paCenter(50%,80%,40px,12);
+		margin-top: -20px;
+		border: 1px solid #fff;
+		border-radius: 20px;
+		padding: 4px;
+		.bar {
+			.prLayout(100%,100%);
+			border-radius: 12px;
+			overflow: hidden;
+			.progress {
+				width: 0%;
+				height: 100%;
+				background-color: #fff;
+			}
+		}
+	}
 	.unsuit-dialog {
 		visibility: hidden;
 		.paCenterBottom(0, 100%,80px,10);

tsconfig.json

@@ -1,15 +0,0 @@
-{
-    "compileOnSave": false,
-    "compilerOptions": {
-        "target": "es5",
-        "module": "commonjs",
-        "strict": true,
-        "strictNullChecks": true,
-        "esModuleInterop": true,
-        "experimentalDecorators": true
-    },
-    "exclude": [
-        "node_modules",
-        "dist"
-    ]
-}

vue.config.js

@@ -49,23 +49,23 @@ module.exports = {
         // .set("base", resolve("baseConfig"))
         // .set("public", resolve("public"));
 
-        if (process.env.NODE_ENV !== "test") {
-            config.module.rule('compile')
-                .test(/\.js$/)
-                .include
-                .add(resolve('src'))
-                .add(resolve('node_modules'))
-                .end()
-                .use('babel')
-                .loader('babel-loader')
-                .options({
-                    presets: [
-                        ['@babel/preset-env', {
-                            modules: false
-                        }]
-                    ]
-                });
-        }
+        // if (process.env.NODE_ENV !== "test") {
+        config.module.rule('compile')
+            .test(/\.js$/)
+            .include
+            .add(resolve('src'))
+            .add(resolve('node_modules'))
+            .end()
+            .use('babel')
+            .loader('babel-loader')
+            .options({
+                presets: [
+                    ['@babel/preset-env', {
+                        modules: false
+                    }]
+                ]
+            });
+        // }
 
     },
     configureWebpack: config => {
@@ -107,19 +107,19 @@ module.exports = {
 
         config.module.rules.push(
             // ts加载
-            {
-                test: /\.tsx?$/,
-                use: [
-                    {
-                        loader: 'ts-loader',
-                        options: {
-                            transpileOnly: true,
-                            appendTsSuffixTo: [/\.vue$/],
-                            happyPackMode: true // 这个改为true
-                        }
-                    }
-                ]
-            },
+            // {
+            //     test: /\.tsx?$/,
+            //     use: [
+            //         {
+            //             loader: 'ts-loader',
+            //             options: {
+            //                 transpileOnly: true,
+            //                 appendTsSuffixTo: [/\.vue$/],
+            //                 happyPackMode: true // 这个改为true
+            //             }
+            //         }
+            //     ]
+            // },
             //wasm加载
             {
                 test: /\.wasm$/i,