‘liusuyi’
2023-05-24 0484a33f0550b344382f0d3caac5b26bbba23ca0
ard-work/target/classes/templates/test.html
@@ -9,14 +9,15 @@
    <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">
            相机id:<select id="select">
                </select>
            </div>
        </div>
@@ -56,7 +57,14 @@
                </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值"/>
@@ -110,14 +118,18 @@
        </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" />
                    <img class="thumbnail" id="imgContainer" style="width: 500px; height: 300px;"/>
            </div>
        </div>
    </div>
</body>
        <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">
    var cameraId, opt, token;
    window.onload = function () {
@@ -134,7 +146,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元素
@@ -371,6 +386,34 @@
                'Authorization': token
            },
            url: "../hik/setPTZ",
            type: "post",
            dataType: "json",
            data: JSON.stringify(myEntity),
            success: function (data) {
                console.log(data);
            }
        })
    })
    $("#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 = {
            channelNum: 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),
@@ -722,6 +765,7 @@
            }
        })
    }
    let webRtcServer = null;
    let videoMap = new Map();
    $('video').click(function (e) {
@@ -784,4 +828,5 @@
        webRtcServer.disconnect();
    }
</script>
</body>
</html>