274 lines
7.0 KiB
HTML
Executable File
274 lines
7.0 KiB
HTML
Executable File
<!--
|
||
* @Description:
|
||
* @Author: xiao li
|
||
* @Date: 2020-07-21 20:23:44
|
||
* @LastEditTime: 2022-04-12 17:45:13
|
||
* @LastEditors: xiao li
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
|
||
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
|
||
<meta name="referrer" content="never">
|
||
|
||
<title>监控详情</title>
|
||
<script src="./ezuikit.js"></script>
|
||
<script src="../js/jquery.min.js"></script>
|
||
<style>
|
||
body{
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.page-main{
|
||
width: 100%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
}
|
||
#video-container{
|
||
width: 100%;
|
||
height: 40vh;
|
||
}
|
||
|
||
.flex-center{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mt-lg{
|
||
margin-top: 30px;
|
||
}
|
||
.text{
|
||
color: #999;
|
||
}
|
||
.console-bg{
|
||
width: 150px;
|
||
height: 150px;
|
||
border-radius: 50%;
|
||
border: 20px solid #f4f6f8;
|
||
}
|
||
.center{
|
||
width: 30px;
|
||
height: 30px;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: -15px;
|
||
margin-left: -15px;
|
||
border: 2px solid #eee;
|
||
border-radius: 50%;
|
||
}
|
||
.top{
|
||
width: 10px;
|
||
height: 10px;
|
||
top: 0%;
|
||
left: 50%;
|
||
margin-top: 10px;
|
||
margin-left: -5px;
|
||
border-width: 2px 0 0 2px;
|
||
border-color: #999;
|
||
border-style: solid;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.bottom{
|
||
width: 10px;
|
||
height: 10px;
|
||
bottom: 0%;
|
||
left: 50%;
|
||
margin-bottom: 10px;
|
||
margin-left: -5px;
|
||
border-width: 0 2px 2px 0;
|
||
border-color: #999;
|
||
border-style: solid;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.left{
|
||
width: 10px;
|
||
height: 10px;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: -5px;
|
||
margin-left: -65px;
|
||
border-width: 0 0 2px 2px;
|
||
border-color: #999;
|
||
border-style: solid;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.right{
|
||
width: 10px;
|
||
height: 10px;
|
||
top: 50%;
|
||
right: 50%;
|
||
margin-top: -5px;
|
||
margin-right: -65px;
|
||
border-width: 2px 2px 0 0;
|
||
border-color: #999;
|
||
border-style: solid;
|
||
transform: rotate(45deg);
|
||
}
|
||
.rel{
|
||
position: relative;
|
||
}
|
||
.abs{
|
||
position: absolute;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-main">
|
||
<div id="video-container">
|
||
</div>
|
||
<div class="flex-center mt-lg">
|
||
<div class="text">请通过操控云台来调整摄像机视角</div>
|
||
</div>
|
||
<div class="flex-center" style="margin-top: 50px;">
|
||
<div class="console-bg rel">
|
||
<div class="center abs"></div>
|
||
<div class="top abs"></div>
|
||
<div class="bottom abs"></div>
|
||
<div class="left abs" data-key="left"></div>
|
||
<div class="right abs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
let _href = window.location.href
|
||
let url = _href.split('/monitor/index.html?')[0]
|
||
let {0:id,1:uniacid} = _href.split('/monitor/index.html?')[1].split('&')
|
||
let ajax_url = `${url}/index.php?i=${uniacid}&m=farm&s=`
|
||
let player = null
|
||
$(function() {
|
||
$.ajax({
|
||
type: 'get',
|
||
url: `${ajax_url}farm/app/Index/getMonitorInfo`,
|
||
dataType: 'json',
|
||
data: {
|
||
id
|
||
},
|
||
success: function(data) {
|
||
let {token:accessToken,url} = data.data
|
||
player = new EZUIKit.EZUIKitPlayer({
|
||
id: 'video-container', // 视频容器ID
|
||
accessToken,
|
||
// url: 'ezopen://open.ys7.com/J59194950/1.hd.live',
|
||
url: 'ezopen://open.ys7.com/'+data.data['info']['deviceSerial']+'/1.hd.live',
|
||
autoplay: true ,
|
||
audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
|
||
plugin: ['talk'], // 加载插件，talk-对讲
|
||
openSoundCallBack: (data) => console.log("开启声音回调",data),
|
||
closeSoundCallBack: (data) => console.log("关闭声音回调",data),
|
||
startSaveCallBack: (data) => console.log("开始录像回调",data),
|
||
stopSaveCallBack: (data) => console.log("录像回调",data),
|
||
capturePictureCallBack: (data) => console.log("截图成功回调",data),
|
||
fullScreenCallBack: (data) => console.log("全屏回调",data),
|
||
getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
|
||
handleSuccess: (data) = function(){console.log("播放成功回调",data)},
|
||
handleError: (data) => console.log("播放失败回调",data),
|
||
})
|
||
}
|
||
})
|
||
})
|
||
|
||
let timeOutEvent = 0
|
||
$('.top').on({
|
||
touchstart: function(e){
|
||
timeOutEvent = setTimeout(()=>{
|
||
toChangeItem(1,0)
|
||
}, 1000);
|
||
return false
|
||
},
|
||
touchmove: function(e){
|
||
console.log('touchmove top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
},
|
||
touchend: function(e){
|
||
console.log('touchend top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
}
|
||
})
|
||
$('.bottom').on({
|
||
touchstart: function(e){
|
||
timeOutEvent = setTimeout(()=>{
|
||
toChangeItem(1,1)
|
||
}, 1000);
|
||
return false
|
||
},
|
||
touchmove: function(e){
|
||
console.log('touchmove top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
},
|
||
touchend: function(e){
|
||
console.log('touchend top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
}
|
||
})
|
||
|
||
$('.left').on({
|
||
touchstart: function(e){
|
||
timeOutEvent = setTimeout(()=>{
|
||
toChangeItem(1,2)
|
||
}, 1000);
|
||
return false
|
||
},
|
||
touchmove: function(e){
|
||
console.log('touchmove top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
},
|
||
touchend: function(e){
|
||
console.log('touchend top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
}
|
||
})
|
||
|
||
$('.right').on({
|
||
touchstart: function(e){
|
||
timeOutEvent = setTimeout(()=>{
|
||
toChangeItem(1,3)
|
||
}, 1000);
|
||
return false
|
||
},
|
||
touchmove: function(e){
|
||
console.log('touchmove top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
},
|
||
touchend: function(e){
|
||
console.log('touchend top===')
|
||
clearTimeout(timeOutEvent)
|
||
toChangeItem(2)
|
||
}
|
||
})
|
||
|
||
function toChangeItem(type, direction) {
|
||
timeOutEvent = 0
|
||
let method = type === 1 ? 'ysStartTurn' :'ysStopTurn'
|
||
$.ajax({
|
||
type: 'get',
|
||
url: `${ajax_url}farm/app/Index/${method}`,
|
||
dataType: 'json',
|
||
data: type === 1 ? {
|
||
id,
|
||
direction
|
||
} : {id},
|
||
success: function(data) {
|
||
console.log(data,'==========toChangeItem')
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|