分支自 ard/ruoyi-api
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
zhangnaisong
2024-08-07 a59200e76cfd8795c35e021780c556c1b3fc9e7e 
 ard-work/src/main/resources/templates/test.html


@@ -10,22 +10,23 @@


        .top-buffer {


            margin-top: 10px;


        }




        .container {


            border: 2px solid #1b6d85;


            padding: 20px;


            padding: 15px;


        }


    </style>


<body>


<div class="container">


    <div class="row ">


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


            相机id：<select id="select" style="width: 330px;">


        </select>


        </div>


    </div>


    <div class="row">


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


            <div class="row top-buffer">


                设备：<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>


@@ -125,6 +126,10 @@


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


@@ -137,10 +142,30 @@


    </div>


</div>


<script th:inline="javascript">




    var cameraId, opt, optOpen, optClose, token;


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


    window.onload = function () {


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


                'Content-Type': 'application/json'


            },


            url: "../login",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


            success: function (data) {


                token = data.token;


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


            }


        })


        // 初始化内容


        console.log(cameraMap);


    }




    //获取设备


    function getDeviceList() {


        $.ajax({


            url: "../cameraSdk/list",


            type: "get",


@@ -149,6 +174,7 @@


                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,


@@ -162,31 +188,86 @@


                    };


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


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


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


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


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


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


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


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


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


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


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


                }


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


            }


        })


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


    }




    //选择设备


    $("#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'


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


                'Authorization': token


            },


            url: "../login",


            type: "post",


            dataType: "json",


            data: JSON.stringify(opt),


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


            type: "get",


            success: function (data) {


                token = data.token;


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


                }


            }


        })


        // 初始化内容


        console.log(cameraMap);


    }




    //预览


    $('#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";


@@ -314,8 +395,9 @@


    })




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


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


        opt = {"cameraId": cameraId, "chanNo": 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',


@@ -332,8 +414,9 @@


        })


    })


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


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


        opt = {"cameraId": cameraId, "chanNo": 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',


@@ -350,8 +433,9 @@


        })


    })


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


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


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


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


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -371,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 = {


            chanNo: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            ptzMap: {


                p: p,


@@ -402,7 +487,8 @@


        })


    })


    $("#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();


@@ -410,7 +496,7 @@


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


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


        var myEntity = {


            chanNo: 1,


            chanNo: chanNo,


            cameraId: cameraId,


            targetPosition: arr


        };


@@ -431,8 +517,9 @@


        })


    })


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


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


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


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


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -449,8 +536,9 @@


        })


    })


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


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


        opt = {"cameraId": cameraId, "chanNo": 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',


@@ -468,9 +556,10 @@


    })


    var defogflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -510,9 +599,10 @@


    })


    var infrareflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -552,9 +642,10 @@


    })


    var focusModeflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -592,8 +683,9 @@


        }


    })


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


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


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


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


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -612,9 +704,10 @@


    })


    var heateRpwronflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -653,9 +746,10 @@


    })


    var CameraDeicingflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -693,8 +787,9 @@


        }


    })


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


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


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


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


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -712,8 +807,9 @@


        })


    })


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


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


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


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


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


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


        $.ajax({


            headers: {


                'Accept': 'application/json',


@@ -735,9 +831,10 @@


    })


    var recordflag = true;


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


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


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


        optClose = {"cameraId": cameraId, "chanNo": 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;


@@ -779,8 +876,9 @@




    /*云台公共方法*/


    function commondMethod(url, code, enable) {


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


        opt = {"cameraId": cameraId, "chanNo": 1, "speed": 4, "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',


@@ -798,14 +896,16 @@


    }




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


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


        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 + "_" + 1,


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


            type: "get",


            dataType: "json",


            success: function (data) {


@@ -948,8 +1048,10 @@


                    }


                    // 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,


@@ -993,8 +1095,10 @@




            if (evt.candidate !== null) {


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


                    console.log("222222222222222222222")


                    this.queuedCandidates.push(evt.candidate);


                } else {


                    console.log("333333333333333333333")


                    this.sendLocalCandidates([evt.candidate])


                }


            }


@@ -1053,7 +1157,6 @@


    }




    function realView(whepUrl, videoId) {


        console.log(whepUrl)


        webrtcClient = new WHEPClient(whepUrl, videoId);


    }


</script>