uskycloud
/
usky-web-pad


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>人脸识别</title>
    <!-- 按当前 HTML 所在目录设置 base，避免 web-view 下 ./js 解析到错误路径导致 face.js 未执行 -->
    <script>
        (function () {
            try {
                var p = window.location.pathname || "";
                var i = p.lastIndexOf("/");
                if (i >= 0) {
                    document.write('<base href="' + p.substring(0, i + 1).replace(/"/g, "") + '">');
                }
            } catch (e) {}
        })();
    </script>
    <script type="text/javascript" src="./js/tracking.js"></script>
    <script type="text/javascript" src="./js/face_data/face.js"></script>
    <script type="text/javascript" src="./js/face_data/eye.js"></script>
    <script type="text/javascript" src="./js/face_data/mouth.js"></script>
    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
    <!-- VUE3 的 SDK -->
    <script type="text/javascript" src="./js/vue.global.prod.js"></script>
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
    <!-- 全局区域样式 -->
    <link rel="stylesheet" href="./css/door_homeCard.css">
    <!-- 顶部区域样式 -->
    <link rel="stylesheet" href="./css/door_homeCardTop.css">
    <!-- 中心区域样式 -->
    <link rel="stylesheet" href="./css/door_homeCardCenter.css">
    <!-- 底部区域样式 -->
    <link rel="stylesheet" href="./css/door_homeCardFooter.css">
    <!-- 引入阿里iconfont库 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4400427_yp2hzj2yvbf.css">
    <style>
        .home-card-footer .btnArea .iconfont {
            font-family: "iconfont" !important;
            font-size: 2rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color: white;
        }

        .home-card-footer .btnArea .iconfont:nth-child(2n) {
            margin-left: 1rem;
        }

        .workRed {
            background-color: #f11e16;
        }

        .workYellow {
            background-color: #E6A23C;
        }

        .workGreen {
            background-color: #67C23A;
        }

        @media (min-width: 768px) {
            .home-card-top {
                width: calc(100% - 5rem) !important;
                margin: 1rem !important;
                padding: 2rem 1.5rem !important;
            }

            .home-card-top .date .time1 {
                margin-right: 1.5rem !important;
                font-size: 5rem !important;
            }

            .home-card-top .date .time2 {
                font-size: 2.5rem !important;
            }

            .home-card-top .title {
                font-size: 2rem !important;
            }

            .home-card-center>.date {
                font-size: 4rem;
            }

            .home-card-center>.date .title {
                margin-bottom: 5rem;
            }

            .home-card-center>.date .remark {
                font-size: 2rem;
                margin-bottom: 5rem;
            }

            .home-card-center>.date .workStatus {
                font-size: 3rem;
                padding: 10px 30px;
            }

            .home-card-footer {
                font-size: 2.5rem !important;
                margin-bottom: 4rem !important;
            }

            .home-card-footer .date .time1 {
                font-size: 3rem !important;
                margin-right: 2rem !important;
            }

            .home-card-footer .date .time2 {
                font-size: 2rem !important;
            }

            .home-card-footer .date .title {
                margin-top: 1rem !important;
            }

            .home-card-footer .btnArea .iconfont {
                font-size: 5.5rem;
            }

            .home-card-footer .btnArea .iconfont:nth-child(2n) {
                margin-left: 3rem;
            }
        }
    </style>
    <script>
        // 提前占位，防止宿主在页面初始化前调用 receiveData 导致未定义
        window.__pendingReceiveData = [];
        window.receiveData = function (msg) {
            window.__pendingReceiveData.push(msg);
        };
    </script>
</head>

<body>
    <div id="face-container" class="face-container home-card">
        <!-- 背景图片 -->
        <div class="home-card-image"
            :style="{backgroundImage: `url('${state.imgPath || 'img/face_bg.png'}')`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
        </div>
        <!-- 顶部内容区域 -->
        <div class="home-card-top">
            <div class="date" id="configDialog2">
                <span class="time1">{{ state.dateTime }}</span>
                <span class="time2">{{ state.date }}</span>
            </div>
            <div class="title" v-if="state.openMode && state.openMode.includes('人脸')">{{ state.doorName || '未绑定门禁' }}</div>
        </div>
        <!-- 人脸内容区域 -->
        <div class="home-card-center">
            <div class="date" id="configDialog1" v-if="!state.openMode || !state.openMode.includes('人脸')">
                <div class="title">{{ state.doorName || '未绑定门禁' }}</div>
                <div class="remark" v-if="state.remark">{{ state.remark }}</div>
                <div class="workStatus" :class="state.workClass" v-if="state.workName">{{ state.workName }}</div>
            </div>
            <div class="face" v-if="state.openMode && state.openMode.includes('人脸')">
                <!-- height="1564" -->
                <video id="video" width="300" height="300" style="width:40vh;height:40vh" preload autoplay loop
                    muted></video>
                <canvas id="myCanvas" width="300" height="300" style="width:40vh;height:40vh"></canvas>
                <!-- 人脸特效区域 -->
                <div id="specialEffects" class="specialEffects"></div>
            </div>
        </div>
        <!-- 底部内容区域 -->
        <div class="home-card-footer">
            <div class="btnArea">
                <i class="iconfont oa-dianji" @click="parentMessage('点击开门')" v-if="state.openMode && state.openMode.includes('点击开门')"></i>
                <i class="iconfont oa-mima" @click="parentMessage('密码')" v-if="state.openMode && state.openMode.includes('密码')"></i>
            </div>
        </div>
    </div>
    <script>
        // 创建Vue实例
        Vue.createApp({
            components: {},
            emits: [],
            props: {},
            data() {
                return {
                    flag: true,
                    time: 1000,
                    tracker: null,
                    trackerTask: null,
                    state: {
                        date: null,
                        dateTime: null,
                        doorName: null,
                        imgPath: null,
                        openMode: "",
                        remark: "",
                        workName: "",
                        workClass: ""
                    },
                    timeOutEvent: 0,
                    inter: {
                        dateDom: null
                    },
                    workStatusData: [
                        { label: "办公", value: 1, class: 'workRed' },
                        { label: "会客", value: 2, class: 'workRed' },
                        { label: "外出", value: 3, class: 'workGreen' },
                        { label: "勿扰", value: 4, class: 'workRed' },
                    ],
                };
            },
            computed: {},
            methods: {
                // 初始化数据
                initData(event) {
                    var that = this;
                    that.state.doorName = event.deviceName
                    that.state.imgPath = event.imgPath
                    that.state.openMode = event.openMode
                    that.state.remark = event.remark
                    var workStatusItem = that.workStatusData.find(item => item.value == event.workStatus);
                    if (workStatusItem) {
                        that.state.workName = workStatusItem.label;
                        that.state.workClass = workStatusItem.class;
                    } else {
                        that.state.workName = '';
                        that.state.workClass = '';
                    }

                    if (event.openMode && event.openMode.includes("人脸")) {
                        that.tracker == null ? that.initVido() : undefined
                    } else {
                        that.tracker != null ? that.closeFace() : undefined
                    }
                },
                // 初始化事件
                initHandle() {
                    var that = this;

                    $("#configDialog1,#configDialog2").on({
                        touchstart: function (e) {
                            that.timeOutEvent = setTimeout(() => {
                                that.parentMessage('打开门禁配置')
                                that.timeOutEvent = 0
                            }, 1000);
                            e.preventDefault();
                        },
                        touchmove: function () {
                            clearTimeout(that.timeOutEvent);
                            that.timeOutEvent = 0;
                        },
                        touchend: function () {
                            clearTimeout(that.timeOutEvent);
                            if (that.timeOutEvent != 0) {
                                console.log("你这是点击，不是长按");
                            }
                            return false;
                        }
                    })
                },
                // 初始化摄像头
                initVido() {
                    var that = this;

                    var video = document.getElementById("video");//视频dom
                    video.style.transform = 'scaleX(-1)';//视频翻转(1.水平翻转-scaleX(-1) 2.垂直翻转-scaleY(-1))
                    var canvas = document.getElementById('myCanvas');//画布dom
                    canvas.style.transform = 'scaleX(-1)';//画布翻转(1.水平翻转-scaleX(-1) 2.垂直翻转-scaleY(-1))
                    var context = canvas.getContext('2d');
                    that.tracker = new tracking.ObjectTracker(['face']);//'face', 'eye', 'mouth'
                    that.tracker.setInitialScale(4); //设置识别的放大比例
                    that.tracker.setStepSize(2);//设置步长
                    that.tracker.setEdgesDensity(0.1);//边缘密度
                    //启动摄像头，并且识别视频内容
                    that.trackerTask = tracking.track('#video', that.tracker, {
                        camera: true,
                    });

                    that.tracker.on('track', function (event) {
                        // console.log(event.data.length)
                        if (that.flag) {
                            // console.log("拍照");
                            that.state.faceImgState = false;
                            context.drawImage(video, 0, 0, video.width, video.height);
                            that.saveAsLocalImage()
                            // that.capturePartialImage(rect.x, rect.y, rect.width, rect.height);
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            that.flag = false;
                        } else {
                            //console.log("冷却中");
                        }

                        if (event.data.length === 0) {
                            // console.log('未检测到人脸')
                            context.clearRect(0, 0, canvas.width, canvas.height);
                        } else if (event.data.length > 1) {
                            // console.log('检测到多张人脸')
                            context.clearRect(0, 0, canvas.width, canvas.height);
                        } else {
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            event.data.forEach(function (rect) {
                                context.strokeStyle = '#409eff';
                                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                                context.fillStyle = "#409eff";
                                context.lineWidth = 1.5;
                            });
                        }
                    });
                },
                // 向父页面推送数据
                parentMessage(type, data) {
                    var message = {
                        funcName: type,
                        data: data,
                    };

                    //APP-PLUS
                    uni.postMessage({
                        data: message
                    });

                    //H5
                    if (window.parent) {
                        window.parent.postMessage(message, '*');
                    }
                },
                // 当需要抓拍部分画布时
                capturePartialImage(x, y, width, height) {
                    // 创建一个新的canvas，用于抓拍部分画布
                    const canvas = document.getElementById('myCanvas');//画布dom
                    const croppedCanvas = document.createElement('canvas');
                    croppedCanvas.width = width;
                    croppedCanvas.height = height;
                    const croppedCtx = croppedCanvas.getContext('2d');

                    // 只抓取需要的部分
                    croppedCtx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
                    var image = croppedCanvas.toDataURL("image/png")
                    that.parentMessage('人脸识别', { imageBase: image })
                },
                // 获取图片bold
                saveAsLocalImage() {
                    var that = this
                    // var myCanvas = document.getElementById("myCanvas");
                    // var image = myCanvas.toDataURL("image/png")
                    // that.parentMessage('人脸识别', { imageBase: image })

                    // 创建一个新的canvas，用于抓拍部分画布
                    const canvas = document.getElementById('myCanvas');//画布dom
                    const croppedCanvas = document.createElement('canvas');
                    croppedCanvas.width = 200;
                    croppedCanvas.height = 200;
                    const croppedCtx = croppedCanvas.getContext('2d');

                    // 只抓取需要的部分
                    croppedCtx.drawImage(canvas, 0, 0, 150, 150);
                    var image = croppedCanvas.toDataURL("image/png");
                    that.parentMessage('人脸识别', { imageBase: image })
                },
                // 人脸冷却
                faceCooling() {
                    var that = this
                    setTimeout(() => {
                        that.flag = true
                        that.state.faceImgState = false;
                    }, that.time);
                },
                // 解析数据
                analysisData(event) {
                    console.log(event.funcName)
                    if ("funcName" in event) {
                        if (event.funcName == "初始化数据") {
                            this.initData(JSON.parse(event.data));
                        } else if (event.funcName == "开启摄像头" && document.getElementById("video")) {
                            this.initVido();//调用初始化摄像头
                        } else if (event.funcName == "关闭摄像头") {
                            this.closeFace();
                        } else if (event.funcName == "人脸冷却") {
                            this.faceCooling();
                        }
                    }
                },
                // 监听页面是否隐藏
                handleVisibilityChange() {
                    if (document.visibilityState === 'visible') {
                        // 页面变为可见时的处理逻辑
                        console.log('页面变为可见');
                        this.tracker == null && document.getElementById("video") ? this.initVido() : undefined
                    } else if (document.visibilityState === 'hidden') {
                        // 页面变为不可见时的处理逻辑
                        console.log('页面变为不可见');
                        this.tracker != null && document.getElementById("video") ? this.closeFace() : undefined
                    }
                },
                // 关闭摄像头
                closeFace() {
                    try {
                        this.tracker = null
                        // 关闭摄像头
                        let video = document.getElementById('video')
                        video.srcObject.getTracks()[0].stop()
                        // 停止侦测
                        this.trackerTask.stop()
                    } catch (error) { }
                },
                /**
                * @获取年月日时分
                * @returns
                */
                getFormatterDate(time3) {
                    var date = new Date(time3);
                    var Y = date.getFullYear() + "/";
                    var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/";
                    var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

                    var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
                    var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())
                    var strDate = Y + M + D + h + m;

                    return strDate;
                },
            },
            created() {
                var that = this
                // APP-PLUS || H5（接收父页面传过来的值）
                window.receiveData = (msg) => {
                    that.analysisData(msg)
                }
                window.addEventListener("message", function (event) {
                    that.analysisData(event.data)
                });
            },
            mounted() {
                document.addEventListener('visibilitychange', this.handleVisibilityChange);

                if (!this.inter.dateDom) {
                    this.inter.dateDom = setInterval(() => {
                        this.state.date = this.getFormatterDate(new Date()).split(' ')[0]
                        this.state.dateTime = this.getFormatterDate(new Date()).split(' ')[1]
                    }, 1000);
                }

                this.initHandle();//初始化事件dom
            },
            beforeDestroy() {
                // 移除window方法
                window.receiveData = null;
                clearInterval(inter.dateDom); //销毁之前定时器
            },
            watch: {},
        }).mount('#face-container');
    </script>
</body>

</html>