var layer;
|
var splitWin = 1; //分屏数，默认1分屏
|
var windowsNum = 1; //播放窗口下标，手动选择模式下使用
|
var timer;
|
var table;
|
var cameraData;
|
var playUrl= null;
|
|
$(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');
|
}
|
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');
|
}
|
}
|
|
/**
|
* 点击播放
|
* @param cameraId
|
*/
|
play = function (data) {
|
layer.msg("正在获取播放信息……");
|
cameraData = null;
|
playUrl = null;
|
var data = {
|
id: data.id,
|
playType: data.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") {
|
layer.msg(result.msg);
|
} else {
|
cameraData = result;
|
playUrl = result.playUrl;
|
play2();
|
}
|
},
|
error: function (result) {
|
play2();
|
}
|
});
|
};
|
|
play2 = function () {
|
|
if (!cameraData) {
|
layer.alert("未获取到当前摄像头播放信息！！");
|
return;
|
}
|
|
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);
|
});
|
}
|
|
|
/**
|
* 播放还是暂停
|
*/
|
function playStop() {
|
var videL = $('#easyPlayer');
|
if (videL.paused) {
|
videL.play();
|
} else {
|
videL.pause();
|
}
|
}
|
/*============= 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);
|
}
|
|
/*============= webRtc视频播放 ----- 开始 ===============*/
|
|
/*============= webRtc视频播放 ----- 开始 ===============*/
|
/**
|
* 开始播放
|
* @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({
|
iceServers: [{
|
urls: ["stun:stun.l.google.com:19302"]
|
}],
|
sdpSemantics: "unified-plan"
|
});
|
webrtc.onsignalingstatechange = signalingstatechange;
|
|
webrtc.ontrack = ontrack
|
let offer = await webrtc.createOffer({
|
|
offerToReceiveAudio: true,
|
offerToReceiveVideo: true
|
});
|
await webrtc.setLocalDescription(offer);
|
}
|
}
|
|
function ontrack(event) {
|
mediaStream.addTrack(event.track);
|
}
|
|
async function signalingstatechange() {
|
switch (webrtc.signalingState) {
|
case 'have-local-offer':
|
// let uuid = $('#uuid').val();
|
let url = playUrl + "?uuid=" + cameraData.cameraId + "&channel=0";
|
$.post(url, {
|
data: btoa(webrtc.localDescription.sdp)
|
}, function (data) {
|
try {
|
console.log(data);
|
webrtc.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 ${webrtc.signalingState}`);
|
break;
|
}
|
}
|
/*============= 视频播放 ----- 结束 ===============*/
|
