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; } } /*============= 视频播放 ----- 结束 ===============*/