|
|
@@ -9,16 +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 -->
|
|
|
- <div class="video-wrap">
|
|
|
- <video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
|
|
|
- <div class="face-mark"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <video id="video" autoplay webkit-playsinline="true" playsinline="true"></video>
|
|
|
<!-- <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> -->
|
|
|
- <div class="box" style="display: none;">
|
|
|
+ <div class="box">
|
|
|
<span class="text">请正对摄像头</span>
|
|
|
<canvas class="canvas" id="canvas"></canvas>
|
|
|
</div>
|
|
|
@@ -45,24 +41,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<div class="buttonBox">
|
|
|
-
|
|
|
<!-- 拍照按钮 -->
|
|
|
<img class="buttonImg" id="back" src="../images/back.png" />
|
|
|
<img class="buttonImg" id="capture" src="../images/pai.png" />
|
|
|
<img class="buttonImg" id="fanzhuan" src="../images/fan.png" />
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<div id="popup">
|
|
|
<img id="popupImg" alt="" src="">
|
|
|
<div class="popupBox">
|
|
|
<button id="closeBtn">取消</button>
|
|
|
<button id="okBtn">确认</button>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
@@ -244,23 +235,9 @@
|
|
|
</script>
|
|
|
</body>
|
|
|
<style scoped>
|
|
|
- @keyframes changeColor {
|
|
|
- 0% {
|
|
|
- border-color: #FFF;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- border-color: #00FF00;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- border-color: #FFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
video {
|
|
|
- width: 100%;
|
|
|
- height: 400px;
|
|
|
+ /* transform: rotateY(180deg); */
|
|
|
+ display: none;
|
|
|
transform: scaleX(-1);
|
|
|
-o-transform: scaleX(-1);
|
|
|
-webkit-transform: scaleX(-1);
|
|
|
@@ -268,37 +245,24 @@
|
|
|
-ms-filter: fliph;
|
|
|
}
|
|
|
|
|
|
- .video-wrap {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
.face-mark {
|
|
|
position: absolute;
|
|
|
- top: 50%;
|
|
|
+ top: 5%;
|
|
|
left: 50%;
|
|
|
- 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;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 80%;
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
- margin: 12vh auto;
|
|
|
+ margin: 6vh auto 12vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
text-align: center;
|
|
|
|
|
|
-
|
|
|
.canvas {
|
|
|
-
|
|
|
margin-top: 6vh;
|
|
|
border-radius: 50%;
|
|
|
+ transform: rotateY(180deg)
|
|
|
}
|
|
|
|
|
|
.text {
|
