SIPAIIS_WMS_JSSW/WebRoot/jsp/work/showCameraVideo.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>
<script type="text/javascript">
    var websocket = null;
    var restartDialog;
    //判断当前浏览器是否支持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);
            <%--console.log("${ws}/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/${uuid}/standard");--%>
            $.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 + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/${uuid}/standard");
                }
            });

            <%--websocket = new WebSocket("${ws}/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) {
                // var result= JSON.parse(event.data);
                $("#show_video").attr("src", event.data);
            }
            websocket.onclose = function () {
                closeWebSocket();
            }
        })
        //websocket = new WebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/${id}/"+time+"/${uuid}");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    // websocket.onerror = function () {
    // };

    //连接成功建立的回调方法
    // websocket.onopen = function () {
    //   console.info('消息滚动websocker开启');
    // }

    //接收到消息的回调方法
    // websocket.onmessage = function (event) {
    //   var result= JSON.parse(event.data);
    //   $("#show_video").attr("src", "data:image/*;base64," + result.data);
    // }

    //连接关闭的回调方法
    // websocket.onclose = function () {
    //   closeWebSocket();
    // }


    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.onclose = function () {
        }; // disable onclose handler first
        websocket.close();
    }

    /*function max(id){
      $('#'+id).width($('#'+id).width()*1.5);
      $('#'+id).height($('#'+id).height()*1.5);
    }*/
    function doClose() {
        $.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
            id: '${id}',
            time: time,
            uuid: '${uuid}'
        }, function () {
        })
        closeWebSocket()
        closeModal('subCameraModal');
        //location.reload();
    }

    function domin() {
        $('#modal-content').width(600);
        $('#modal-content').height(450);
        $('#show_video').width(540);
        $('#show_video').height(300);
    }

    function domid() {
        $('#modal-content').width(720);
        $('#modal-content').height(540);
        $('#show_video').width(660);
        $('#show_video').height(390);
    }

    function domax() {
        $('#modal-content').width(860);
        $('#modal-content').height(675);
        $('#show_video').width(820);
        $('#show_video').height(520);
    }

    $(function () {
        let windowWidth = $(window).width();
        let windowHeight = $(window).height();
        $('#main').css("width", (windowWidth - 60) + "px");
        $('#main').css("height", (windowHeight - 60) + "px");
        $('#show_video').css("width", (windowWidth - 60 - 30) + "px");
        $('#show_video').css("height", (windowHeight - 60 - 65 - 57 - 30) + "px");
    })

</script>
<div class="modal fade" id="subCameraModal">
    <div>
        <div id="main" class="modal-content" id="modal-content" style="left: 30px;top: 30px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="doClose()">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">视频展示</h4>
            </div>
            <div class="modal-body">
                <!-- <p style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷体">视频显示</p> -->
                <img id="show_video" style="border:1px solid black;" src=""
                     alt="正在加载。。。">
            </div>
            <div class="modal-footer">
                <%--                <button type="button" class="btn btn-default" onclick="domin()">小</button>--%>
                <%--                <button type="button" class="btn btn-default" onclick="domid()">中</button>--%>
                <%--                <button type="button" class="btn btn-default" onclick="domax()">大</button>--%>
                <button type="button" class="btn btn-default" onclick="doClose()">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>