安防视频调整

czt

2 天以前 bc3e9b68c66fdeeb7c49155ff46ed68d3650cc18

 fzzy-igdss-web/src/main/resources/static/security/video-list-dept.js

@@ -1,99 +1,108 @@
var layer;
var splitWin = 1;  //分屏数，默认1分屏
var windowsNum = 1; //播放窗口下标，手动选择模式下使用
var windowsNum = null; //播放窗口下标，手动选择模式下使用
var timer;
var table;
var cameraData;
var playUrl= null;
var curCamera = null;
var playCamera = null;
var playList = {};

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;

$(function () {
    layui.use(['layer', 'table'], function () {
        layer = layui.layer;
        table = layui.table;
    });
    
    showPtz = function(){
        $("#ptz-block").css("opacity",1);
    };

    disPtz = function(){
        $("#ptz-block").css("opacity",0);
    };

    //初始化渲染播放列表
    renderList();
});

/**
 * 播放窗口选中
 * @param win1 分屏数
 * @param win2 选中窗口数
 * 渲染监控列表
 */
function selectWin(win1,win2) {
    removeSelectCss();
    splitWin = win1;
    windowsNum = win2;
    addSelectCss();
}

/**
 * 去除选中CSS
 */
function removeSelectCss() {
    $("#f" + splitWin + "_d" + windowsNum).removeClass("selectWin");
}

/**
 * 增加选中CSS
 */
function addSelectCss() {
    $("#f" + splitWin + "_d" + windowsNum).addClass("selectWin");
}

/**
 * 分屏切换
 * @param tagNum  分屏数
 */
function fenping(tagNum) {

    //切换分屏图标及页面
    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");
        $("#video_1").css('display', 'block');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'none');
function renderList() {
    if (!listCamera || listCamera.length == 0) {
        return;
    }
    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");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'block');
        $("#video_9").css('display', 'none');
    }
    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");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'block');
    }
    var eleTable = document.getElementById("cameraList");
    var _tr;
    var _td;

    $.each(listCamera, function (index, item) {

        _tr = document.createElement("tr");
        _tr.ondblclick = function () {
            getMedia(index);
        };

        _td = document.createElement("td");
        _td.innerText = item.name;
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = item.type == "01" ? "枪机" : "球机";
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = item.status == "OFF" ? "离线" : "在线";
        _tr.appendChild(_td);

        eleTable.appendChild(_tr);
    })
}

/**
 * 点击播放
 * @param cameraId
 * 点击获取播放信息
 * @param index
 */
play = function (data) {
    layer.msg("正在获取播放信息……");
    cameraData = null;
    playUrl = null;
function getMedia(index) {
    if(windowsNum == null){
        windowsNum = 1;
    }
    playCamera = null;
    var camera = listCamera[index];
    playList[windowsNum] = camera;

    var data = {
        id: data.id,
        playType: data.playType
        id: camera.id,
        playType: camera.playType
    };
    $.ajax({
        type: 'POST',
@@ -105,144 +114,226 @@
            if (result.code != "SUCCESS") {
                layer.msg(result.msg);
            } else {
                cameraData = result;
                playUrl = result.playUrl;
                play2();
                playCamera = result;
                startPlay();
            }
        },
        error: function (result) {
            play2();
            layer.msg(result.msg);
            startPlay();
        }
    });
};

play2 = function () {

    if (!cameraData) {
        layer.alert("未获取到当前摄像头播放信息！！");
        return;
/**
 * 播放窗口选中
 * @param win1 分屏数
 * @param win2 选中窗口数
 */
function selectWin(win1, win2) {
    if (windowsNum) {
        removeSelectCss();
    }
    splitWin = win1;
    windowsNum = win2;
    addSelectCss();

    if(PlayType.VLC == cameraData.playType){ //说明使用本地VLC播放
        vlcToPlay();
    }

    if (PlayType.PLAY_TYPE_WEB_RTC_DH == cameraData.playType
    || PlayType.PLAY_TYPE_WEB_RTC_HIK == cameraData.playType) {//使用web-rtc播放
        webRtcToPlay();
    }
};


function renderList() {
    if (!listCamera || listCamera.length == 0) {
        return;
    }
    var eleTable = document.getElementById("cameraList");
    var _tr;
    var _td;
    listCamera.forEach(function (data) {
        _tr = document.createElement("tr");
        _tr.ondblclick = function () {
            play(data);
        };

        _td = document.createElement("td");
        _td.innerText = data.name;
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = data.type == "01" ? "枪机" : "球机";
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = data.status == "OFF" ? "离线" : "在线";
        _tr.appendChild(_td);

        eleTable.appendChild(_tr);
    });
    curCamera = playList[windowsNum];
}


/**
 * 播放还是暂停
 * 去除选中CSS
 */
function playStop() {
    var videL = $('#easyPlayer');
    if (videL.paused) {
        videL.play();
    } else {
        videL.pause();
function removeSelectCss() {
    const target = document.getElementById("f" + splitWin + "_d" + windowsNum);
    target.classList.remove('active');
}

/**
 * 增加选中CSS
 */
function addSelectCss() {
    const target = document.getElementById("f" + splitWin + "_d" + windowsNum);
    target.classList.add('active');
}

/**
 * 分屏切换
 * @param tagNum  分屏数
 */
function fenping(tagNum) {
    if (windowsNum) {
        removeSelectCss();
    }
    playList = {};

    //重置切换前的分屏窗口
    reloadView(splitWin);

    //赋值当前分屏数
    splitWin = tagNum;

    //重置切换后的分屏窗口
    reloadView(splitWin);

    //切换分屏图标及页面
    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");
        $("#video_1").css('display', 'grid');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'none');
    }
    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");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'grid');
        $("#video_9").css('display', 'none');
    }
    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");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'grid');
    }
    windowsNum = null;
}

/**
 * 重置分屏前的窗口
 * @param num
 */
function reloadView(num) {
    var html;
    for (var i = 1; i <= num; i++) {
        html = '';
        html += '<video className="video" id="video' + num + '_' + i + ' autoPlay="" muted="" playsInline=""></video>';
        $("#f" + num + "_d" + i).html(html);
    }
}
/*============= vlc视频播放 ----- 开始 ===============*/
function vlcToPlay() {
    $("#video").css('display','none');
    $("#vlcPlayer").css('display','block');
    var html = '';
    html += '<object type="application/x-vlc-plugin"' +
        'events="true" width="100%" height="100%"' +
        'pluginspage="http://www.videolan.org"' +
        'th:codebase="@{../../static/plugins/vlc/npapi-vlc-2.2.2.tar.xz}">' +
        '<param name="mrl" value="' + playUrl + '"/>'+
        '<param name="volume" value="50"/>' +
        '<param name="autoplay" value="true"/>' +
        '<param name="loop" value="false"/>' +
        '<param name="fullscreen" value="true"/>' +
        '<param name="toolbar" value="false"/>' +
        '</object>';
    $("#vlcPlayer").html(html);



function startPlay() {

    if(windowsNum > splitWin){
        windowsNum = 1;
    }
    if (!playCamera) {
        $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头播放信息！！");
    }

    if (playCamera.playUrl) {
        if (windowsNum === 1) {
            playUrl1 = null;
            mediaStream1 = null;
            playUrl1 = playCamera.playUrl;
            videoId1 = playCamera.cameraId;
            webRtcToPlay1();
        }else if (windowsNum === 2) {
            playUrl2 = null;
            mediaStream2 = null;
            playUrl2 = playCamera.playUrl;
            videoId2 = playCamera.cameraId;
            webRtcToPlay2();
        }else if (windowsNum === 3) {
            playUrl3 = null;
            mediaStream3 = null;
            playUrl3 = playCamera.playUrl;
            videoId3 = playCamera.cameraId;
            webRtcToPlay3();
        }else if (windowsNum === 4) {
            playUrl4 = null;
            mediaStream4 = null;
            playUrl4 = playCamera.playUrl;
            videoId4 = playCamera.cameraId;
            webRtcToPlay4();
        }else if (windowsNum === 5) {
            playUrl5 = null;
            mediaStream5 = null;
            playUrl5 = playCamera.playUrl;
            videoId5 = playCamera.cameraId;
            webRtcToPlay5();
        }else if (windowsNum === 6) {
            playUrl6 = null;
            mediaStream6 = null;
            playUrl6 = playCamera.playUrl;
            videoId6 = playCamera.cameraId;
            webRtcToPlay6();
        }else if (windowsNum === 7) {
            playUrl7 = null;
            mediaStream7 = null;
            playUrl7 = playCamera.playUrl;
            videoId7 = playCamera.cameraId;
            webRtcToPlay7();
        }else if (windowsNum === 8) {
            playUrl8 = null;
            mediaStream8 = null;
            playUrl8 = playCamera.playUrl;
            videoId8 = playCamera.cameraId;
            webRtcToPlay8();
        }else if (windowsNum === 9) {
            playUr9 = null;
            mediaStream9 = null;
            playUrl9 = playCamera.playUrl;
            videoId9 = playCamera.cameraId;
            webRtcToPlay9();
        }

        curCamera = playList[windowsNum];
    } else {
        $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头(" + playCamera.cameraName + ")播放信息！！");
    }
}

/*============= webRtc视频播放 ----- 开始 ===============*/

/*============= webRtc视频播放 ----- 开始 ===============*/
/*============= webRtc视频播放1 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay() {
    layer.msg("开始启动播放……");
    $("#vlcPlayer").css('display','none');
    $("#video").css('display','block');

    if(playUrl){
        mediaStream = new MediaStream();
        $("#video")[0].srcObject = mediaStream;
        webrtc = new RTCPeerConnection({
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"
        });
        webrtc.onsignalingstatechange = signalingstatechange;
        webrtc1.onsignalingstatechange = signalingstatechange1;

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

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

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

async function signalingstatechange() {
    switch (webrtc.signalingState) {
async function signalingstatechange1() {
    switch (webrtc1.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl + "?uuid=" + cameraData.cameraId + "&channel=0";
            let url = playUrl1 + "?uuid=" + videoId1 + "&channel=0";
            $.post(url, {
                data: btoa(webrtc.localDescription.sdp)
                data: btoa(webrtc1.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc.setRemoteDescription(new RTCSessionDescription({
                    webrtc1.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
@@ -257,9 +348,519 @@
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc.signalingState}`);
            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;
    }
}

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