225 lines
6.0 KiB
HTML
Executable File
225 lines
6.0 KiB
HTML
Executable File
<!--
|
||
* @Description:
|
||
* @Author: xiao li
|
||
* @Date: 2020-07-20 14:08:46
|
||
* @LastEditTime: 2022-04-15 10:21:17
|
||
* @LastEditors: xiao li
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<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;
|
||
}
|
||
.play-box,
|
||
#myPlayer{
|
||
width: 100%;
|
||
height: 40vh;
|
||
background: #000;
|
||
}
|
||
|
||
.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>
|
||
<script src="./ezuikit.js"></script>
|
||
<script src="../js/jquery.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page-main">
|
||
<div class="play-box"></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 onclick="toStartTurn(0)" class="top abs"></div>
|
||
<div onclick="toStartTurn(1)" class="bottom abs"></div>
|
||
<div onclick="toStartTurn(2)" class="left abs" data-key="left"></div>
|
||
<div onclick="toStartTurn(3)" class="right abs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let _href = window.location.href
|
||
let url = _href.split('/demo/index.html?')[0]
|
||
let {0:id,1:uniacid} = _href.split('/demo/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) {
|
||
console.log(data)
|
||
let {token:accessToken,url} = data.data
|
||
let html = `<video id="myPlayer" autoplay controls playsInline webkit-playsinline src=`
|
||
html += url
|
||
html += ` ></video>`
|
||
$('.play-box').append(html)
|
||
player = new EZUIKit.EZUIPlayer('myPlayer');
|
||
player.play()
|
||
// 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),
|
||
// })
|
||
}
|
||
})
|
||
})
|
||
function toStartTurn(direction) {
|
||
$.ajax({
|
||
type: 'get',
|
||
url: `${ajax_url}farm/app/Index/ysStartTurn`,
|
||
dataType: 'json',
|
||
data: {
|
||
id,
|
||
direction
|
||
},
|
||
success: function(data) {
|
||
let {msg=''} = data.data
|
||
if(msg && msg!='操作成功'){
|
||
alert(msg)
|
||
}
|
||
setTimeout(()=>{
|
||
toStopTurn()
|
||
},500)
|
||
}
|
||
})
|
||
}
|
||
|
||
function toStopTurn() {
|
||
$.ajax({
|
||
type: 'get',
|
||
url: `${ajax_url}farm/app/Index/ysStopTurn`,
|
||
dataType: 'json',
|
||
data: {id},
|
||
success: function(data) {
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|