分支自 ard/ruoyi-api
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
liusuyi
2024-10-10 38f29e38fcc668171dc05c53d40a36b895c86102 
 ard-work/src/main/resources/templates/test.html


@@ -4,164 +4,147 @@


    <meta charset="UTF-8">


    <title>测试页</title>


    <script th:src="@{/js/jquery-3.6.4.min.js}"></script>


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


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


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


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


    <style>


        .top-buffer {


            margin-top: 10px;


        }


        .container {


            border: 2px solid #1b6d85;


            padding: 15px;


        }


    </style>


<body>


<div class="container">


    <div class="row ">


        <div class="dropdown">


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


        </select>


        </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="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 ">


        <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;"/>


                设备：<select id="selectDev" style="width: 330px;">


            </select>


            </div>


            <div class="row top-buffer">


                通道：<select id="selectChn" style="width: 330px;">


            </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-6 col-md-offset-2">


                    <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 ">


                <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-6 col-md-offset-1">


                    <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-6 col-md-offset-2">


                    <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-10">


                    <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="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="saveCutPic" type="button" class="btn btn-default">存储抓图</button>


                        </div>


                    </div>


                </div>


            </div>


        </div>


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


            <div class="row">


                <div class="row top-buffer">


                    <button id="preview" type="button" class="btn btn-primary">预览</button>


                    <button id="previewStop" type="button" class="btn btn-primary">停止</button>


                </div>


                <div class="row top-buffer">


                    <video id="video" muted autoplay loop controls


                           style="width: 100%; height: 360px; object-fit: fill; border: 2px solid #3498db;"/>


                </div>


                <div class="row">


                    <img class="thumbnail" id="imgContainer"


                         style="width: 100%; height: 360px; border: 2px solid #3498db;"/>


                </div>


            </div>


        </div>


    </div>


</div>


<script th:inline="javascript">


    var cameraId, opt, token;


    var cameraId, chanNo,opt, optOpen, optClose, token;


    window.onload = function () {


        $.ajax({


            url: "../hik/list",


            type: "get",


            success: function (data) {


                console.log(data);


                var arr = data.data;


                for (var i = 0; i < arr.length; i++) {


                    console.log(arr[i].id);


                    var camera = {


                        type: arr[i].gdtype,


                        ipaddr: arr[i].ip,


                        username: arr[i].username,


                        password: arr[i].password,


                        port: arr[i].rtspPort,


                        longitude: arr[i].longitude,


                        latitude: arr[i].latitude,


                        altitude: arr[i].altitude


                    };


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


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


                    var option = document.createElement("option");


                    //给option的text赋值,这就是你点开下拉框能够看到的东西


                    $(option).text(arr[i].id);


                    //获取select 下拉框对象,并将option添加进select


                    $('#select').append(option);


                }


            }


        })




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


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


        $.ajax({


            headers: {


@@ -173,149 +156,255 @@


            dataType: "json",


            data: JSON.stringify(opt),


            success: function (data) {


                console.log(data);


                token = data.token;


                getDeviceList();// 获取设备列表


            }


        })


        // 初始化内容


        console.log(cameraMap);


    }


    //云台上下左右


    $("#up").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 2;


        var enable = true;


        commondMethod(url, code, enable);




    })


    $("#up").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 2;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#down").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 8;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#down").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 8;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#left").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 4;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#left").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 4;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#right").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 6;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#right").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 6;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //变倍


    $("#controlZoomIn").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 10;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlZoomIn").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 10;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlZoomOut").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 11;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlZoomOut").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 11;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //变焦


    $("#controlFocusNear").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 12;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlFocusNear").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 12;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlFocusFar").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 13;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlFocusFar").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 13;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //光圈


    $("#controlIrisOpen").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 14;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlIrisOpen").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 14;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlIrisClose").mousedown(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 15;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlIrisClose").mouseup(function () {


        var url = "../hik/PTZControlWithSpeed";


        var code = 15;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //获取设备


    function getDeviceList() {


        $.ajax({


            url: "../cameraSdk/list",


            type: "get",


            success: function (data) {


                console.log(data);


                var arr = data.data;


                for (var i = 0; i < arr.length; i++) {


                    console.log(arr[i].id);


                    console.log(arr[i].name)


                    var camera = {


                        name: arr[i].name,


                        factory: arr[i].factory,


                        ipaddr: arr[i].ip,


                        username: arr[i].username,


                        password: arr[i].password,


                        port: arr[i].rtspPort,


                        longitude: arr[i].longitude,


                        latitude: arr[i].latitude,


                        altitude: arr[i].altitude


                    };


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


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


                    var option = $("<option>");


                    //给option的text赋值,这就是你点开下拉框能够看到的东西


                    $(option).val(arr[i].id);


                    $(option).text(arr[i].name);


                    //获取select 下拉框对象,并将option添加进select


                    $('#selectDev').append(option);


                }


                $("#selectDev").trigger("change");


            }


        })


    }




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


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


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


    //选择设备


    $("#selectDev").change(function () {


        // 在这里处理选择事件


        var cameraId = $(this).find("option:selected").val();


        var name = $(this).find("option:selected").text();


        getChannelList(cameraId);


        console.log("选择了：" + cameraId + "---" + name);


    });




    //获取通道


    function getChannelList(cameraId) {


        console.log(cameraId)


        var myEntity = {


            deviceId: cameraId,


            pageNum: 1,


            pageSize: 64


        }


        var queryString = $.param(myEntity);


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/setPreset",


            url: "../device/channel/list?" + queryString,


            type: "get",


            success: function (data) {


                console.log(data);


                var arr = data.rows;


                $('#selectChn').empty();


                for (var i = 0; i < arr.length; i++) {


                    console.log(arr[i].chanNo);


                    console.log(arr[i].name);


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


                    var option = document.createElement("option");


                    //给option的text赋值,这就是你点开下拉框能够看到的东西


                    $(option).text(arr[i].name);


                    $(option).val(arr[i].chanNo);


                    //获取select 下拉框对象,并将option添加进select


                    $('#selectChn').append(option);


                }


            }


        })


    }




    //预览


    $('#preview').click(() => {


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


        var chanNo = $('#selectChn option:selected').val();


        console.log(cameraId + " " + chanNo)


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../vtdu/media/" + cameraId + "_" + chanNo,


            type: "get",


            dataType: "json",


            success: function (data) {


                realView(data.data.webrtcUrl + "/", "video");


            }


        })


    });


    //停止


    $('#previewStop').click(() => {


        webrtcClient.stop();


    });


    //云台上下左右


    $("#up").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 2;


        var enable = true;


        commondMethod(url, code, enable);




    })


    $("#up").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 2;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#down").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 8;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#down").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 8;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#left").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 4;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#left").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 4;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#right").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 6;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#right").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 6;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //变倍


    $("#controlZoomIn").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 10;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlZoomIn").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 10;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlZoomOut").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 11;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlZoomOut").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 11;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //变焦


    $("#controlFocusNear").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 12;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlFocusNear").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 12;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlFocusFar").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 13;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlFocusFar").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 13;


        var enable = false;


        commondMethod(url, code, enable);


    })


    //光圈


    $("#controlIrisOpen").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 14;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlIrisOpen").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 14;


        var enable = false;


        commondMethod(url, code, enable);


    })


    $("#controlIrisClose").mousedown(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 15;


        var enable = true;


        commondMethod(url, code, enable);


    })


    $("#controlIrisClose").mouseup(function () {


        var url = "../cameraSdk/PTZControlWithSpeed";


        var code = 15;


        var enable = false;


        commondMethod(url, code, enable);


    })




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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../cameraSdk/setPreset",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -325,15 +414,16 @@


        })


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/gotoPreset",


            url: "../cameraSdk/gotoPreset",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -343,15 +433,16 @@


        })


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/getPTZ",


            url: "../cameraSdk/getPTZ",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -364,13 +455,14 @@


        })


    })


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


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


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


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


        var myEntity = {


            channelNum: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            ptzMap: {


                p: p,


@@ -385,7 +477,7 @@


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


                'Authorization': token


            },


            url: "../hik/setPTZ",


            url: "../cameraSdk/setPTZ",


            type: "post",


            dataType: "json",


            data: JSON.stringify(myEntity),


@@ -395,16 +487,18 @@


        })


    })


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


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


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


        chanNo = $('#selectChn option:selected').val();


        var camera = cameraMap.get(cameraId);


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


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


        var arr = targetP.split(",");


        arr = arr.map(item => parseFloat(item));


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


        var myEntity = {


            channelNum: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            targetPosition: targetP,


            camPosition: camP,


            targetPosition: arr


        };


        console.log(myEntity)


        $.ajax({


@@ -413,7 +507,7 @@


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


                'Authorization': token


            },


            url: "../hik/setTargetPosition",


            url: "../cameraSdk/setTargetPosition",


            type: "post",


            dataType: "json",


            data: JSON.stringify(myEntity),


@@ -423,15 +517,16 @@


        })


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/setZeroPTZ",


            url: "../cameraSdk/setZeroPTZ",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -441,15 +536,16 @@


        })


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/PTZControlWithSpeed",


            url: "../cameraSdk/PTZControlWithSpeed",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -460,9 +556,10 @@


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (defogflag) {


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


            defogflag = false;


@@ -472,7 +569,7 @@


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


                    'Authorization': token


                },


                url: "../hik/defogcfg",


                url: "../cameraSdk/defogcfg",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -489,7 +586,7 @@


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


                    'Authorization': token


                },


                url: "../hik/defogcfg",


                url: "../cameraSdk/defogcfg",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optClose),


@@ -502,9 +599,10 @@


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (infrareflag) {


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


            infrareflag = false;


@@ -514,7 +612,7 @@


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


                    'Authorization': token


                },


                url: "../hik/infrarecfg",


                url: "../cameraSdk/infrarecfg",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -532,7 +630,7 @@


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


                    'Authorization': token


                },


                url: "../hik/infrarecfg",


                url: "../cameraSdk/infrarecfg",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optClose),


@@ -544,9 +642,10 @@


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (focusModeflag) {


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


            focusModeflag = false;


@@ -556,7 +655,7 @@


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


                    'Authorization': token


                },


                url: "../hik/focusMode",


                url: "../cameraSdk/focusMode",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -573,7 +672,7 @@


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


                    'Authorization': token


                },


                url: "../hik/focusMode",


                url: "../cameraSdk/focusMode",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optClose),


@@ -583,11 +682,32 @@


            })


        }


    })


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../cameraSdk/getFocusPos",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


            success: function (datas) {


                console.log(datas);


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


            }


        })


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (heateRpwronflag) {


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


            heateRpwronflag = false;


@@ -597,7 +717,7 @@


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


                    'Authorization': token


                },


                url: "../hik/heateRpwron",


                url: "../cameraSdk/heateRpwron",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -614,7 +734,7 @@


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


                    'Authorization': token


                },


                url: "../hik/heateRpwron",


                url: "../cameraSdk/heateRpwron",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optClose),


@@ -626,18 +746,20 @@


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (CameraDeicingflag) {


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


            CameraDeicingflag = false;


            $.ajax({


                headers: {


                    'Accept': 'application/json',


                    'Content-Type': 'application/json'


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


                    'Authorization': token


                },


                url: "../hik/cameraDeicing",


                url: "../cameraSdk/cameraDeicing",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -654,7 +776,7 @@


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


                    'Authorization': token


                },


                url: "../hik/cameraDeicing",


                url: "../cameraSdk/cameraDeicing",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optClose),


@@ -665,15 +787,16 @@


        }


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/captureJPEGPicture",


            url: "../cameraSdk/captureJPEGPicture",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


@@ -684,29 +807,34 @@


        })


    })


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


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../hik/picCutCate",


            url: "../cameraSdk/picCutCate",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


            success: function (data) {


                console.log(data.data);


                $('#imgContainer').attr('src', data.data);


                setTimeout(() => {


                    $('#imgContainer').attr('src', data.data);


                }, 1000)




            }


        })


    })


    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};


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


        chanNo = $('#selectChn option:selected').val();


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


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


        if (recordflag) {


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


            recordflag = false;


@@ -716,7 +844,7 @@


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


                    'Authorization': token


                },


                url: "../hik/record",


                url: "../cameraSdk/record",


                type: "post",


                dataType: "json",


                data: JSON.stringify(optOpen),


@@ -733,7 +861,7 @@


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


                    'Authorization': token


                },


                url: "../hik/record",


                url: "../cameraSdk/record",


                dataType: "json",


                data: JSON.stringify(optClose),


                type: "post",


@@ -748,8 +876,9 @@




    /*云台公共方法*/


    function commondMethod(url, code, enable) {


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


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


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


        chanNo = $('#selectChn option:selected').val();


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -766,67 +895,270 @@


        })


    }




    let webRtcServer = null;


    let videoMap = new Map();


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


        let ID = e.target.id;//获取当前点击事件的元素


        console.log(ID);


        if (videoMap.get(ID) != null) {


            closeVideo(ID, videoMap.get(ID));


        } else {


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


            let camera = cameraMap.get(cameraId);


            console.log(camera);


            if (camera.type == "ys") {


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


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


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


            } else {


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


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


        var chanNo = $('#selectChn option:selected').val();


        console.log(cameraId + " " + chanNo)


        $.ajax({


            headers: {


                'Accept': 'application/json',


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


                'Authorization': token


            },


            url: "../vtdu/media/" + cameraId + "_" + chanNo,


            type: "get",


            dataType: "json",


            success: function (data) {


                realView(data.data.webrtcUrl + "/", e.target.id);


            }


        }


        })


    });




    //预览海康相机


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


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


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


        let option = "rtptransport=tcp";


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


        webRtcServer.connect(rtspUrl, null, option, null);


        videoMap.set(elem, webRtcServer);


    let webrtcClient;


    //whep操作方法


    const restartPause = 2000;


    const unquoteCredential = (v) => (


        JSON.parse(`"${v}"`)


    );


    const linkToIceServers = (links) => (


        (links !== null) ? links.split(', ').map((link) => {


            const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);


            const ret = {


                urls: [m[1]],


            };




            if (m[3] !== undefined) {


                ret.username = unquoteCredential(m[3]);


                ret.credential = unquoteCredential(m[4]);


                ret.credentialType = "password";


            }




            return ret;


        }) : []


    );


    const parseOffer = (offer) => {


        const ret = {


            iceUfrag: '',


            icePwd: '',


            medias: [],


        };




        for (const line of offer.split('\r\n')) {


            if (line.startsWith('m=')) {


                ret.medias.push(line.slice('m='.length));


            } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {


                ret.iceUfrag = line.slice('a=ice-ufrag:'.length);


            } else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {


                ret.icePwd = line.slice('a=ice-pwd:'.length);


            }


        }




        return ret;


    };


    const generateSdpFragment = (offerData, candidates) => {


        const candidatesByMedia = {};


        for (const candidate of candidates) {


            const mid = candidate.sdpMLineIndex;


            if (candidatesByMedia[mid] === undefined) {


                candidatesByMedia[mid] = [];


            }


            candidatesByMedia[mid].push(candidate);


        }




        let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'


            + 'a=ice-pwd:' + offerData.icePwd + '\r\n';




        let mid = 0;




        for (const media of offerData.medias) {


            if (candidatesByMedia[mid] !== undefined) {


                frag += 'm=' + media + '\r\n'


                    + 'a=mid:' + mid + '\r\n';




                for (const candidate of candidatesByMedia[mid]) {


                    frag += 'a=' + candidate.candidate + '\r\n';


                }


            }


            mid++;


        }




        return frag;


    }




    //预览大华相机


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


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


        let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/cam/realmonitor?channel=1&subtype=0";


        let option = "rtptransport=tcp";


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


    class WHEPClient {


        constructor(whepUrl, videoId) {


            this.video = videoId;


            this.wurl = new URL('whep', whepUrl);


            this.pc = null;


            this.restartTimeout = null;


            this.eTag = '';


            this.queuedCandidates = [];


            this.start();


        }




        webRtcServer.connect(rtspUrl, null, option, null);


        videoMap.set(elem, webRtcServer);


        start() {


            console.log("requesting ICE servers");


            fetch(this.wurl, {


                method: 'OPTIONS',


            })


                .then((res) => this.onIceServers(res))


                .catch((err) => {


                    console.log('error: ' + err);


                    this.scheduleRestart();


                });


        }




        onIceServers(res) {


            this.pc = new RTCPeerConnection({


                iceServers: linkToIceServers(res.headers.get('Link')),


            });




            const direction = "sendrecv";


            this.pc.addTransceiver("video", {direction});


            this.pc.addTransceiver("audio", {direction});




            this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);


            this.pc.oniceconnectionstatechange = () => this.onConnectionState();




            this.pc.ontrack = (evt) => {


                console.log("new track:", evt.track.kind);


                document.getElementById(this.video).srcObject = evt.streams[0];


            };




            this.pc.createOffer()


                .then((offer) => this.onLocalOffer(offer));


        }




        onLocalOffer(offer) {


            this.offerData = parseOffer(offer.sdp);


            this.pc.setLocalDescription(offer);




            console.log("sending offer");


            console.log(this.wurl);


            fetch(this.wurl, {


                method: 'POST',


                headers: {


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


                },


                body: offer.sdp,


            })


                .then((res) => {


                    if (res.status !== 201) {


                        throw new Error('bad status code');


                    }


                    // this.eTag = res.headers.get('ETag');


                    this.eTag = res.headers.get("ETag") || res.headers.get('E-Tag');


                    this.wurl = new URL(res.headers.get('location'),  this.wurl.origin).toString();


                    return res.text();


                }


                )


                .then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({


                    type: 'answer',


                    sdp,


                })))


                .catch((err) => {


                    console.log('error: ' + err);


                    this.scheduleRestart();


                });


        }




        onConnectionState() {


            if (this.restartTimeout !== null) {


                return;


            }




            console.log("peer connection state:", this.pc.iceConnectionState);




            switch (this.pc.iceConnectionState) {


                case "disconnected":


                    this.scheduleRestart();


            }


        }




        onRemoteAnswer(answer) {


            if (this.restartTimeout !== null) {


                return;


            }




            this.pc.setRemoteDescription(new RTCSessionDescription(answer));




            if (this.queuedCandidates.length !== 0) {


                this.sendLocalCandidates(this.queuedCandidates);


                this.queuedCandidates = [];


            }


        }




        onLocalCandidate(evt) {


            if (this.restartTimeout !== null) {


                return;


            }




            if (evt.candidate !== null) {


                if (this.eTag === '') {


                    console.log("222222222222222222222")


                    this.queuedCandidates.push(evt.candidate);


                } else {


                    console.log("333333333333333333333")


                    this.sendLocalCandidates([evt.candidate])


                }


            }


        }




        sendLocalCandidates(candidates) {


            fetch(this.wurl, {


                method: 'PATCH',


                headers: {


                    'Content-Type': 'application/trickle-ice-sdpfrag',


                    'If-Match': this.eTag,


                },




                body: generateSdpFragment(this.offerData, candidates),


            })


                .then((res) => {


                    if (res.status !== 204) {


                        throw new Error('bad status code');


                    }


                })


                .catch((err) => {


                    console.log('error: ' + err);


                    this.scheduleRestart();


                });


        }




        scheduleRestart() {


            if (this.restartTimeout !== null) {


                return;


            }




            if (this.pc !== null) {


                this.pc.close();


                this.pc = null;


            }




            this.restartTimeout = window.setTimeout(() => {


                this.restartTimeout = null;


                this.start();


            }, restartPause);




            this.eTag = '';


            this.queuedCandidates = [];


        }




        stop() {


            if (this.pc) {


                try {


                    this.pc.close();


                } catch (e) {


                    console.log("Failure close peer connection:" + e);


                }


                this.pc = null;


            }


        }


    }




    //预览宇视相机


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


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


        let rtspUrl = "rtsp://" + username + ":" + password + "@" + ipaddr + ":" + port + "/media/video1/multicast";


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


        let option = "rtptransport=tcp";


        webRtcServer.connect(rtspUrl, null, option, null);


        videoMap.set(elem, webRtcServer);


    }




    function closeVideo(id, webrtc) {


        webrtc.disconnect();


        videoMap.delete(id);


    }




    //页面退出时销毁


    window.onbeforeunload = function () {


        webRtcServer.disconnect();


    function realView(whepUrl, videoId) {


        webrtcClient = new WHEPClient(whepUrl, videoId);


    }


</script>


</body>


</html>


</html>