var playNum = 1;
|
var playUrl = null;
|
var videoId = null;
|
let webrtc1;
|
let mediaStream1;
|
let webrtc2;
|
let mediaStream2;
|
let webrtc3;
|
let mediaStream3;
|
/**
|
* 页面最多同时调用三个视频，一个车牌识别，抓拍，三个顺序执行
|
* @param lprParam 车牌识别参数
|
* @param snapParam1 抓拍参数1
|
* @param snapPram2 抓拍参数2
|
*/
|
function initVideo(snapParam1, snapParam2, snapPram3) {
|
|
//车牌识别播放
|
if (snapParam1) {
|
$.ajax({
|
type: "POST",
|
url: "../../inout/api/inout-video-play",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify(snapParam1),
|
success: function (result) {
|
if (result.code != "SUCCESS") {
|
layer.msg(result.msg);
|
} else {
|
initSnapVideo(result, 1);
|
}
|
//执行第二个
|
initVideo2(snapParam2, snapPram3);
|
},
|
error: function () {
|
layer.msg("过程1摄像头配置失败……");
|
//执行第二个
|
initVideo2(snapParam2, snapPram3);
|
}
|
});
|
} else {
|
initVideo2(snapParam2, snapPram3);
|
}
|
}
|
|
function initVideo2(snapParam2, snapParam3) {
|
if (snapParam2) {
|
$.ajax({
|
type: "POST",
|
url: "../../inout/api/inout-video-play",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify(snapParam2),
|
success: function (result) {
|
if (result.code != "SUCCESS") {
|
layer.msg(result.msg);
|
} else {
|
initSnapVideo(result, 2);
|
}
|
//执行第三个
|
initVideo3(snapParam3)
|
},
|
error: function () {
|
layer.msg("过程2摄像头配置失败……");
|
//执行第三个
|
initVideo3(snapParam3);
|
}
|
});
|
} else {
|
initVideo3(snapParam3);
|
}
|
}
|
|
function initVideo3(snapParam3) {
|
if (!snapParam3) return;
|
$.ajax({
|
type: "POST",
|
url: "../../inout/api/inout-video-play",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify(snapParam3),
|
success: function (result) {
|
if (result.code != "SUCCESS") {
|
layer.msg(result.msg);
|
} else {
|
initSnapVideo(result, 3);
|
}
|
},
|
error: function () {
|
layer.msg("过程3摄像头配置失败……");
|
}
|
});
|
}
|
|
|
/**
|
* 视频播放
|
* @param data
|
* @param order
|
*/
|
function initSnapVideo(data, order) {
|
var htm = "";
|
//海康web4.0播放
|
if (PlayType.HIK_WEB4 == data.playType) {
|
var url = "../../inout/api/iframe-hik?id=" + data.id;
|
if (ship && ship == "ship") { //船运称重页面
|
url += "&length=340&width=195";
|
} else { //称重页面
|
url += "&length=310&width=170";
|
}
|
htm = '<iframe src=' + url + ' style="width: 100%;height: 100%"></iframe>';
|
}
|
//VLC播放
|
if (PlayType.VLC == data.playType) {
|
htm = "<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}'>\n"
|
+ "<param name='mrl' value='" + data.playUrl + "'/>\n"
|
+ "<param name='volume' value='50'/>\n"
|
+ "<param name='autoplay' value='true'/>\n"
|
+ "<param name='loop' value='false'/>\n"
|
+ "<param name='fullscreen' value='true'/>\n"
|
+ "<param name='toolbar' value='false'/>\n" + "</object>";
|
}
|
//web-rtc播放方式
|
if (PlayType.PLAY_TYPE_WEB_RTC_DH == data.playType || PlayType.PLAY_TYPE_WEB_RTC_HIK == data.playType) {
|
playUrl = data.playUrl;
|
playNum = order;
|
videoId = data.cameraId;
|
htm = '<video class="video" id="video' + playNum + '" autoplay="" muted="" playsinline=""></video>';
|
}
|
|
if (1 == order) {
|
$("#kccz-r-video1").append(htm);
|
}
|
if (2 == order) {
|
$("#kccz-r-video2").append(htm);
|
}
|
if (3 == order) {
|
$("#kccz-r-video3").append(htm);
|
}
|
if (PlayType.PLAY_TYPE_WEB_RTC_DH == data.playType || PlayType.PLAY_TYPE_WEB_RTC_HIK == data.playType) {
|
if (1 == order) {
|
webRtcToPlay1();
|
}
|
if (2 == order) {
|
webRtcToPlay2();
|
}
|
if (3 == order) {
|
webRtcToPlay3();
|
}
|
}
|
}
|
|
/*============= webRtc视频播放1 ----- 开始 ===============*/
|
/**
|
* 开始播放
|
* @param winTag 播放窗口
|
* @returns {Promise<void>}
|
*/
|
async function webRtcToPlay1() {
|
if (playUrl) {
|
mediaStream1 = new MediaStream();
|
$("#video" + playNum)[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 = playUrl + "?uuid=" + videoId + "&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 (playUrl) {
|
mediaStream2 = new MediaStream();
|
$("#video" + playNum)[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 = playUrl + "?uuid=" + videoId + "&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 (playUrl) {
|
mediaStream3 = new MediaStream();
|
$("#video" + playNum)[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 = playUrl + "?uuid=" + videoId + "&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;
|
}
|
}
|
|
/*============= 视频播放 ----- 结束 ===============*/
|
