var layer;
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 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 += '';
$("#vlcPlayer").html(html);
}
/*============= webRtc视频播放 ----- 开始 ===============*/
/*============= webRtc视频播放 ----- 开始 ===============*/
/**
* 开始播放
* @param winTag 播放窗口
* @returns {Promise}
*/
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;
}
}
/*============= 视频播放 ----- 结束 ===============*/