main.js

var player;

var loadedDom = false;

let asyLock = false;

let wsUrl = 'ws://172.100.100.21:32101';

let dom_temp = '<div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="cameraModalLabel"\n' +
    '     aria-hidden="true">\n' +
    '    <div class="modal-dialog" role="document">\n' +
    '        <div class="modal-content">\n' +
    '            <div class="title"></div>\n' +
    '<div class="tools" style="display: none">\n' +
    '        <div class="timeSelect">\n' +
    '            <div class="time-box">\n' +
    '                开始时间: <input type="text" id="startTime" placeholder="请选择开始时间"/>\n' +
    '            </div>\n' +
    '            <div class="time-box">\n' +
    '                结束时间: <input type="text" id="endTime" placeholder="请选择结束时间"/>\n' +
    '            </div>\n' +
    '            <button type="button" class="btn btn-primary" id="ishf">确定</button>\n' +
    '<button type="button" class="btn btn-primary" style="display: none" id="isLive">实时播放</button>' +
    '        </div>\n' +
    '    </div>' +
    '            <div class="modal-body">\n' +
    '                <div style="width:15%;">\n' +
    '                    <ul id="videos"></ul>\n' +
    '                </div>\n' +
    '                <div style="flex: 1;" id="cameraVideo">\n' +
    '                    <div id="video" style="height: 550px"></div>\n' +
    '                </div>\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>';

var VideoPlayer = {
    loadIndex: '',
    gbid: '',
    initDom: function () {
        if (!loadedDom) {
            // 加载必须的文件
            let script = document.createElement('script');
            script.src = ctx + '/static/js/bootstrap.min.js';
            $(document).find("body").append(script);

            let css1 = document.createElement('link');
            css1.rel = 'stylesheet';
            css1.href = ctx + '/static/css/bootstrap.min.css'
            $(document).find("body").append(css1);

            let css2 = document.createElement('link');
            css2.rel = 'stylesheet';
            css2.href = ctx + '/static/css/modal.css'
            $(document).find("body").append(css2);

            let datetimecss = document.createElement('link');
            datetimecss.rel = 'stylesheet';
            datetimecss.href = ctx + '/static/libs/datetimepicker/css/bootstrap-datetimepicker.min.css'
            $(document).find("body").append(datetimecss);

            let datetimejs = document.createElement('script');
            datetimejs.src = ctx + '/static/libs/datetimepicker/js/bootstrap-datetimepicker.min.js';
            $(document).find("body").append(datetimejs);

            let datetimecnjs = document.createElement('script');
            datetimecnjs.src = ctx + '/static/libs/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js';
            $(document).find("body").append(datetimecnjs);

            $(document).find('body').append(dom_temp);
            loadedDom = true;
        }
    },
    eventRegister: function () {
        $("#startTime").datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: true,
            todayHighlight: 1,
            startView: 2,
            minView: 0,
            maxView: 4,
            forceParse: true,
            format: 'yyyy-mm-dd hh:ii:ss'
        }).on('show', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $('.datetimepicker .prev').html('<')
            $('.datetimepicker .next').html('>')
        })

        $("#endTime").datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: true,
            todayHighlight: 1,
            startView: 2,
            minView: 0,
            maxView: 4,
            forceParse: true,
            format: 'yyyy-mm-dd hh:ii:ss'
        }).on('show', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $('.datetimepicker .prev').html('<')
            $('.datetimepicker .next').html('>')
        })

        $(".dropdown-menu").css({'--bs-dropdown-min-width': 0})
    },
    initModal: function (data) {
        this.gbid = data.curr.gbId;
        var $modal = $('#cameraModal');

        $('.modal-content .title').html(data.curr.place + '监控点情况 <button type="button" class="btn btn-primary btn-sm" id="payerhf">加载回放</button>');
        // 假设每个摄像头的视频源可能不同，可以设置为动态获取

        this.renderList(data.list);

        // 隐藏模态框的关闭按钮和右上角的关闭按钮
        // $modal.find('.close').hide();
        $modal.modal({backdrop: 'static', keyboard: false});

        // 显示模态框
        $modal.modal('show');

        if (!player) {
            this.initPlayer();
        }
        this.play(data.curr.gbId);
        asyLock = false;
    },
    initPlayer: function () {
        // 初始化播放器
        player = new KMediaUni({
            selector: '#video',
            loading: true,
            showMessage: true,
            request: {
                silentConnection: true,
            },
            control: {
                hideControlsBar: false,
                tools: Object.values(KMediaUni.TOOLS)
                // tools: ['play']
            }
        });
    },
    play: function (gbId) {
        player.loadVideo({
            src: {
                websocketUrl: wsUrl,
                devId: gbId
            },
            transport: KMediaUni.MODE.WEBRTC,
            autoplay: true
        });
    },
    show: function (gbId) {
        this.loadIndex = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        if (!gbId) {
            layer.msg('缺少必填参数[gbid]');
            layer.close(this.loadIndex)
            return;
        }
        this.gbid = gbId;
        $('#isLive').hide();
        if (asyLock) {
            layer.close(this.loadIndex)
            return;
        }
        this.exec('loadVideo');
        asyLock = true;
        this.getDeviceInfo(gbId);

    },
    getDeviceInfo: function (gbId) {
        let _this = this;
        $.ajax({
            async: false,
            url: ctx + '/device/getDeviceListByGbId',
            data: {gbId: gbId},
            dataType: 'json',
            success: function (res) {
                if (res.success && res.data && res.data.length > 0) {
                    _this.initDom();
                    _this.eventRegister();
                    _this.initModal(_this.dataHandle(res, gbId));
                    layer.close(_this.loadIndex);
                    return;
                }
                layer.close(_this.loadIndex);
                layer.msg('未获取到此设备信息');
            }
        })
    },
    renderList: function (data) {
        $("#videos").empty();
        let _this = this;
        let html = '';
        let gbIds = '';
        $.each(data, function (i, obj) {
            gbIds += obj.gbId + ',';
            let name = obj.place + (obj.deviceNo ? '-' + obj.deviceNo : '');
            let title = name;
            if (name.length > 6) {
                let splitArray = name.split('-');
                if (splitArray.length === 2) {
                    if (splitArray[0].length <= 4 && splitArray[1].length <=2) {
                        name = splitArray[0] + '-' + splitArray[1];
                    } else {
                        if (splitArray[0].length >= 5) {
                            name = name.substring(0, 5) + '...';
                        } else {
                            name = name.substring(0, 6) + '...';
                        }
                    }
                } else {
                    name = name.substring(0, 5) + '...';
                }
            }
            html += '<li data-gbid="' + obj.gbId + '" title="' + title + '"><img src="'+ctx+'/static/images/sp_icon.png"><span ' + (obj.gbId === _this.gbid ? 'style="color:#00e5ff;"' : '') + '>' + name + '</span></li>';
        })
        $("#videos").append(html);
        _this.getListStatus(gbIds);
    },
    getListStatus: function (gbIds) {
      $.ajax({
          url: ctx + '/device/getListStatus',
          data: {gbIds: gbIds},
          dataType: 'json',
          success: function (res) {
              if (res.success && res.data) {
                  $("#videos li").each(function (i, ele) {
                      let gbId = $(this).data('gbid');
                      if (res.data[gbId] !== '0') {
                          $(this).find("span").css({'color': 'red'});
                      }
                  })
              }
          }
      })
    },
    dataHandle: function (res, gbId) {
        let dataList = res.data;
        let data = {}
        $.each(dataList, function (i, obj) {
            if (obj.gbId === gbId) data.curr = obj;
        })
        data.list = dataList;
        return data;
    },
    exec: function (cmd, ...args) {
        if (player && player[cmd]) {
            player[cmd](...args);
        }
    },
    loadVideo: function () {
        let gbId = this.gbid;
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();

        if (!startTime || !endTime) {
            layer.msg('请填写回放开始时间和结束时间');
            return;
        }
        if (gbId) {
            player.loadVideo({
                src: {
                    websocketUrl: wsUrl,
                    devId: gbId,
                    startTime: startTime,
                    endTime: endTime
                },
                transport: KMediaUni.MODE.WEBRTC,
                autoplay: true
            });
            $("#isLive").show();
            return;
        }
        layer.msg('未找到播放源');
    }
}

let toolsShow = false;

$(document).on('click', function (e) {
    if ($(e.target).hasClass('modal')) {
        // 时间清空
        $('#startTime').val('');
        $('#endTime').val('');
        $('.tools').hide();
        toolsShow = false;
        $('#cameraModal').modal('hide');
    }
})

$(document).on('click', '.modal-content li', function () {
    let gbId = $(this).data('gbid');
    $("#isLive").hide();
    VideoPlayer.show(gbId);
})

$(document).on('click', '#payerhf', function () {
    if (toolsShow) {
        $('.tools').hide();
        toolsShow = false;
    } else {
        $('.tools').show();
        toolsShow = true;
    }
})

$(document).on('click', '#ishf', function () {
    //加载回放
    VideoPlayer.loadVideo();
})

$(document).on('click', '#isLive', function () {
    if (VideoPlayer.gbid) {
        VideoPlayer.show(VideoPlayer.gbid);
    }
})