main
yiming
4 years ago
parent
4968eb592c
commit
e093ceef1f
File diff suppressed because it is too large
Load Diff
@ -1,47 +1,145 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>视觉大屏</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<script src="webrtcplayer.js"></script>
|
||||
<script src="jquery.min.js"></script>
|
||||
<body>
|
||||
<!-- <video id="camera1" class="camera" autoplay controls muted style="width:700px;"></video>
|
||||
<video id="camera2" class="camera" autoplay controls muted style="width:700px;"></video> -->
|
||||
<body >
|
||||
<div class="container-fluid" id="videos" >
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var body = document.querySelector('body');
|
||||
$(function(){
|
||||
let ip ;
|
||||
$.getJSON("config.json", function (data){
|
||||
console.log(data)
|
||||
ip = data["serverIp"]
|
||||
let webRtc = data["webRtcIp"]
|
||||
WebRtcPlayer.setServer(webRtc);
|
||||
$.ajax({
|
||||
url:ip+'/api/realTime/allCameras',
|
||||
type:'get',
|
||||
data:{},
|
||||
dataType:'json',
|
||||
success:function(data){
|
||||
for(camera of data.data){
|
||||
var video = document.createElement('video')
|
||||
video.setAttribute('id',camera.id)
|
||||
video.autoplay = true
|
||||
video.controls = true
|
||||
video.muted = true
|
||||
video.style = 'width:700px;'
|
||||
video.setAttribute('class','video')
|
||||
body.appendChild(video)
|
||||
let player = new WebRtcPlayer(camera.id,'camera'+camera.id);
|
||||
player.load('camera'+camera.id)
|
||||
}
|
||||
},
|
||||
error:function(){
|
||||
console.log('请求出错！');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$(function(){
|
||||
let cameras=[];
|
||||
$.ajax({
|
||||
url:'/api/realTime/allCameras',
|
||||
type:'get',
|
||||
data:{},
|
||||
async:false,
|
||||
dataType:'json',
|
||||
success:function(data){
|
||||
cameras = data.data;
|
||||
console.log(cameras);
|
||||
row = getQueryVariable("row");
|
||||
column = getQueryVariable("column");
|
||||
var videos = document.getElementById('videos');
|
||||
let index = 0;
|
||||
for(var i = 0;i<row;i++){
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute("class","row");
|
||||
div.setAttribute("style","height: calc(100% / "+row+");")
|
||||
for(var j = 0;j<column;j++){
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute("class","col-md-"+12/column);
|
||||
video.autoplay = true;
|
||||
video.controls = true;
|
||||
video.muted = true;
|
||||
video.setAttribute("style","padding-left: 0;padding-right: 0;object-fit: fill;");
|
||||
if(index < cameras.length){
|
||||
let camera = cameras[index];
|
||||
|
||||
video.setAttribute("id","camera"+camera.id)
|
||||
index++;
|
||||
}
|
||||
div.appendChild(video);
|
||||
}
|
||||
videos.appendChild(div);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
autoPlay(cameras);
|
||||
}});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
function autoPlay(cameras){
|
||||
for(var i = 0; i<cameras.length;i++){
|
||||
console.log(cameras[i])
|
||||
let server = cameras[i].rtcServer + ":" + cameras[i].rtcServerPort;
|
||||
let player = new WebRtcPlayer(server,"camera"+cameras[i].id,'camera'+cameras[i].id);
|
||||
player.load('camera'+cameras[i].id);
|
||||
}
|
||||
}
|
||||
function getQueryVariable(variable){
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i=0;i<vars.length;i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if(pair[0] == variable){return pair[1];}
|
||||
}
|
||||
return(false);
|
||||
}
|
||||
|
||||
// var body = document.querySelector('body');
|
||||
// $(function(){
|
||||
// let ip ;
|
||||
// $.getJSON("config.json", function (data){
|
||||
// console.log(data)
|
||||
// ip = data["serverIp"]
|
||||
// let webRtc = data["webRtcIp"]
|
||||
// WebRtcPlayer.setServer(webRtc);
|
||||
// $.ajax({
|
||||
// url:ip+'/api/realTime/allCameras',
|
||||
// type:'get',
|
||||
// data:{},
|
||||
// dataType:'json',
|
||||
// success:function(data){
|
||||
// for(camera of data.data){
|
||||
// var video = document.createElement('video')
|
||||
// video.setAttribute('id',camera.id)
|
||||
// video.autoplay = true
|
||||
// video.controls = true
|
||||
// video.muted = true
|
||||
// video.style = 'width:700px;'
|
||||
// video.setAttribute('class','video')
|
||||
// body.appendChild(video)
|
||||
// let player = new WebRtcPlayer(camera.id,'camera'+camera.id);
|
||||
// player.load('camera'+camera.id)
|
||||
// }
|
||||
// var de = document.documentElement;
|
||||
// if (de.requestFullscreen) {
|
||||
// de.requestFullscreen();
|
||||
// } else if (de.mozRequestFullScreen) {
|
||||
// de.mozRequestFullScreen();
|
||||
// } else if (de.webkitRequestFullScreen) {
|
||||
// de.webkitRequestFullScreen();
|
||||
// }
|
||||
|
||||
// },
|
||||
// error:function(){
|
||||
// console.log('请求出错！');
|
||||
// }
|
||||
// })
|
||||
// });
|
||||
|
||||
|
||||
// });
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
/* 固定容器高度 溢出隐藏 */
|
||||
body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
.container-fluid > .row {
|
||||
height: calc(100% / 4);
|
||||
}
|
||||
.container-fluid > .row > video {
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
Loading…
Reference in New Issue