分支自 ard/ruoyi-api
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
aijinhui
2023-10-18 1d69c4b7da499b1d80b47fda9b275a795a8a7063 
 ard-work/src/main/resources/templates/test.html


@@ -9,118 +9,132 @@


    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>


    <script th:src="@{/js/bootstrap.js}"></script>


    <style>


    .top-buffer { margin-top:10px; }


        .top-buffer {


            margin-top: 10px;


        }


    </style>


<body>


<div class="container">


        <div class="row ">


            <div class="dropdown">


                相机id：


                <select id="select">


                </select>


            </div>


    <div class="row ">


        <div class="dropdown">


            相机id：<select id="select">


        </select>


        </div>


        <div class="row top-buffer">


            <div class="col-md-1 col-md-offset-1">


                <button id="up" type="button" class="btn btn-primary">上</button>


            </div>


            <div class="col-md-4 col-md-offset-3">


                <div class="btn-group" role="group">


                    <button id="controlZoomIn" type="button" class="btn btn-primary">调焦-</button>


                    <button id="controlZoomOut" type="button" class="btn btn-primary">调焦+</button>


                </div>


            </div>


    </div>


    <div class="row top-buffer">


        <div class="col-md-1 col-md-offset-1">


            <button id="up" type="button" class="btn btn-primary">上</button>


        </div>


        <div class="row ">


            <div class="col-md-1">


                <button id="left" type="button" class="btn btn-primary">左</button>


            </div>


            <div class="col-md-1 col-md-offset-1">


                <button id="right" type="button" class="btn btn-primary">右</button>


            </div>


            <div class="col-md-4 col-md-offset-2">


                <div class="btn-group" role="group">


                    <button id="controlFocusNear" type="button" class="btn btn-primary">聚焦-</button>


                    <button id="controlFocusFar" type="button" class="btn btn-primary">聚焦+</button>


                </div>


            </div>


        </div>


        <div class="row ">


            <div class="col-md-1 col-md-offset-1">


                <button id="down" type="button" class="btn btn-primary">下</button>


            </div>


            <div class="col-md-4 col-md-offset-3">


                <div class="btn-group" role="group">


                    <button id="controlIrisOpen" type="button" class="btn btn-primary">光圈-</button>


                    <button id="controlIrisClose" type="button" class="btn btn-primary">光圈+</button>


                </div>


            </div>


        </div>


        <div class="row top-buffer">


            <div class="input-group">


                <span class="input-group-addon">P值：</span>


                <input id="p" class="form-control" placeholder="请输入P值"/>


            </div>


            <div class="input-group">


                <span class="input-group-addon">T值：</span>


                <input id="t" class="form-control" placeholder="请输入T值"/>


            </div>


            <div class="input-group">


                <span class="input-group-addon">Z值：</span>


                <input id="z" class="form-control" placeholder="请输入Z值"/>


            </div>


        </div>


        <div class="row top-buffer">


        <div class="col-md-4 col-md-offset-3">


            <div class="btn-group" role="group">


                <button id="getPTZ" type="button" class="btn btn-default">获取ptz</button>


                <button id="setPTZ" type="button" class="btn btn-default">设置ptz</button>


                <button id="setPreset" type="button" class="btn btn-default">设预置点</button>


                <button id="gotoPreset" type="button" class="btn btn-default">调预置点</button>


                <button id="getZeroPTZ" type="button" class="btn btn-default">调用零方位角</button>


                <button id="setZeroPTZ" type="button" class="btn btn-default">设置零方位角</button>


            </div>


        </div>


        <div class="row top-buffer">


            <div class="btn-group" role="group">


                <button id="FocusMode" type="button" class="btn btn-default">手动聚焦</button>


                <div id="focusDiv" class="input-group">


                    <span class="input-group-addon">聚焦值：</span>


                    <input id="focus" class="form-control" placeholder="聚焦值"/>


                </div>


                <button id="getFocusPos" type="button" class="btn btn-default">获取聚焦值</button>


                <button id="setFocusPos" type="button" class="btn btn-default">设置聚焦值</button>


            </div>


        </div>


        <div class="row top-buffer">


            <div class="btn-group" role="group">


                <button id="WiperPwron" type="button" class="btn btn-default">开启雨刷</button>


                <button id="Defogcfg" type="button" class="btn btn-default">开启透雾</button>


                <button id="Infrarecfg" type="button" class="btn btn-default">开启红外</button>


                <button id="HeateRpwron" type="button" class="btn btn-default">开启云台加热</button>


                <button id="CameraDeicing" type="button" class="btn btn-default">开启镜头加热</button>


            </div>


        </div>


        <div class="row top-buffer">


            <div class="btn-group" role="group">


                <button id="voice" type="button" class="btn btn-default">开始语音对讲</button>


                <button id="record" type="button" class="btn btn-default">开始录像</button>


                <button id="realCutPic" type="button" class="btn btn-default">实时抓图</button>


                <button id="saveCutPic" type="button" class="btn btn-default">存储抓图</button>


            </div>


        </div>


        <div class="row top-buffer">


            <div class="col-md-6">


                <img class="thumbnail" id="imgContainer" style="width: 500px; height: 400px;padding: 5px 5px;"/>


            </div>


            <div class="col-md-6">


                <video id="video" muted autoplay loop controls  style="width: 800px; height: 100%; object-fit: fill" />


                <button id="controlZoomIn" type="button" class="btn btn-primary">调焦-</button>


                <button id="controlZoomOut" type="button" class="btn btn-primary">调焦+</button>


            </div>


        </div>


    </div>


</body>


<script th:inline="javascript">


    var cameraId, opt, token;


    <div class="row ">


        <div class="col-md-1">


            <button id="left" type="button" class="btn btn-primary">左</button>


        </div>


        <div class="col-md-1 col-md-offset-1">


            <button id="right" type="button" class="btn btn-primary">右</button>


        </div>


        <div class="col-md-4 col-md-offset-2">


            <div class="btn-group" role="group">


                <button id="controlFocusNear" type="button" class="btn btn-primary">聚焦-</button>


                <button id="controlFocusFar" type="button" class="btn btn-primary">聚焦+</button>


            </div>


        </div>


    </div>


    <div class="row ">


        <div class="col-md-1 col-md-offset-1">


            <button id="down" type="button" class="btn btn-primary">下</button>


        </div>


        <div class="col-md-4 col-md-offset-3">


            <div class="btn-group" role="group">


                <button id="controlIrisOpen" type="button" class="btn btn-primary">光圈-</button>


                <button id="controlIrisClose" type="button" class="btn btn-primary">光圈+</button>


            </div>


        </div>


    </div>


    <div class="row">


        <div class="col-md-6">


            <div class="row top-buffer">


                <div class="input-group">


                    <span class="input-group-addon">目的坐标值：</span>


                    <input id="targetPostion" class="form-control" placeholder="目的坐标"/>


                    <button id="setTargetPostion" type="button" class="btn btn-default">指向坐标</button>


                </div>


                <div class="input-group">


                    <span class="input-group-addon">P值：</span>


                    <input id="p" class="form-control" placeholder="请输入P值"/>


                </div>


                <div class="input-group">


                    <span class="input-group-addon">T值：</span>


                    <input id="t" class="form-control" placeholder="请输入T值"/>


                </div>


                <div class="input-group">


                    <span class="input-group-addon">Z值：</span>


                    <input id="z" class="form-control" placeholder="请输入Z值"/>


                </div>


            </div>


            <div class="row top-buffer">


                <div class="btn-group" role="group">


                    <button id="getPTZ" type="button" class="btn btn-default">获取ptz</button>


                    <button id="setPTZ" type="button" class="btn btn-default">设置ptz</button>


                    <button id="setPreset" type="button" class="btn btn-default">设预置点</button>


                    <button id="gotoPreset" type="button" class="btn btn-default">调预置点</button>


                    <button id="getZeroPTZ" type="button" class="btn btn-default">调用零方位角</button>


                    <button id="setZeroPTZ" type="button" class="btn btn-default">设置零方位角</button>


                </div>


            </div>


            <div class="row top-buffer">


                <div class="btn-group" role="group">


                    <button id="FocusMode" type="button" class="btn btn-default">手动聚焦</button>


                    <div id="focusDiv" class="input-group">


                        <span class="input-group-addon">聚焦值：</span>


                        <input id="focus" class="form-control" placeholder="聚焦值"/>


                    </div>


                    <button id="getFocusPos" type="button" class="btn btn-default">获取聚焦值</button>


                    <button id="setFocusPos" type="button" class="btn btn-default">设置聚焦值</button>


                </div>


            </div>


            <div class="row top-buffer">


                <div class="btn-group" role="group">


                    <button id="WiperPwron" type="button" class="btn btn-default">开启雨刷</button>


                    <button id="Defogcfg" type="button" class="btn btn-default">开启透雾</button>


                    <button id="Infrarecfg" type="button" class="btn btn-default">开启红外</button>


                    <button id="HeateRpwron" type="button" class="btn btn-default">开启云台加热</button>


                    <button id="CameraDeicing" type="button" class="btn btn-default">开启镜头加热</button>


                </div>


            </div>


            <div class="row top-buffer">


                <div class="btn-group" role="group">


                    <button id="voice" type="button" class="btn btn-default">开始语音对讲</button>


                    <button id="record" type="button" class="btn btn-default">开始录像</button>


                    <button id="realCutPic" type="button" class="btn btn-default">实时抓图</button>


                    <button id="saveCutPic" type="button" class="btn btn-default">存储抓图</button>


                </div>


            </div>


            <div class="row top-buffer">


                <div class="col-md-6">


                    <img class="thumbnail" id="imgContainer" style="width: 500px; height: 300px;"/>


                </div>


            </div>


        </div>


        <div class="col-md-1"/>


        <div class="col-md-5">


            <div class="row top-buffer">


                <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/>


            </div>


        </div>


    </div>


</div>


<script th:inline="javascript" th:type="module">




    var cameraId, opt, optOpen, optClose, token;


    window.onload = function () {


        console.log(RTCRtpReceiver.getCapabilities('video').codecs)


        $.ajax({


            url: "../hik/list",


            type: "get",


@@ -134,7 +148,10 @@


                        ipaddr: arr[i].ip,


                        username: arr[i].username,


                        password: arr[i].password,


                        port: arr[i].rtspPort


                        port: arr[i].rtspPort,


                        longitude: arr[i].longitude,


                        latitude: arr[i].latitude,


                        altitude: arr[i].altitude


                    };


                    cameraMap.set(arr[i].id, camera);


                    //先创建好select里面的option元素


@@ -146,7 +163,6 @@


                }


            }


        })




        opt = {"username": "admin", "password": "admin123"};


        $.ajax({


            headers: {


@@ -293,7 +309,7 @@




    $("#setPreset").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "presetIndex": 1};


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -311,7 +327,7 @@


    })


    $("#gotoPreset").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "presetIndex": 1};


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "presetIndex": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -329,7 +345,7 @@


    })


    $("#getPTZ").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1};


        opt = {"cameraId": cameraId, "chanNo": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -355,7 +371,7 @@


        var z = $('#z').val();


        //定义一个带有Map字段的实体对象


        var myEntity = {


            channelNum: 1,


            chanNo: 1,


            cameraId: cameraId,


            ptzMap: {


                p: p,


@@ -379,9 +395,37 @@


            }


        })


    })


    $("#setTargetPostion").click(function () {


        cameraId = $('#select option:selected').val();


        var camera = cameraMap.get(cameraId);


        var camP = camera.longitude + ',' + camera.latitude + ',' + camera.altitude;


        var targetP = $('#targetPostion').val();


        //定义一个带有Map字段的实体对象


        var myEntity = {


            chanNo: 1,


            cameraId: cameraId,


            targetPosition: targetP,


            camPosition: camP,


        };


        console.log(myEntity)


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json',


                'Authorization': token


            },


            url: "../hik/setTargetPosition",


            type: "post",


            dataType: "json",


            data: JSON.stringify(myEntity),


            success: function (data) {


                console.log(data);


            }


        })


    })


    $("#setZeroPTZ").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1};


        opt = {"cameraId": cameraId, "chanNo": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -399,7 +443,7 @@


    })


    $("#WiperPwron").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "enable": true, "code": 16};


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": true, "code": 16};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -418,8 +462,8 @@


    var defogflag = true;


    $("#Defogcfg").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (defogflag) {


            $(this).text("关闭透雾");


            defogflag = false;


@@ -460,8 +504,8 @@


    var infrareflag = true;


    $("#Infrarecfg").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (infrareflag) {


            $(this).text("关闭红外");


            infrareflag = false;


@@ -502,8 +546,8 @@


    var focusModeflag = true;


    $("#FocusMode").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (focusModeflag) {


            $(this).text("自动聚焦");


            focusModeflag = false;


@@ -540,11 +584,30 @@


            })


        }


    })


    $("#getFocusPos").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "chanNo": 1};


        $.ajax({


                headers: {


                    'Accept': 'application/json',


                    'Content-Type': 'application/json',


                    'Authorization': token


                },


                url: "../hik/getFocusPos",


                type: "post",


                dataType: "json",


                data: JSON.stringify(opt),


                success: function (datas) {


                    console.log(datas);


                    $("#focus").val(datas.data.dwFocus);


                }


            })


    })


    var heateRpwronflag = true;


    $("#HeateRpwron").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (heateRpwronflag) {


            $(this).text("关闭云台加热");


            heateRpwronflag = false;


@@ -584,8 +647,8 @@


    var CameraDeicingflag = true;


    $("#CameraDeicing").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (CameraDeicingflag) {


            $(this).text("关闭镜头加热");


            CameraDeicingflag = false;


@@ -623,7 +686,7 @@


    })


    $("#realCutPic").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1};


        opt = {"cameraId": cameraId, "chanNo": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -636,13 +699,13 @@


            data: JSON.stringify(opt),


            success: function (data) {


                console.log(data.data);


                $("#imgContainer").attr("src","data:image/png;base64,"+data.data);


                $("#imgContainer").attr("src", "data:image/png;base64," + data.data);


            }


        })


    })


    $("#saveCutPic").click(function () {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1};


        opt = {"cameraId": cameraId, "chanNo": 1};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -662,8 +725,8 @@


    var recordflag = true;


    $("#record").click(function () {


        cameraId = $('#select option:selected').val();


        optOpen = {"cameraId": cameraId, "channelNum": 1, "enable": true};


        optClose = {"cameraId": cameraId, "channelNum": 1, "enable": false};


        optOpen = {"cameraId": cameraId, "chanNo": 1, "enable": true};


        optClose = {"cameraId": cameraId, "chanNo": 1, "enable": false};


        if (recordflag) {


            $(this).text("停止录像");


            recordflag = false;


@@ -706,7 +769,7 @@


    /*云台公共方法*/


    function commondMethod(url, code, enable) {


        cameraId = $('#select option:selected').val();


        opt = {"cameraId": cameraId, "channelNum": 1, "speed": 8, "enable": enable, "code": code};


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 8, "enable": enable, "code": code};


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -722,6 +785,7 @@


            }


        })


    }




    let webRtcServer = null;


    let videoMap = new Map();


    $('video').click(function (e) {


@@ -738,14 +802,15 @@


            } else if (camera.type == "dh") {


                realViewDh("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);


            } else {


                realViewHik("192.168.1.15", ID, camera.username, camera.password, camera.ipaddr,  camera.port);


                realViewHik("127.0.0.1", ID, camera.username, camera.password, camera.ipaddr, camera.port);


            }


        }


    });




    //预览海康相机


    function realViewHik(serverip, elem, username, password, ipaddr, port) {


        webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000");


       // webRtcServer = new WebRtcStreamer(elem, "http://" + serverip + ":8000");


        webRtcServer = new WebRtcStreamer(elem, "http://192.168.1.227:8000");


        let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/ch1/main/av_stream";


        let option = "rtptransport=tcp";


        console.log("rtsp地址：" + rtspUrl);


@@ -784,4 +849,5 @@


        webRtcServer.disconnect();


    }


</script>


</body>


</html>