<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>视频监控</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link href="./css/mui.min.css" rel="stylesheet" />
|
<style>
|
.mui-bar-nav {
|
background: #245ca7;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
|
.mui-title {
|
color: #FFFFFF;
|
}
|
|
.mui-icon-back:before,
|
.mui-icon-left-nav:before {
|
color: #FFFFFF;
|
}
|
|
.ad {
|
display: block;
|
height: 226px;
|
}
|
|
.ad img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.video_list {
|
display: block;
|
background: #fff;
|
}
|
|
.video_list li {
|
border-bottom: 1px #eee solid;
|
padding: 10px 15px;
|
box-sizing: border-box;
|
background: url(../images/ico_arr.png)no-repeat right 15px center;
|
background-size: 7px auto;
|
}
|
|
.video_list li a {
|
display: flex;
|
}
|
|
.video_list img {
|
width: 8%;
|
align-self: center;
|
}
|
|
.video_list span {
|
align-self: center;
|
margin-left: 10px;
|
color: #333;
|
}
|
</style>
|
</head>
|
<body>
|
<header class="mui-bar mui-bar-nav">
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
<h1 class="mui-title">视频监控</h1>
|
</header>
|
<div class="mui-content">
|
<!--add-->
|
<div class="ad" id="video">
|
<img id="videoImg" src="./images/spad0.png"/>
|
|
<!-- 使用播放器播放 -->
|
<!-- <easy-player id="easyPlayer" style="display: none;" live="true" show-custom-button="true" auto-play="true" muted="true"></easy-player> -->
|
|
<!-- 使用IFrame播放 -->
|
<!-- <iframe id="iframePlayer" src="" style="margin: 5px, 0;" width="100%" height="100%" frameborder="no" allowfullscreen></iframe> -->
|
</div>
|
<!--list-->
|
<div class="video_list">
|
<ul id="videoList" class="mui-table-view">
|
<!-- <li>
|
<a onclick="toVideo()">
|
<img src="./images/ico_sp.png">
|
<span>视频监控设备：###01</span>
|
</a>
|
</li> -->
|
</ul>
|
</div>
|
</div>
|
<script src="./js/mui.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script src="./js/echarts.min.js"></script>
|
<script src="./js/EasyPlayer-element.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
mui.init();
|
var url; //接口路径
|
var keepUrl; //接口路径
|
var videoList; //视频设备集合
|
var timer;
|
var cameraData;
|
|
//转圈等待框
|
var wt;
|
var data = {
|
"interfaceId": "5601",
|
"sign": "10501",
|
"outId": "10501",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
|
}
|
};
|
var data0 = {
|
"interfaceId": "5602",
|
"sign": "10602",
|
"outId": "10602",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"cameraId": "",
|
"playType": "",
|
"playIframe": ""
|
}
|
};
|
var data1 = {
|
"interfaceId": "5603",
|
"sign": "10603",
|
"outId": "10603",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"playType": "",
|
"sn": "",
|
"ip": "",
|
"msg": ""
|
}
|
};
|
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
data.tokenAuth = user.tokenAuth;
|
data0.tokenAuth = user.tokenAuth;
|
data1.tokenAuth = user.tokenAuth;
|
url = user.url + "/api-phone/gateway";
|
keepUrl = user.url + "/api-phone/keep-alive";
|
getVideoList();
|
})
|
|
function getVideoList() {
|
//发送请求获取视频设备
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data),
|
success: function(result) {
|
if (result.code == "0000") {
|
videoList = result.data;
|
renderVideo();
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
|
//渲染视频监控设备
|
function renderVideo() {
|
var html = '';
|
if (videoList != null && videoList.length > 0) {
|
$.each(videoList, function(index, item) {
|
html += '<li onclick="getVideo(\'' + index + '\')"><a>';
|
html += '<img src="./images/ico_sp.png">';
|
html += '<span>监控设备：' + item.name + '</span></a></li>';
|
})
|
} else {
|
html += '<li><a><span>暂无相关设备</span></a></li>';
|
}
|
$("#videoList").html(html);
|
}
|
|
//播放
|
function getVideo(tag) {
|
wt = plus.nativeUI.showWaiting("请稍后...")
|
data0.data.cameraId = videoList[tag].id
|
data0.data.playType = videoList[tag].playType
|
data0.data.playIframe = "Y";
|
console.log(url);
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data0),
|
success: function(result) {
|
|
if (result.code == "0000") {
|
|
cameraData = result.data;
|
//播放视频
|
toVideo();
|
} else {
|
//关闭转圈等待框
|
wt.close();
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
//关闭转圈等待框
|
wt.close();
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
|
function toVideo() {
|
|
$('#video').html("");
|
var html = "";
|
|
//关闭转圈等待框
|
wt.close();
|
if(cameraData.playIframe){
|
|
html = '<iframe id="iframePlayer" src="' + cameraData.playIframe + '" style="margin: 5px, 0;" width="100%" height="100%" frameborder="no"></iframe>';
|
$('#video').html(html);
|
|
}else if(cameraData.playAddr){
|
|
html = '<easy-player id="easyPlayer" video-url="' + cameraData.playAddr +
|
'" live="true" show-custom-button="true" auto-play="true" muted="true"></easy-player>';
|
$('#video').html(html);
|
|
//定时器-保活直播
|
if (timer) clearInterval(timer);
|
timer = setInterval(function() {
|
keepAlive();
|
}, 15 * 1000);
|
}else{
|
mui.alert('未获取到当前摄像头播放信息！！', '提示', ["确定"], function() {}, "div");
|
}
|
}
|
|
function keepAlive() {
|
var data = {
|
playType: cameraData.playType,
|
sn: cameraData.sn,
|
ip: cameraData.ipIn,
|
msg: Math.random()
|
};
|
mui.ajax(keepUrl, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data),
|
success: function(result) {},
|
error: function() {}
|
})
|
}
|
|
</script>
|
</body>
|
</html>
|
