自定义webIpad证件相机_志定义相机网页版-CSDN博客

本文链接：https://blog.csdn.net/zarek_jiamu/article/details/140654972

该技术方案可用于各浏览器自定义相机开发

相机UI（index.html）

<!DOCTYPE html>
<html lang="zh" prew="-1">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width" />
    <title>自定义相机</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./tools.js"></script>
    <script src="./index.js"></script>
</head>

<body>
    <div class="errTip">
        <p>Failed to obtain the rear camera of the device. Please try another solution to obtain resources!</p>
        <button class="errBtn">GO Back</button>
    </div>
    <div class="takeOffTip"></div>
    <div class="imgBoxDom">
        <div class="imgBox">
            <img src="./center.png" style="width: 4vw;">
        </div>
    </div>
    <div class="rightBtnBox">
        <div class="takeBtn"></div>
        <div class="cancleBtn btn"></div>
    </div>
    <div class="bottomBtnBox">
        <div class="reTakeBtn btn bottonSize"></div>
        <div class="nextBtn btn bottonSize"></div>
    </div>
    <div class="loading-css">
        Loading...
    </div>
</body>

</html>

相机UI样式(style.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    color: #fff;
}

.cancleBtn {
    padding: 2vw 0;
    width: 100%;
}

.takeOffTip {
    position: fixed;
    padding-top: 2vw;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1.8vw;
    text-align: center;
    color: #fff;
}

.bottonSize {
    height: 100%;
    line-height: 6vw;
    line-height: 6dvw;
    padding: 0 1.5vw;
}

.bottomBtnBox,
.rightBtnBox {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    z-index: 10;
}

.bottomBtnBox {
    bottom: 0;
    width: 100%;
    height: 6vw;
    height: 6dvw;
}

.rightBtnBox {
    flex-direction: column;
    top: 0;
    height: 100%;
    width: 6vw;
    width: 6dvw;
}

html[prew='-1'] .bottomBtnBox,
html[prew='0'] .bottomBtnBox,
html[prew='-1'] .rightBtnBox,
html[prew='1'] .rightBtnBox,
html[prew='1'] .customer_carema {
    display: none;
}

html[prew='1'] .imgBox {
    border: 0;
    font-size: 0;
    opacity: 0;
}

.takeBtn {
    padding: 4px;
    width: 5vw;
    width: 5dvw;
    height: 5vw;
    height: 5dvw;
    background-color: #fff;
    border-radius: 50%;
}

.takeBtn::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border: 5px solid #000;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
}

.rightBtnBox::before {
    content: '';
    display: block;
}

.btn {
    background-color: #000;
    text-align: center;
    font-size: 1.5vw;
    color: #fff;
}

.customer_video,
.carema_img,
.cuteImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imgBoxDom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.imgBox {
    width: var(--carema-box-width);
    height: var(--carema-box-height);
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10vw;
    z-index: 10;
    border-radius: 2vw;
}

.errTip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8888;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.errTip>p {
    padding-bottom: 20px;
    color: #fff;
}

.errTip button {
    padding: 10px 30px;
}

html[prew='2'] .errTip {
    display: flex;
}

ht