You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
8.7 KiB
301 lines
8.7 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script type="text/javascript" src="jswebrtc.js"></script>
|
|
<script type="text/javascript" src="video-element.js"></script>
|
|
<script type="text/javascript" src="player.js"></script>
|
|
<script type="text/javascript" src="webrtc.min.js"></script>
|
|
|
|
<script src="./jquery.min.js"></script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: rgb(9, 9, 24);
|
|
color: #fff;
|
|
overflow: hidden;
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
|
|
font-size: 17px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.shipin9-1 span {
|
|
position: absolute;
|
|
left: 3%;
|
|
top: 3px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.biankaung {
|
|
width: 1854px;
|
|
height: 894px;
|
|
border: 1px solid #006685;
|
|
background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1))
|
|
}
|
|
|
|
.biankuang_top{
|
|
height: 853px;
|
|
width: 100%;
|
|
position: relative;
|
|
;
|
|
}
|
|
|
|
.shiyituImage{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 44%;
|
|
width: 1000px;
|
|
height: 667px;
|
|
position: relative;
|
|
}
|
|
.video_canvas{
|
|
width: 645px;
|
|
height: 365px;
|
|
position: absolute;
|
|
left: 50px;
|
|
}
|
|
.video_canvas1{
|
|
top: 50px;
|
|
}
|
|
.video_canvas2{
|
|
top: 430px;
|
|
}
|
|
|
|
.video_canvas_icon{
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 10px;
|
|
}
|
|
|
|
.video_canvas_text{
|
|
position: absolute;
|
|
width: 190px;
|
|
top: 5px;
|
|
left: 40px;
|
|
}
|
|
.bofangImage{
|
|
position:absolute;
|
|
}
|
|
.bofangImage1{
|
|
top: 292px;
|
|
left: 230px;
|
|
}
|
|
.bofangImage2{
|
|
top: 292px;
|
|
left: 70px;
|
|
}
|
|
.bofangImage3{
|
|
top:538px;
|
|
left: 70px;
|
|
}
|
|
.bofangImage4{
|
|
top: 538px;
|
|
left: 230px;
|
|
}
|
|
.bofangImage5{
|
|
top: 314px;
|
|
left: 356px;
|
|
}
|
|
.image{
|
|
position: absolute;
|
|
}
|
|
|
|
.image1{
|
|
left: 10px;
|
|
top: 280px;
|
|
transform: rotateZ(140deg);
|
|
width: 110px;
|
|
}
|
|
.image2{
|
|
left: 120px;
|
|
top: 280px;
|
|
transform: rotateZ(-140deg);
|
|
width: 110px;
|
|
}
|
|
.image3{
|
|
left: 10px;
|
|
top: 475px;
|
|
transform: rotateZ(40deg);
|
|
width: 110px;
|
|
}
|
|
.image4{
|
|
left: 110px;
|
|
top: 475px;
|
|
transform: rotateZ(-40deg);
|
|
width: 110px;
|
|
}
|
|
.image5{
|
|
left: 345px;
|
|
top: 310px;
|
|
}
|
|
.imageContet{
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 15px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.imageContet img{
|
|
width: 50px;
|
|
}
|
|
|
|
.imageContet2{
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 190px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
video{
|
|
width: 100%;
|
|
height: 90%;
|
|
position: absolute;
|
|
top: 9%;
|
|
left: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div class="biankaung">
|
|
<div class="shipin9-1">
|
|
<span style="font-size: 22px; font-weight: 500;">声波装置示意图</span>
|
|
<img src="./img/title.png" alt="" srcset="" width="100%" height="35px">
|
|
</div>
|
|
<div class="biankuang_top">
|
|
<!-- 40486A -->
|
|
<div class="shiyituImage">
|
|
<img width="100%" id="shiyitu" src="./img/shiyitu.png">
|
|
<img src="./img/xingHao.png" class="image image1">
|
|
<img src="./img/xingHao.png" class="image image2">
|
|
<img src="./img/xingHao.png" class="image image3">
|
|
<img src="./img/xingHao.png" class="image image4">
|
|
<img src="./img/gradienter-line.png" class="image image5">
|
|
|
|
|
|
<div class="imageContet">
|
|
<img src="./img/xingHao.png" >
|
|
<span style="margin-top: 20px;margin-left: 5px;">驱鸟装置</span>
|
|
</div>
|
|
|
|
<div class="imageContet2">
|
|
<img src="./img/gradienter-line.png" >
|
|
<span style="margin-left: 5px;">探测装置</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video_canvas video_canvas1">
|
|
<img src="./img/title_bg.png">
|
|
<div style="position: absolute; left: 0;top: 0;">
|
|
<img src="./img/title_icon.png" class="video_canvas_icon">
|
|
<span class="video_canvas_text">驱鸟双目相机（可见光）</span>
|
|
</div>
|
|
<video id="shipin1_video1" controls ></video>
|
|
|
|
|
|
</div>
|
|
<div class="video_canvas video_canvas2">
|
|
<img src="./img/title_bg.png">
|
|
<div style="position: absolute; left: 0;top: 0;">
|
|
<img src="./img/title_icon.png" class="video_canvas_icon">
|
|
<span class="video_canvas_text">驱鸟双目相机（红外）</span>
|
|
</div>
|
|
<video id="shipin2_video1" controls ></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var now_href = window.location.href;
|
|
var host = now_href.split("/");
|
|
host = host[2];
|
|
if (host.indexOf(":") == -1)
|
|
host = host + ":80";
|
|
else host = host;
|
|
|
|
let playUrlBase = "webrtc://" + host + "/hls/";
|
|
let Apiurl = "/yibin/Rtsp";//API服务器地址，根据后台部署环境可配
|
|
let timer=''
|
|
|
|
//播放摄像头的视频流
|
|
function set(assetId){
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url: '/yibin/videoMonitor/api/sendOriginRtspUrl',
|
|
//url: 'http://192.168.4.143:8070/Rtsp/GetRtspUrl?deviceCode=04565579980226640101%23f11741d796064c05a163d51ed8681070',
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
data: { assetId: assetId },
|
|
success: function (result) {
|
|
console.log('声波装置')
|
|
var camercode = result[0].cameraCode.split('#');
|
|
var rtsp_code = camercode[0];
|
|
|
|
var camercode1 = result[1].cameraCode.split('#');
|
|
var rtsp_code1 = camercode1[0];
|
|
|
|
$.get(Apiurl + "/StopAllStream", function (pushdata, pushstatus) {
|
|
$.get(Apiurl + "/StartPullStream?RtspUrl=" + encodeURIComponent(result[0].rtspURL) + "&StreamName=" + rtsp_code, function (pushdata, pushstatus) {
|
|
var video = document.getElementById('shipin1_video1');
|
|
var url = playUrlBase + rtsp_code;
|
|
var player = new JSWebrtc.Player(url, { video: video, autoplay: true, onPlay: (obj) => { console.log("start play") } });
|
|
// $('.shipin span').html(result[0].cameraName)
|
|
});
|
|
|
|
$.get(Apiurl + "/StartPullStream?RtspUrl=" + encodeURIComponent(result[1].rtspURL) + "&StreamName=" + rtsp_code1, function (pushdata, pushstatus) {
|
|
var video1 = document.getElementById('shipin2_video1');
|
|
var url1 = playUrlBase + rtsp_code1;
|
|
var player1 = new JSWebrtc.Player(url1, { video: video1, autoplay: true, onPlay: (obj) => { console.log("start play") } });
|
|
// $('.shipin span').html(result[0].cameraName)
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
set();
|
|
|
|
function shengBoDevice(){
|
|
$.ajax({
|
|
type:'POST',
|
|
url:"yibin/api/brid/selectBridDeviceList",
|
|
contentType:"application/json",
|
|
data:JSON.stringify({
|
|
|
|
}),
|
|
success:function(res){
|
|
console.log(res)
|
|
for(let i=0;i<res.rows.length;i++){
|
|
let SheBei=res.rows[i].name.slice(4)
|
|
if(res.rows[i].volume1Status==0){
|
|
console.log(SheBei)
|
|
$(`.image${SheBei}`).attr('src','./img/xinhao.gif')
|
|
}else{
|
|
$(`.image${SheBei}`).attr('src','./img/xingHao.png')
|
|
}
|
|
|
|
}
|
|
}
|
|
})
|
|
};
|
|
shengBoDevice()
|
|
timer=setInterval(()=>{
|
|
shengBoDevice()
|
|
},5000)
|
|
|
|
</script>
|
|
|
|
</html>
|