‘liusuyi’
2023-09-14 8db95778fffe41dc9f562a02d1e42dbe2582a18a
ard-work/src/main/resources/templates/test.html
@@ -13,20 +13,6 @@
            margin-top: 10px;
        }
    </style>
    <!-- 导入 ECMAScript 模块 -->
    <script th:type="module" th:src="@{/js/WHEPClient.js}"></script>
    <!-- 内联脚本块,可以使用模块中的内容 -->
    <script th:inline="javascript">
        /*<![CDATA[*/
        // 在这里使用 WHEPClient 模块中的内容
        $("#play").click(function webrtcClient(){
            const  url = "http://127.0.0.1:8889/165"; // add the webRTC URL from your live input here
            console.log(url)
            const  videoElement = document.getElementById("remote-video");
            const  client = new WHEPClient(url, videoElement);
        })
        /*]]>*/
    </script>
<body>
<div class="container">
    <div class="row ">
@@ -141,15 +127,12 @@
            <div class="row top-buffer">
                <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/>
            </div>
            <div class="row top-buffer">
                <button id="play" type="button" class="btn btn-default" >播放</button>
            <video id="remote-video" controls autoplay muted></video>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var cameraId, opt,optOpen,optClose, token;
<script th:inline="javascript" th:type="module">
    var cameraId, opt, optOpen, optClose, token;
    window.onload = function () {
        $.ajax({
            url: "../hik/list",
@@ -179,7 +162,6 @@
                }
            }
        })
        opt = {"username": "admin", "password": "admin123"};
        $.ajax({
            headers: {
@@ -326,7 +308,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',
@@ -344,7 +326,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',
@@ -362,7 +344,7 @@
    })
    $("#getPTZ").click(function () {
        cameraId = $('#select option:selected').val();
        opt = {"cameraId": cameraId, "channelNum": 1};
        opt = {"cameraId": cameraId, "chanNo": 1};
        $.ajax({
            headers: {
                'Accept': 'application/json',
@@ -388,7 +370,7 @@
        var z = $('#z').val();
        //定义一个带有Map字段的实体对象
        var myEntity = {
            channelNum: 1,
            chanNo: 1,
            cameraId: cameraId,
            ptzMap: {
                p: p,
@@ -419,7 +401,7 @@
        var targetP = $('#targetPostion').val();
        //定义一个带有Map字段的实体对象
        var myEntity = {
            channelNum: 1,
            chanNo: 1,
            cameraId: cameraId,
            targetPosition: targetP,
            camPosition: camP,
@@ -442,7 +424,7 @@
    })
    $("#setZeroPTZ").click(function () {
        cameraId = $('#select option:selected').val();
        opt = {"cameraId": cameraId, "channelNum": 1};
        opt = {"cameraId": cameraId, "chanNo": 1};
        $.ajax({
            headers: {
                'Accept': 'application/json',
@@ -460,7 +442,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',
@@ -479,8 +461,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;
@@ -521,8 +503,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;
@@ -563,8 +545,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;
@@ -601,11 +583,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;
@@ -645,8 +646,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;
@@ -684,7 +685,7 @@
    })
    $("#realCutPic").click(function () {
        cameraId = $('#select option:selected').val();
        opt = {"cameraId": cameraId, "channelNum": 1};
        opt = {"cameraId": cameraId, "chanNo": 1};
        $.ajax({
            headers: {
                'Accept': 'application/json',
@@ -703,7 +704,7 @@
    })
    $("#saveCutPic").click(function () {
        cameraId = $('#select option:selected').val();
        opt = {"cameraId": cameraId, "channelNum": 1};
        opt = {"cameraId": cameraId, "chanNo": 1};
        $.ajax({
            headers: {
                'Accept': 'application/json',
@@ -723,8 +724,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;
@@ -767,7 +768,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',
@@ -807,7 +808,8 @@
    //预览海康相机
    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);
@@ -846,6 +848,5 @@
        webRtcServer.disconnect();
    }
</script>
</body>
</html>