|
|
|
|
<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 >
|
|
|
|
|
<div class="container-fluid" id="videos" >
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(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>
|
