SIPAIIS_WMS_JSSW/WebRoot/jsp/work/showCameraVideo4identifyAreas.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<style type="text/css">
    .select2-container .select2-selection--single {
        height: 34px;
        line-height: 34px;
    }

    .select2-selection__arrow {
        margin-top: 3px;
    }
</style>
<div class="modal fade" id="identifyAreasModal">
    <div>
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择识别区域</h4>
            </div>
            <div class="modal-body" style="width: 1660px;height: 740px;overflow: auto;">
                <div id="show_video"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="penPointList();">确定</button>
                <button type="button" class="btn btn-default" onclick="penReDo();">重置</button>
                <button type="button" class="btn btn-default" onclick="closeModal('identifyAreasModal');">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/penCutout/penCutout.js"
        charset="utf-8"></script>
<script type="text/javascript">
    var websocket = null;
    var restartDialog;
    var _penCutout = new penCutout();
    var num = 0;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        var time = '${time}';
        if (time == null || time == '') {
            time = "now";
        }
        $.post(ext.contextPath + '/work/camera/getCameraById.do', {id: '${id}'}, function (data) {
            var camera = JSON.parse(data);
            $.ajax({
                type: 'GET',
                url: ext.contextPath + "/work/camera/isNet.do?nowUrl=" + window.location.host,
                async: false,
                globle: false,
                dataType: 'json',
                error: function () {
                    return false;
                },
                success: function (data) {
                    let hostUrl = window.location.href;
                    if (hostUrl.substring(0, 5) == 'https') {
                        data.url = data.url.replace('ws', 'wss');
                    }
                    websocket = new WebSocket("" + data.url + "/VideoImageWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/${uuid}/standard");
                    <%--websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/${uuid}/standard");--%>
                }
            });
            websocket.onerror = function () {
            };

            //连接成功建立的回调方法
            websocket.onopen = function () {
                console.info('识别区域websocker开启');
            }
            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                num++;
                if (num == 2) {
                    event = eval(event);
                    closeWebSocket();
                    var data = $.parseJSON(event.data);
                    // var result= JSON.parse(event.data);

                    console.log("data is ", data);
                    let defaultPoints = new Array();
                    let defaultPoint = $('#identifyAreas').val();
                    if (defaultPoint != null && defaultPoint != '') {
                        let points = defaultPoint.split(";")
                        $.each(points, function (key, val) {
                            //回调函数有两个参数,第一个是元素索引,第二个为当前值
                            let point = val.split(",");
                            let p = new Object();
                            p.pointx = point[0];
                            p.pointy = point[1];
                            defaultPoints.push(p);
                        });
                    }
                    _penCutout.init({
                        drawPanel: "show_video",
                        //抠图图片src
                        imgSrc: data.image,
                        //抠图完成填充背景图片（默认）
                        imgBackSrc: data.image,
                        //钢笔色
                        penColor: "#0087C4",
                        penBgColor: 'rgba(0,102,255,0.30)',
                        //初始话钢笔抠图坐标集合
                        defaultPointList: defaultPoints,
                        width: data.width,
                        height: data.height
                    });
                }
            }
            websocket.onclose = function () {
                closeWebSocket();
            }
        })
    } else {
        alert('当前浏览器 Not support websocket')
    }


    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.onclose = function () {
        }; // disable onclose handler first
        websocket.close();
        $.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
            id: '${id}',
            time: time,
            uuid: '${uuid}'
        }, function () {
        })
    }

    function penPointList() {
        let points = _penCutout.can.pointList;
        let identifyAreas = "";
        $.each(points, function (key, val) {
            //回调函数有两个参数,第一个是元素索引,第二个为当前值
            identifyAreas = identifyAreas + val.pointx + "," + val.pointy + ";";
        });
        $('#identifyAreas').val(identifyAreas);
        closeModal('identifyAreasModal');
    }

    function penReDo() {
        _penCutout.ReDo();
    }
</script>