建模gis监管页面样式修改

sgj

2026-03-06 bd3c4b90882fc29711a5e73f4929db2da3e22cb6

 fzzy-igdss-web/src/main/resources/static/group/video.js

@@ -1,82 +1,19 @@
var time;
var splitWin = 1;  //分屏数，默认4分屏
var splitWin = 4;  //分屏数，默认1分屏
var deptCur = null; //当前库区
var deptIndex = 0;  //库区下标
var cameraList = null;  //监控列表
var cameraIndex = -1;  //监控下标
var cameraIndex = 0;  //监控下标
var cameraTimer;     // 库区定时
var selectTag = 0; //播放标签：0-自动轮播，1-手动选择
var windowsNum = 1; //播放窗口下标，手动选择模式下使用
var handCameraIndex = null;  //手动选择监控的下标
var windowsNum = 1; //
var gundongTimer;     //监控列表滚动定时器

var playUrl1 = null;
var videoId1 = null;
let webrtc1;
let mediaStream1;
var playUrl2 = null;
var videoId2 = null;
let webrtc2;
let mediaStream2;
var playUrl3 = null;
var videoId3 = null;
let webrtc3;
let mediaStream3;
var playUrl4 = null;
var videoId4 = null;
let webrtc4;
let mediaStream4;
var playUrl5 = null;
var videoId5 = null;
let webrtc5;
let mediaStream5;
var playUrl6 = null;
var videoId6 = null;
let webrtc6;
let mediaStream6;
var playUrl7 = null;
var videoId7 = null;
let webrtc7;
let mediaStream7;
var playUrl8 = null;
var videoId8 = null;
let webrtc8;
let mediaStream8;
var playUrl9 = null;
var videoId9 = null;
let webrtc9;
let mediaStream9;
var playUrl10 = null;
var videoId10 = null;
let webrtc10;
let mediaStream10;
var playUrl11 = null;
var videoId11 = null;
let webrtc11;
let mediaStream11;
var playUrl12 = null;
var videoId12 = null;
let webrtc12;
let mediaStream12;
var playUrl13 = null;
var videoId13 = null;
let webrtc13;
let mediaStream13;
var playUrl14 = null;
var videoId14 = null;
let webrtc14;
let mediaStream14;
var playUrl15 = null;
var videoId15 = null;
let webrtc15;
let mediaStream15;
var playUrl16 = null;
var videoId16 = null;
let webrtc16;
let mediaStream16;

$(function () {
    // 初始化页面
    initHtml();

    // 初始化WebSocket
    // initWS(companyId,bizType, bizTag, userId);
});

// 初始化页面
@@ -84,40 +21,76 @@
    // 时间
    initTime();

    initDicSlogan();

    //监控点信息适应滚动
    initScrollbar(60);

    //库区信息
    // renderDeptArea();
    //
    // renderCamera();
    renderDeptArea();
}

// socket信息返回處理
function socketOnMessage(pocket) {
    //console.log(pocket);
    if (pocket.bizId == "slogan") {
        var data = pocket.data;
        dicSlogan = data;
        initDicSlogan();
    }
}

// 渲染库区信息
function renderDeptArea() {
    if (deptCur) {
        $("#deptName").html(deptCur.deptName);
        $("#deptAddress").html(deptCur.addr == null ? "---" : deptCur.addr);
        $("#cameraSum").html(deptCur.cameraSum == null ? "---" : deptCur.cameraSum);
        $("#cameraCn").html(deptCur.cameraCn == null ? "---" : deptCur.cameraCn);
        $("#cameraYw").html(deptCur.cameraYw == null ? "---" : deptCur.cameraYw);
        $("#cameraAf").html(deptCur.cameraAf == null ? "---" : deptCur.cameraAf);
    reloadView(splitWin);
    //判断下标，如果库区切换下标等于库区列表长度，则重新循环
    if (deptIndex == deptList.length) {
        deptIndex = 0;
    }
    deptCur = deptList[deptIndex];

    $("#deptName").css("font-size", "18px");
    $("#deptName").html(deptCur.kqmc);
    $("#deptAddress").html(deptCur.xzqhmc == null ? "---" : deptCur.xzqhmc);
    $("#yxcr").html(deptCur.yxcr == null ? "---" : deptCur.yxcr);
    $("#cfs").html(deptCur.cfs == null ? "---" : deptCur.cfs);
    ajaxCamera();
}

//查询库区下监控信息
function ajaxCamera() {
    //先把监控列表置空
    cameraList = null;
    $.ajax({
        type: "POST",
        url: "/group/camera-list",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "deptId": deptCur.id
        }),
        success: function (result) {
            if (result.code == "0000") {
                cameraList = result.data;
                renderCamera();
            }
        },
        error: function (error) {
        }
    });
}

// 渲染监控列表
function renderCamera() {
    var html = '';
    if (cameraList != null && cameraList.length > 0) {
        var divcameraIndex = "";
        $.each(cameraList, function (index, item) {
            divcameraIndex = "divCamera" + index;
            html += '<div class="panel-content-body-tr" id="' + divcameraIndex + '" ondblclick="selectHand(' + index + ')">';
            html += '<div class="panel-content-body-tr">';
            html += '<span class="body-item" style="flex: 1.4">';
            html += item.name;
            html += '</span>';
            html += '<span class="body-item" style="flex: 0.6">';
            if (item.spjklx == "02") {
            if (item.type == "02") {
                html += '球机';
            } else {
                html += '枪机';
@@ -131,146 +104,89 @@
        html += '</div>';
    }
    $("#inventoryInfo").html(html);
    if (selectTag == 0) {
        cameraSwitch1();
    }

    cameraSwitch1();
}

/* ---------- 监控切换 ---------- */
function cameraSwitch1() {
    clearInterval(cameraTimer);
    cameraSwitch2()
    //5分钟切换视频
    cameraTimer = setInterval(function () {
        cameraSwitch2()
    }, 60000);
}

function cameraSwitch2() {
    for (var i = 1; i <= splitWin; i++) {
        cameraIndex++;
        //播放视频
        startPlay(i);
    //若库区下监控列表为空，则进入下个库区
    if (cameraList == null || cameraList.length === 0) {
        deptIndex++;
        cameraIndex = 0;
        clearInterval(cameraTimer);
        renderDeptArea();
    }else {
        cameraSwitch2();
        //1分钟切换视频
        cameraTimer = setInterval(function () {
            cameraSwitch2()
        }, 1000 * 60);
    }
}

//视频播放-请求摄像头信息
function cameraSwitch2() {
    if(cameraIndex < cameraList.length){
        for (var i = 1; i <= splitWin; i++) {
            if (cameraIndex < cameraList.length) {
                //播放视频
                startPlay(cameraIndex, i);
                cameraIndex++;
            }
        }
    }else {
        cameraIndex = 0;
        deptIndex++;
        clearInterval(cameraTimer);
        renderDeptArea();
    }
}

/**
 *
 * @param cameraNum   摄像头列表下标
 * @param windowsNum 播放窗口下标
 */
function startPlay(windowsNum) {
    if (cameraIndex === cameraList.length) {
        cameraIndex = 0;
    }
function startPlay(cameraNum, windowsNum) {

    var data = cameraList[cameraIndex];
    if (!data) {
    var camera = cameraList[cameraNum];
    console.log("监控列表下标=" + cameraNum + ",监控名称=" + camera.name + ",窗口下标=" + windowsNum);
    if (!camera) {
        $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头播放信息！！");
        return;
    }
    if (data.urlIn) {
        if (windowsNum === 1) {
            playUrl1 = null;
            mediaStream1 = null;
            playUrl1 = cameraList[cameraIndex].urlIn;
            videoId1 = cameraList[cameraIndex].id;
            webRtcToPlay1();
        }else if (windowsNum === 2) {
            playUrl2 = null;
            mediaStream2 = null;
            playUrl2 = cameraList[cameraIndex].urlIn;
            videoId2 = cameraList[cameraIndex].id;
            webRtcToPlay2();
        }else if (windowsNum === 3) {
            playUrl3 = null;
            mediaStream3 = null;
            playUrl3 = cameraList[cameraIndex].urlIn;
            videoId3 = cameraList[cameraIndex].id;
            webRtcToPlay3();
        }else if (windowsNum === 4) {
            playUrl4 = null;
            mediaStream4 = null;
            playUrl4 = cameraList[cameraIndex].urlIn;
            videoId4 = cameraList[cameraIndex].id;
            webRtcToPlay4();
        }else if (windowsNum === 5) {
            playUrl5 = null;
            mediaStream5 = null;
            playUrl5 = cameraList[cameraIndex].urlIn;
            videoId5 = cameraList[cameraIndex].id;
            webRtcToPlay5();
        }else if (windowsNum === 6) {
            playUrl6 = null;
            mediaStream6 = null;
            playUrl6 = cameraList[cameraIndex].urlIn;
            videoId6 = cameraList[cameraIndex].id;
            webRtcToPlay6();
        }else if (windowsNum === 7) {
            playUrl7 = null;
            mediaStream7 = null;
            playUrl7 = cameraList[cameraIndex].urlIn;
            videoId7 = cameraList[cameraIndex].id;
            webRtcToPlay7();
        }else if (windowsNum === 8) {
            playUrl8 = null;
            mediaStream8 = null;
            playUrl8 = cameraList[cameraIndex].urlIn;
            videoId8 = cameraList[cameraIndex].id;
            webRtcToPlay8();
        }else if (windowsNum === 9) {
            playUr9 = null;
            mediaStream9 = null;
            playUrl9 = cameraList[cameraIndex].urlIn;
            videoId9 = cameraList[cameraIndex].id;
            webRtcToPlay9();
        }else if (windowsNum === 10) {
            playUrl10 = null;
            mediaStream10 = null;
            playUrl10 = cameraList[cameraIndex].urlIn;
            videoId10 = cameraList[cameraIndex].id;
            webRtcToPlay10();
        }else if (windowsNum === 11) {
            playUrl11 = null;
            mediaStream11 = null;
            playUrl11 = cameraList[cameraIndex].urlIn;
            videoId11 = cameraList[cameraIndex].id;
            webRtcToPlay11();
        }else if (windowsNum === 12) {
            playUrl12 = null;
            mediaStream12 = null;
            playUrl12 = cameraList[cameraIndex].urlIn;
            videoId12 = cameraList[cameraIndex].id;
            webRtcToPlay12();
        }else if (windowsNum === 13) {
            playUrl13 = null;
            mediaStream13 = null;
            playUrl13 = cameraList[cameraIndex].urlIn;
            videoId13 = cameraList[cameraIndex].id;
            webRtcToPlay13();
        }else if (windowsNum === 14) {
            playUrl14 = null;
            mediaStream14 = null;
            playUrl14 = cameraList[cameraIndex].urlIn;
            videoId14 = cameraList[cameraIndex].id;
            webRtcToPlay14();
        }else if (windowsNum === 15) {
            playUrl15 = null;
            mediaStream15 = null;
            playUrl15 = cameraList[cameraIndex].urlIn;
            videoId15 = cameraList[cameraIndex].id;
            webRtcToPlay15();
        }else if (windowsNum === 16) {
            playUrl16 = null;
            mediaStream16 = null;
            playUrl16 = cameraList[cameraIndex].urlIn;
            videoId16 = cameraList[cameraIndex].id;
            webRtcToPlay16();

    var data = {
        id: camera.id,
        playType: camera.playType
    };
    $.ajax({
        type: 'POST',
        url: "/security/get-media",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                toPlay(camera.name, windowsNum, null, result.msg);
            } else {
                toPlay(camera.name, windowsNum, result.playUrl, null);
            }
        },
        error: function (result) {
            toPlay(camera.name, windowsNum, null,  "未获取到播放信息！！");
        }
    });
}

function toPlay(name,windowsNum, url, msg) {
    var html = '';
    if (url) {
        html += '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else {
        $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头(" + data.name + ")播放信息！！");
        html += '<div style="margin-top: 25%;">'+name+'<br>' +msg+'</div>';
    }
    $("#f" + splitWin + "_d" + windowsNum).html(html);
}

/**
@@ -278,6 +194,14 @@
 * @param tagNum  分屏数
 */
function fenping(tagNum) {
    if (tagNum === 9) {
        layer.msg("当前流媒体暂不支持9分屏播放！");
        return;
    }
    if (tagNum === 16) {
        layer.msg("当前流媒体暂不支持9分屏播放！");
        return;
    }
    //重置切换前的分屏窗口
    reloadView(splitWin);

@@ -288,7 +212,7 @@
    reloadView(splitWin);

    //切换分屏图标及页面
    if (tagNum == 1) {
    if (tagNum === 1) {
        $("#f_1").attr("src", "/img/web/group/fp_1_active.png");
        $("#f_4").attr("src", "/img/web/group/fp_4.png");
        $("#f_9").attr("src", "/img/web/group/fp_9.png");
@@ -298,7 +222,7 @@
        $("#video_9").css('display', 'none');
        $("#video_16").css('display', 'none');
    }
    if (tagNum == 4) {
    if (tagNum === 4) {
        $("#f_1").attr("src", "/img/web/group/fp_1.png");
        $("#f_4").attr("src", "/img/web/group/fp_4_active.png");
        $("#f_9").attr("src", "/img/web/group/fp_9.png");
@@ -308,7 +232,7 @@
        $("#video_9").css('display', 'none');
        $("#video_16").css('display', 'none');
    }
    if (tagNum == 9) {
    if (tagNum === 9) {
        $("#f_1").attr("src", "/img/web/group/fp_1.png");
        $("#f_4").attr("src", "/img/web/group/fp_4.png");
        $("#f_9").attr("src", "/img/web/group/fp_9_active.png");
@@ -318,7 +242,7 @@
        $("#video_9").css('display', 'block');
        $("#video_16").css('display', 'none');
    }
    if (tagNum == 16) {
    if (tagNum === 16) {
        $("#f_1").attr("src", "/img/web/group/fp_1.png");
        $("#f_4").attr("src", "/img/web/group/fp_4.png");
        $("#f_9").attr("src", "/img/web/group/fp_9.png");
@@ -332,10 +256,8 @@
    cameraIndex = 0;
    clearInterval(cameraTimer);
    windowsNum = 1;
    //判断播放方式
    if (selectTag == 0) {
        cameraSwitch1();
    }

    cameraSwitch1();
}

//重置4分屏和9分屏的各个播放窗口
@@ -346,37 +268,6 @@
        html += '<video className="video" id="video' + num + '_' + i + ' autoPlay="" muted="" playsInline=""></video>';
        $("#f" + num + "_d" + i).html(html);
    }
}

/**
 * 手动选择播放
 * @param index 选择监控的监控列表下标
 */
function selectHand(index) {
    if (selectTag == 0) {

        //清除列表滚动，重新设置滚动时间
        clearInterval(gundongTimer);
        initScrollbar(1000 * 30);

        showTip("已切换手动播放模式！双击左侧列表监控进行播放！");

        windowsNum = 1;
        selectTag = 1;
        reloadView(splitWin);
    }

    if (windowsNum > splitWin) {
        windowsNum = 1;
    }
    cameraIndex = index;
    startPlay(windowsNum);
    windowsNum++;

    //清除上次选中效果，赋值新选中效果
    $("#divCamera" + handCameraIndex).removeClass("handSelect");
    $("#divCamera" + index).addClass("handSelect");
    handCameraIndex = index;
}

// 刷新时间
@@ -450,1026 +341,3 @@
function showTip(msg) {
    layer.msg(msg);
}


/*============= webRtc视频播放1 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay1() {
    if (playUrl1) {
        mediaStream1 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream1;
        webrtc1 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc1.onsignalingstatechange = signalingstatechange1;

        webrtc1.ontrack = ontrack1
        let offer = await webrtc1.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc1.setLocalDescription(offer);
    }
}

function ontrack1(event) {
    mediaStream1.addTrack(event.track);
}

async function signalingstatechange1() {
    switch (webrtc1.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl1 + "?uuid=" + videoId1 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc1.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc1.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc1.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放2 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay2() {
    if (playUrl2) {
        mediaStream2 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream2;
        webrtc2 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc2.onsignalingstatechange = signalingstatechange2;

        webrtc2.ontrack = ontrack2
        let offer = await webrtc2.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc2.setLocalDescription(offer);
    }
}

function ontrack2(event) {
    mediaStream2.addTrack(event.track);
}

async function signalingstatechange2() {
    switch (webrtc2.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl2 + "?uuid=" + videoId2 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc2.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc2.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc2.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放3 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay3() {
    if (playUrl3) {
        mediaStream3 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream3;
        webrtc3 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc3.onsignalingstatechange = signalingstatechange3;

        webrtc3.ontrack = ontrack3
        let offer = await webrtc3.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc3.setLocalDescription(offer);
    }
}

function ontrack3(event) {
    mediaStream3.addTrack(event.track);
}

async function signalingstatechange3() {
    switch (webrtc3.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl3 + "?uuid=" + videoId3 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc3.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc3.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc3.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放4 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay4() {
    if (playUrl4) {
        mediaStream4 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream4;
        webrtc4 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc4.onsignalingstatechange = signalingstatechange4;

        webrtc4.ontrack = ontrack4
        let offer = await webrtc4.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc4.setLocalDescription(offer);
    }
}

function ontrack4(event) {
    mediaStream4.addTrack(event.track);
}

async function signalingstatechange4() {
    switch (webrtc4.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl4 + "?uuid=" + videoId4 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc4.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc4.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc4.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/
/*============= webRtc视频播放5 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay5() {
    if (playUrl5) {
        mediaStream5 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream5;
        webrtc5 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc5.onsignalingstatechange = signalingstatechange5;

        webrtc5.ontrack = ontrack5
        let offer = await webrtc4.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc5.setLocalDescription(offer);
    }
}

function ontrack5(event) {
    mediaStream5.addTrack(event.track);
}

async function signalingstatechange5() {
    switch (webrtc5.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl5 + "?uuid=" + videoId5 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc5.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc5.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc5.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/
/*============= webRtc视频播放4 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay6() {
    if (playUrl6) {
        mediaStream6 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream6;
        webrtc6 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc6.onsignalingstatechange = signalingstatechange6;

        webrtc6.ontrack = ontrack6
        let offer = await webrtc4.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc6.setLocalDescription(offer);
    }
}

function ontrack6(event) {
    mediaStream6.addTrack(event.track);
}

async function signalingstatechange6() {
    switch (webrtc6.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl6 + "?uuid=" + videoId6 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc6.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc6.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc6.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放7 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay7() {
    if (playUrl7) {
        mediaStream7 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream7;
        webrtc7 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc7.onsignalingstatechange = signalingstatechange7;

        webrtc7.ontrack = ontrack7
        let offer = await webrtc7.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc7.setLocalDescription(offer);
    }
}

function ontrack7(event) {
    mediaStream7.addTrack(event.track);
}

async function signalingstatechange7() {
    switch (webrtc7.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl7 + "?uuid=" + videoId7 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc7.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc7.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc7.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放8 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay8() {
    if (playUrl8) {
        mediaStream8 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream8;
        webrtc8 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrt8.onsignalingstatechange = signalingstatechange8;

        webrtc8.ontrack = ontrack8
        let offer = await webrtc8.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc8.setLocalDescription(offer);
    }
}

function ontrack8(event) {
    mediaStream8.addTrack(event.track);
}

async function signalingstatechange8() {
    switch (webrtc8.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl8 + "?uuid=" + videoId8 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc8.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc8.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc8.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放9 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay9() {
    if (playUrl9) {
        mediaStream9 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream9;
        webrtc9 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc9.onsignalingstatechange = signalingstatechange9;

        webrtc9.ontrack = ontrack9
        let offer = await webrtc4.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc9.setLocalDescription(offer);
    }
}

function ontrack9(event) {
    mediaStream9.addTrack(event.track);
}

async function signalingstatechange9() {
    switch (webrtc9.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl9 + "?uuid=" + videoId9 + "&channel=0";
            $.post(url, {
                data: btoa(webrt9.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc9.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc9.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放10 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay10() {
    if (playUrl10) {
        mediaStream10 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream10;
        webrtc10 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc10.onsignalingstatechange = signalingstatechange10;

        webrtc10.ontrack = ontrack10
        let offer = await webrtc10.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc10.setLocalDescription(offer);
    }
}

function ontrack10(event) {
    mediaStream10.addTrack(event.track);
}

async function signalingstatechange10() {
    switch (webrtc10.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl10 + "?uuid=" + videoId10 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc10.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc10.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc10.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放11 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay11() {
    if (playUrl11) {
        mediaStream11 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream11;
        webrtc11 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc11.onsignalingstatechange = signalingstatechange11;

        webrtc11.ontrack = ontrack11
        let offer = await webrtc11.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc11.setLocalDescription(offer);
    }
}

function ontrack11(event) {
    mediaStream11.addTrack(event.track);
}

async function signalingstatechange11() {
    switch (webrtc11.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl11 + "?uuid=" + videoId11 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc11.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc11.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc11.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放12 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay12() {
    if (playUrl12) {
        mediaStream12 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream12;
        webrtc12 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc12.onsignalingstatechange = signalingstatechange12;

        webrtc12.ontrack = ontrack12
        let offer = await webrtc12.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc12.setLocalDescription(offer);
    }
}

function ontrack12(event) {
    mediaStream12.addTrack(event.track);
}

async function signalingstatechange12() {
    switch (webrtc12.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl12 + "?uuid=" + videoId12 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc12.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc12.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc12.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放13 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay13() {
    if (playUrl13) {
        mediaStream13 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream13;
        webrtc13 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc13.onsignalingstatechange = signalingstatechange13;

        webrtc13.ontrack = ontrack13
        let offer = await webrtc13.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc13.setLocalDescription(offer);
    }
}

function ontrack13(event) {
    mediaStream13.addTrack(event.track);
}

async function signalingstatechange13() {
    switch (webrtc13.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl13 + "?uuid=" + videoId13 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc13.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc13.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc13.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放14 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay14() {
    if (playUrl14) {
        mediaStream14 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream14;
        webrtc14 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc14.onsignalingstatechange = signalingstatechange14;

        webrtc14.ontrack = ontrack14
        let offer = await webrtc14.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc14.setLocalDescription(offer);
    }
}

function ontrack14(event) {
    mediaStream14.addTrack(event.track);
}

async function signalingstatechange14() {
    switch (webrtc14.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl14 + "?uuid=" + videoId14 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc14.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc14.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc14.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放15 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay15() {
    if (playUrl15) {
        mediaStream15 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream15;
        webrtc15 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc15.onsignalingstatechange = signalingstatechange15;

        webrtc15.ontrack = ontrack15
        let offer = await webrtc15.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc15.setLocalDescription(offer);
    }
}

function ontrack15(event) {
    mediaStream15.addTrack(event.track);
}

async function signalingstatechange15() {
    switch (webrtc15.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl15 + "?uuid=" + videoId15 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc15.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc15.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc15.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/

/*============= webRtc视频播放16 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay16() {
    if (playUrl16) {
        mediaStream16 = new MediaStream();
        $("#video" + splitWin + "_" + windowsNum)[0].srcObject = mediaStream16;
        webrtc16 = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc16.onsignalingstatechange = signalingstatechange16;

        webrtc16.ontrack = ontrack16
        let offer = await webrtc16.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc16.setLocalDescription(offer);
    }
}

function ontrack16(event) {
    mediaStream16.addTrack(event.track);
}

async function signalingstatechange16() {
    switch (webrtc16.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl16 + "?uuid=" + videoId16 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc16.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc16.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc16.signalingState}`);
            break;
    }
}

/*============= 视频播放 ----- 结束 ===============*/