uskycloud
/
usky-web-mobile


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>人脸识别</title>
    <script type="text/javascript" src="./js/tracking-min.js"></script>
    <script type="text/javascript" src="./js/face-min.js"></script>
    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            /* Safari */
            -webkit-user-select: none;
            /* Firefox */
            -moz-user-select: none;
            /* IE10+/Edge */
            -ms-user-select: none;
            /* Standard syntax */
            user-select: none;

            ::-webkit-scrollbar {
                display: none;
            }
        }

        video,
        canvas {
            position: absolute;
            left: 0;
            top: 0;
        }

        .home-card-one,
        .home-card-two,
        .home-card-three {
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
            color: #000;
            padding: 20px 20px 50px 20px;
            width: calc(100% - 40px);
            height: calc(100% - 70px);
            text-align: center;
            background-color: #fff;
        }


        .home-card-left {
            display: flex;
            flex-wrap: wrap;
            width: calc(50% - 10px);
            margin-right: 10px;
        }

        .home-card-left-image {
            max-height: auto;
        }

        .home-card-left-header {
            width: 100%;
            clear: both;
            font-size: 30px;
            color: #409eff;
            margin: 30px 0 30px 0;
        }

        .home-card-left-content {
            width: 100%;
            font-size: 18px;
            padding: 10px;
            background-color: #dfdfdf;
            border-radius: 15px;
        }

        /* .home-card-left-content>div:last-child {
            margin-bottom: 30px;
        } */

        .home-card-left-content>div {
            margin-bottom: 20px;
        }

        .home-card-left-content>div:first-child {
            text-align: left;
            margin-bottom: 30px;
        }

        .home-card-right {
            display: flex;
            flex-wrap: wrap;
            width: calc(50% - 10px);
            text-align: center;
            justify-content: center;
            background-color: #409eff;
            border-radius: 15px;
            color: white;
            margin-left: 10px;
        }

        .home-card-right-header {
            display: flex;
            justify-content: center;
            max-height: 36px;
            margin-bottom: 30px;
        }

        .home-card-right-header-center {
            padding: 10px;
            font-size: 12px;
            background: rgb(255 255 255 / 10%);
            border-radius: 5px;
        }

        .home-card-right-header-title {
            font-size: 18px;
            margin: auto 0;
        }

        .home-card-right-content {
            width: 100%;
        }

        .home-card-right-footer {
            position: relative;
            width: 320px;
            height: 240px;
        }

        .home-card-bottom {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            overflow: auto;
            height: 31px;
            margin-top: 20px;
        }

        .home-card-bottom>div {
            padding: 6px;
            font-size: 13px;
            color: #fff;
            border-left: 1.5px #fff solid;
            white-space: nowrap;
        }

        .home-card-bottom>div:first-child {
            border: 0px;
        }

        @media (max-width: 768px) {

            .home-card-left,
            .home-card-right {
                width: 100% !important;
                margin: 0 !important;
            }

            .home-card-left {
                margin-bottom: 20px !important;
            }
        }
    </style>
</head>

<body>
    <div id="face-container" class="face-container home-card-two">
        <div id="home-card-left" class="home-card-left"></div>
        <div id="home-card-right" class="home-card-right"></div>
        <div id="home-card-bottom" class="home-card-bottom"></div>
    </div>

    <script type="text/javascript">
        var state = {
            dataAll: {},
            thisVenueData: [],
            thisVenueTime: {},
            nextSceneData: [],
            nextSceneTime: {},
            timeList: []
        }
        var timeOutEvent = 0;


        // 初始化
        function initData() {
            $(`#home-card-left`).append(`
                <image id="home-card-left-image" class="home-card-left-image" src="./img/logo.png" width="125px" height="60px" mode="aspectFill"></image>
                <div class="home-card-left-header">${state.dataAll?.roomName || "请配置会议室"}</div>
                <div class="home-card-left-content" style="margin-bottom: 20px;">
                    <div>本场会议</div>
                    <div>${state.thisVenueData[0]?.meetingName || "空闲中"}</div>
                    <div>${state.thisVenueTime.startTime || "00:00"} — ${state.thisVenueTime.endTime || "00:00"}</div>
                </div>

                <div class="home-card-left-content">
                    <div>下场会议</div>
                    <div>${state.nextSceneData[0]?.meetingName || "空闲中"}</div>
                    <div>${state.nextSceneTime.startTime || "00:00"} — ${state.nextSceneTime.endTime || "00:00"}</div>
                </div>
            `)

            $(`#home-card-right`).append(`
                <div class="home-card-right-header">
                    <div class="home-card-right-header-center">
                        <span style="padding: 0 5px 0 0; border-right: 1px #fff solid">温度：80℃</span>
                        <span style="padding: 0px 5px; border-right: 1px #fff solid">湿度：80%</span>
                        <span style="padding: 0px 5px; border-right: 1px #fff solid">PM2.5：10μg/m3</span>
                        <span style="padding: 0 0 0 5px">甲醛：0ppm</span>
                    </div>
                    <div class="home-card-right-header-title">${state.thisVenueData[0] ? "&nbsp;&nbsp;会议进行中" : "&nbsp;"}</div>
                </div>
                <div class="home-card-right-content">
                    <div style="font-size: 20px; margin-bottom: 15px;">${state.thisVenueData[0]?.meetingName || "空闲中"}</div>
                    <div style="font-size: 18px; margin-bottom: 15px;">
                        ${state.thisVenueTime.startTime || "00:00"} — ${state.thisVenueTime.endTime || "00:00"}
                    </div>
                    <div style="font-size: 14px; margin-bottom: 15px;">${state.msg || "&nbsp;"}</div>
                </div>
                <div class="home-card-right-footer" id="home-card-right-footer">
                    <video id="video" width="320" height="240" preload autoplay loop muted></video>
                    <canvas id="canvas" width="320" height="240"></canvas>
                </div>
            `)

            var html = ``
            state.timeList.forEach((item, timeIndex) => {
                html += `
                    <div id="timeScorll${timeIndex}" style="background-color: ${item.isEnd === 1 ? "#909399" : item.isHave === 1 ? "#fa3534" : item.isReservation === 1 ? "#ff9900" : "#409eff"}">
                      ${item.isEnd != 0 || item.isHave != 0 || item.isReservation != 0 ? item.startTime + " —— " + item.endTime : item.startTime}  
                    </div >
                `
            });
            $(`#home-card-bottom`).append(html)

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

            var flag = true;
            tracker.on('track', function (event) {
                if (event.data.length === 0) {
                    // console.log('未检测到人脸')
                    context.clearRect(0, 0, canvas.width, canvas.height);
                } else if (event.data.length > 1) {
                    // console.log('检测到多张人脸')
                } 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;
                    });
                    if (flag) {
                        console.log("拍照");
                        context.drawImage(video, 0, 0, video.width, video.height);
                        saveAsLocalImage();
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        flag = false;
                        setTimeout(function () {
                            flag = true;
                        }, time);
                    } else {
                        //console.log("冷却中");
                    }
                }
            });

            $("#home-card-left-image").on({
                touchstart: function (e) {
                    timeOutEvent = setTimeout("longPress()", 500);
                    e.preventDefault();
                },
                touchmove: function () {
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                },
                touchend: function () {
                    clearTimeout(timeOutEvent);
                    if (timeOutEvent != 0) {
                        console.log("你这是点击，不是长按");
                    }
                    return false;
                }
            })
        }

        // 长按事件
        function longPress() {
            timeOutEvent = 0
            parentMessage('打开配置')
        }

        /**
         * 解析数据
         */
        function analysisData(event) {
            console.log(event.funcName)
            if ("funcName" in event) {
                if (event.funcName == "初始化") {
                    $(`#home-card-left`).empty();//删除dom下的所有子元素
                    $("#home-card-right").empty();//删除dom下的所有子元素
                    $(`#home-card-bottom`).empty();//删除dom下的所有子元素

                    state.dataAll = JSON.parse(event.data).dataAll
                    state.thisVenueData = JSON.parse(event.data).thisVenueData
                    state.thisVenueTime = JSON.parse(event.data).thisVenueTime
                    state.nextSceneData = JSON.parse(event.data).nextSceneData
                    state.nextSceneTime = JSON.parse(event.data).nextSceneTime
                    state.timeList = JSON.parse(event.data).timeList

                    initData();
                } else if (event.funcName == "撒点") {

                }
            }
        }

        // 获取图片bold
        function saveAsLocalImage() {
            var myCanvas = document.getElementById("canvas");
            var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            parentMessage('人脸识别', { imageBase: image })
        }

        // 向父页面发送数据
        function parentMessage(type, data) {
            var message = {
                funcName: type,
                data: data,
            };

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

            //H5
            if (window.parent) {
                window.parent.postMessage(message, '*');
            }
        }

        /**
         * APP-PLUS || H5
         * 接收父页面传过来的值
         */
        window.receiveData = function (msg) {
            analysisData(msg)
        }
        window.addEventListener("message", function (event) {
            analysisData(event.data)
        });

        window.onload = function () {
            initData();
        };
    </script>

</body>

</html>