<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.3.4/antd-mobile.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">
<style>
.container {
background-color: #000;
width: 100%;
min-height: 100%;
}
.container .shadow-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
overflow: hidden;
}
.container .shadow-layer .capture-rectangle {
margin: 35% auto;
width: 90%;
height: 40%;
border: 1px solid #fff;
border-radius: 5px;
z-index: 2;
box-shadow: 0 0 0 200rem rgba(0, 0, 0, 0.7);
position: relative;
background: url('./123.png') no-repeat center/100% auto;
}
.container .shadow-layer .hold-tips{
position: absolute;
color: white;
bottom: -30px;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="container" class="container">
<video
id="video"
autoplay
muted
playsinline
style="width: 100%;"
></video>
<div id="shadow-layer" class="shadow-layer">
<div id="capture-rectangle" class="capture-rectangle">
<div id="hold-tips" class="hold-tips">*请将身份证放在框中</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('video');
const shadowLayer = document.getElementById('shadow-layer');
let videoHeight = 0;
let fileList = [];
async function getUserMediaStream(video) {
const constraints = {
video: {
facingMode: { exact: 'environment' } // 采用后置摄像头
}
};
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
} catch (err) {
console.error('Error accessing media devices.', err);
}
}
function showFail(message) {
alert(message.text);
}
function startCapture() {
// Add logic to start capturing
}
function updateUploadFiles(url = '') {
// Add logic to update upload files
}
function onChangeFile(event) {
const file = event.target.files[0];
if (file) {
// Add logic to handle file change
}
}
// 监听视频元数据加载完成事件
video.addEventListener('loadedmetadata', function() {
videoHeight = video.videoHeight; // 获取视频的实际高度
shadowLayer.style.height = videoHeight + 'px';
startCapture(); // 开始捕捉视频
});
getUserMediaStream(video);
});
</script>
</body>
</html>