初始化代码
This commit is contained in:
1189
public/monitor/ezuikit.js
Normal file
1189
public/monitor/ezuikit.js
Normal file
File diff suppressed because it is too large
Load Diff
272
public/monitor/index.html
Normal file
272
public/monitor/index.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<!--
|
||||
* @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',
|
||||
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>
|
||||
Reference in New Issue
Block a user