var time;
|
var splitWin = 1; //分屏数，默认4分屏
|
var deptCur = null; //当前库区
|
var cameraList = null; //监控列表
|
var cameraIndex = -1; //监控下标
|
var cameraTimer; // 库区定时
|
var selectTag = 0; //播放标签：0-自动轮播，1-手动选择
|
var windowsNum = 1; //播放窗口下标，手动选择模式下使用
|
var handCameraIndex = null; //手动选择监控的下标
|
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();
|
});
|
|
// 初始化页面
|
function initHtml() {
|
// 时间
|
initTime();
|
|
//监控点信息适应滚动
|
initScrollbar(60);
|
//库区信息
|
// renderDeptArea();
|
//
|
// renderCamera();
|
}
|
|
|
// 渲染库区信息
|
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);
|
}
|
}
|
|
// 渲染监控列表
|
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 += '<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") {
|
html += '球机';
|
} else {
|
html += '枪机';
|
}
|
html += '</span></div>';
|
})
|
} else {
|
html += '<div class="panel-content-body-tr">';
|
html += '<span class="body-item" style="flex: 1.4">暂无数据</span>';
|
html += '<span class="body-item" style="flex: 0.6"></span>';
|
html += '</div>';
|
}
|
$("#inventoryInfo").html(html);
|
if (selectTag == 0) {
|
cameraSwitch1();
|
}
|
}
|
|
/* ---------- 监控切换 ---------- */
|
function cameraSwitch1() {
|
clearInterval(cameraTimer);
|
cameraSwitch2()
|
//5分钟切换视频
|
cameraTimer = setInterval(function () {
|
cameraSwitch2()
|
}, 60000);
|
}
|
|
function cameraSwitch2() {
|
for (var i = 1; i <= splitWin; i++) {
|
cameraIndex++;
|
//播放视频
|
startPlay(i);
|
}
|
}
|
|
//视频播放-请求摄像头信息
|
/**
|
*
|
* @param cameraNum 摄像头列表下标
|
* @param windowsNum 播放窗口下标
|
*/
|
function startPlay(windowsNum) {
|
if (cameraIndex === cameraList.length) {
|
cameraIndex = 0;
|
}
|
|
var data = cameraList[cameraIndex];
|
if (!data) {
|
$("#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();
|
}
|
} else {
|
$("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头(" + data.name + ")播放信息！！");
|
}
|
}
|
|
/**
|
* 分屏切换
|
* @param tagNum 分屏数
|
*/
|
function fenping(tagNum) {
|
//重置切换前的分屏窗口
|
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");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'block');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'none');
|
$("#video_16").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");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'block');
|
$("#video_9").css('display', 'none');
|
$("#video_16").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");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'block');
|
$("#video_16").css('display', 'none');
|
}
|
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");
|
$("#f_16").attr("src", "/img/web/group/fp_16_active.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'none');
|
$("#video_16").css('display', 'block');
|
}
|
//当前库区重新播放，监控列表播放下标重置为0
|
cameraIndex = 0;
|
clearInterval(cameraTimer);
|
windowsNum = 1;
|
//判断播放方式
|
if (selectTag == 0) {
|
cameraSwitch1();
|
}
|
}
|
|
//重置4分屏和9分屏的各个播放窗口
|
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);
|
}
|
}
|
|
/**
|
* 手动选择播放
|
* @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;
|
}
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
/**
|
* 格式化日期
|
*
|
* @param fmt
|
* @param date
|
* @return {*}
|
*/
|
function formatDate(fmt, date) {
|
var ret;
|
var opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString() // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
};
|
for (var k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
if (ret) {
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
}
|
}
|
return fmt;
|
}
|
|
/**
|
* 获取当前星期几
|
*/
|
function getWeekDate() {
|
var now = new Date();
|
var day = now.getDay();
|
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var week = weeks[day];
|
return week;
|
}
|
|
//监控点信息滚动
|
function initScrollbar(num) {
|
gundongTimer = setInterval(function () {
|
if (!hasScrollbar()) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
if (document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight - document.getElementById('inventoryInfoBox').clientHeight)) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
document.getElementById('inventoryInfoBox').scrollTop++;
|
}
|
}
|
}, num);
|
}
|
|
//判断底部是否出现滚动条
|
function hasScrollbar() {
|
return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
|
}
|
|
// 右下角提醒信息
|
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;
|
}
|
}
|
|
/*============= 视频播放 ----- 结束 ===============*/
|
