wenhongquan
/
qdtlui


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= webpackConfig.name %>
    </title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
    <style>
        html,
        body,
        #app {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-size: 10px;
        }

        .chromeframe {
            margin: 0.2em 0;
            background: #ccc;
            color: #000;
            padding: 0.2em 0;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            z-index: 1001;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #7171C6;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        #loader-wrapper .loader-section.section-left {
            left: 0;
        }

        #loader-wrapper .loader-section.section-right {
            right: 0;
        }

        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }

        .no-js #loader-wrapper {
            display: none;
        }

        .no-js h1 {
            color: #222222;
        }

        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            position: absolute;
            top: 60%;
            opacity: 1;
            line-height: 30px;
        }

        #loader-wrapper .load_title span {
            font-weight: normal;
            font-style: italic;
            font-size: 13px;
            color: #FFF;
            opacity: 0.5;
        }
    </style>

    <!--三个必要的js文件引入-->
    <script src="./html/jquery-1.12.4.min.js"></script>
    <script src="./html/jsencrypt.min.js"></script>
    <!-- 用于RSA加密 -->
    <script src="./html/jsWebControl-1.0.0.min.js"></script>
    <!-- 用于前端与插件交互 -->

    <script type="text/javascript">
        var b_width = 1000;
        var b_height = 400;

        function getsize() {
            var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
            b_width = oDivRect.width;
            b_height = oDivRect.height;
        }
        // if (cameraid == null) {
        //     alert("缺少摄像机编号");
        //     setTimeout(function() {
        //         window.open("about:blank", "_self").close();
        //     }, 1000);
        // } else {
        // getsize();
        //页面加载时创建播放实例初始化
        // $(window).load(function() {
        //     initPlugin();
        // });

        //声明公用变量
        var initCount = 0;
        var pubKey = "";

        // 创建播放实例
        function initPlugin() {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd", // 指定容器id
                iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: function() {
                    // 创建WebControl实例成功
                    oWebControl
                        .JS_StartService("window", {
                            // WebControl实例创建成功后需要启动服务
                            dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
                        })
                        .then(
                            function() {
                                // 启动插件服务成功
                                oWebControl.JS_SetWindowControlCallback({
                                    // 设置消息回调
                                    cbIntegrationCallBack: cbIntegrationCallBack,
                                });

                                oWebControl
                                    .JS_CreateWnd("playWnd", b_width, b_height)
                                    .then(function() {
                                        //JS_CreateWnd创建视频播放窗口，宽高可设定
                                        init(); // 创建播放实例成功后初始化
                                    });
                            },
                            function() {
                                // 启动插件服务失败
                            }
                        );
                },
                cbConnectError: function() {
                    // 创建WebControl实例失败
                    oWebControl = null;
                    $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function() {
                            initPlugin();
                        }, 3000);
                    } else {
                        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                    }
                },
                cbConnectClose: function(bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    console.log("cbConnectClose");
                    oWebControl = null;
                },
            });
        }

        // 设置窗口控制回调
        function setCallbacks() {
            oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: cbIntegrationCallBack,
            });
        }

        // 推送消息
        function cbIntegrationCallBack(oData) {
            console.log(JSON.stringify(oData.responseMsg));
        }
        window.videosize = "1x1";
        //初始化
        function init() {
            getPubKey(function() {
                ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
                var appkey = "27794545"; //综合安防管理平台提供的appkey，必填
                var secret = setEncrypt("5Xi27Gl7JrbHHF1MpdaB"); //综合安防管理平台提供的secret，必填
                var ip = "2.90.220.252"; //综合安防管理平台IP地址，必填
                var playMode = 0; //初始播放模式：0-预览，1-回放
                var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
                var snapDir = "D:\\SnapDir"; //抓图存储路径
                var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
                var layout = window.videosize; //playMode指定模式的布局
                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                var encryptedFields = "secret"; //加密字段，默认加密领域为secret
                var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
                var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                var buttonIDs =
                    "1,0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

                oWebControl
                    .JS_RequestInterface({
                        funcName: "init",
                        argument: JSON.stringify({
                            appkey: appkey, //API网关提供的appkey
                            secret: secret, //API网关提供的secret
                            ip: ip, //API网关IP地址
                            playMode: playMode, //播放模式（决定显示预览还是回放界面）
                            port: port, //端口
                            snapDir: snapDir, //抓图存储路径
                            videoDir: videoDir, //紧急录像或录像剪辑存储路径
                            layout: layout, //布局
                            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                            encryptedFields: encryptedFields, //加密字段
                            showToolbar: showToolbar, //是否显示工具栏
                            showSmart: showSmart, //是否显示智能信息
                            buttonIDs: buttonIDs, //自定义工具条按钮
                        }),
                    })
                    .then(function(oData) {
                        oWebControl.JS_Resize(b_width, b_height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                        if (window.videoresiz === "1x1") {
                            window.startPreview(window.cameraid, -1);

                        }

                    });
            });
        }

        //获取公钥
        function getPubKey(callback) {
            oWebControl
                .JS_RequestInterface({
                    funcName: "getRSAPubKey",
                    argument: JSON.stringify({
                        keyLength: 1024,
                    }),
                })
                .then(function(oData) {
                    console.log(oData);
                    if (oData.responseMsg.data) {
                        pubKey = oData.responseMsg.data;
                        callback();
                    }
                });
        }

        //RSA加密
        function setEncrypt(value) {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(pubKey);
            return encrypt.encrypt(value);
        }

        // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
        $(window).resize(function() {
            videoresiz();
        });

        function videoresiz() {
            if (oWebControl != null) {
                getsize();
                oWebControl.JS_Resize(b_width, b_height);
                //  setWndCover();
            }

        }

        // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
        /**$(window).scroll(function () {
          if (oWebControl != null) {
            oWebControl.JS_Resize(1000, 600);
            setWndCover();
          }
        });**/

        // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        function setWndCover() {
            var iWidth = $(window).width();
            var iHeight = $(window).height();
            var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

            var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
            var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
            var iCoverRight =
                oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
            var iCoverBottom =
                oDivRect.bottom - iHeight > 0 ?
                Math.round(oDivRect.bottom - iHeight) :
                0;

            iCoverLeft = iCoverLeft > 1000 ? 1000 : iCoverLeft;
            iCoverTop = iCoverTop > 600 ? 600 : iCoverTop;
            iCoverRight = iCoverRight > 1000 ? 1000 : iCoverRight;
            iCoverBottom = iCoverBottom > 600 ? 600 : iCoverBottom;

            oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
                oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
            }
            if (iCoverTop != 0) {
                oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
                oWebControl.JS_CuttingPartWindow(
                    1000 - iCoverRight,
                    0,
                    iCoverRight,
                    600
                );
            }
            if (iCoverBottom != 0) {
                oWebControl.JS_CuttingPartWindow(
                    0,
                    600 - iCoverBottom,
                    1000,
                    iCoverBottom
                );
            }
        }

        //视频预览功能
        $("#startPreview").click(function() {
            startPreview(window.cameraid, -1);
        });

        //停止全部预览
        $("#stopAllPreview").click(function() {
            stopall();
        });

        // 标签关闭
        // $(window).unload(function() {
        function closevideo() {
            if (oWebControl != null) {
                oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                oWebControl.JS_Disconnect().then(
                    function() {
                        // 断开与插件服务连接成功
                    },
                    function() {
                        // 断开与插件服务连接失败
                    }
                );
            }
        }
        // });

        function stopall() {
            oWebControl.JS_RequestInterface({
                funcName: "stopAllPreview",
            });
        }

        // windexlist   [{wndId: 1},{wndId: 2}]
        function stoppreview(windexlist = []) {
            oWebControl.JS_RequestInterface({
                funcName: "stopMultiPlay",
                argument: {
                    list: windexlist
                }
            });
        }


        function startPreview(cameraIndexCode = window.cameraid, index = -1) {

            var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值，必填
            var streamMode = 0; //主子码流标识：0-主码流，1-子码流
            var transMode = 1; //传输协议：0-UDP，1-TCP
            var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
            var wndId = index; //播放窗口序号（在2x2以上布局下可指定播放窗口）

            cameraIndexCode = (cameraIndexCode + "").replace(/(^\s*)/g, "");
            cameraIndexCode = (cameraIndexCode + "").replace(/(\s*$)/g, "");

            oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId, //可指定播放窗口
                }),
            });
        }
        // }
        window.startPreview = startPreview;

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    </script>
</head>

<body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
    </div>
</body>

</html>