1 年之前 · 90f709119f
--- a/static/html/face.html
+++ b/static/html/face.html
@@ -9,8 +9,12 @@
 
				 	<body style="background-color: blanchedalmond;display: flex;flex-direction: column;">
			
 
				 		<!-- 说明：将网页更改为https访问才行 否者报错：NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). -->
			
 
				 		<!-- video用于显示媒体设备的视频流，自动播放；属性：https://zhuanlan.zhihu.com/p/535917105 -->
			
 
				-		<video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
			
 
				-		<img class="face-mark" src="../images/face-mark.png" alt="" />
			
 
				+		<div class="video-wrap">
			
 
				+			<video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
			
 
				+			<div class="face-mark"></div>
			
 
				+		</div>
			
 
				+
			
 
				+		<!-- <img class="face-mark" src="../images/face-mark.png" alt="" /> -->
			
 
				 		<!-- transform: rotateY(180deg); 镜像解决 -->
			
 
				 		<!-- 可以通过画布canvas渲染，获取使用默认的video也行 -->
			
 
				 		<!-- <canvas id="canvas" width="500" height="400" style="transform: rotateY(180deg);"></canvas> -->
			
@@ -240,9 +244,23 @@
 
				 		</script>
			
 
				 	</body>
			
 
				 	<style scoped>
			
 
				+		@keyframes changeColor {
			
 
				+			0% {
			
 
				+				border-color: #FFF;
			
 
				+			}
			
 
				+
			
 
				+			50% {
			
 
				+				border-color: #00FF00;
			
 
				+			}
			
 
				+
			
 
				+			100% {
			
 
				+				border-color: #FFF;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				 		video {
			
 
				-			/* transform: rotateY(180deg); */
			
 
				-			/* display: none; */
			
 
				+			width: 100%;
			
 
				+			height: 400px;
			
 
				 			transform: scaleX(-1);
			
 
				 			-o-transform: scaleX(-1);
			
 
				 			-webkit-transform: scaleX(-1);
			
@@ -250,12 +268,24 @@
 
				 			-ms-filter: fliph;
			
 
				 		}
			
 
				 
			
 
				+		.video-wrap {
			
 
				+			width: 100%;
			
 
				+
			
 
				+			position: relative;
			
 
				+			overflow: hidden;
			
 
				+		}
			
 
				+
			
 
				 		.face-mark {
			
 
				 			position: absolute;
			
 
				-			top: 5%;
			
 
				+			top: 50%;
			
 
				 			left: 50%;
			
 
				-			transform: translateX(-50%);
			
 
				-			width: 80%;
			
 
				+			transform: translate(-50%, -50%);
			
 
				+			width: 14rem;
			
 
				+			height: 14rem;
			
 
				+			border-radius: 50%;
			
 
				+			border: 3px dashed #fff;
			
 
				+			box-shadow: 0 0 0 9999em rgba(0, 0, 0, .86);
			
 
				+			animation: changeColor 1.2s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
			
 
				 		}
			
 
				 
			
 
				 		.box {