You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
5.1 KiB
HTML
132 lines
5.1 KiB
HTML
<html>
|
|
<script src="webrtcplayer.js"></script>
|
|
<script src="jquery.min.js"></script>
|
|
<body>
|
|
<div class="select">
|
|
<select id = "streets" style="width: 200px;height: 30;">
|
|
</select>
|
|
</div>
|
|
<div id = "videos"></div>
|
|
<!-- <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>
|
|
<script>
|
|
|
|
var body = document.querySelector('body');
|
|
$("#streets").empty();
|
|
var map = {}
|
|
$(function(){
|
|
$.ajax({
|
|
url:'/api/street/list',
|
|
type:'get',
|
|
data:{},
|
|
dataType:'json',
|
|
success:function(data){
|
|
var select = document.getElementById('streets')
|
|
for(var i = 0; i<data.data.length;i++){
|
|
var street = data.data[i]
|
|
var optionDom = document.createElement('option')
|
|
var cameras = []
|
|
if(street.camera1Id != undefined && street.camera1Id != null){
|
|
cameras.push(street.camera1Id)
|
|
}
|
|
if(street.camera2Id != undefined && street.camera2Id != null){
|
|
cameras.push(street.camera2Id)
|
|
}
|
|
map[street.id] = cameras
|
|
var txt = document.createTextNode(street.name)
|
|
optionDom.appendChild(txt)
|
|
optionDom.setAttribute('id',street.id)
|
|
select.appendChild(optionDom)
|
|
if(i == 0){
|
|
autoPlay(street.camera1Id,street.camera2Id)
|
|
}
|
|
|
|
}
|
|
console.log(map)
|
|
},
|
|
error:function(){
|
|
console.log('请求出错！');
|
|
}
|
|
})
|
|
|
|
|
|
});
|
|
|
|
$("#streets").change(function(){
|
|
var item = $(":selected").get(0).getAttribute('id');
|
|
var cameras = map[item]
|
|
console.log("d"+cameras)
|
|
if(cameras.length > 0){
|
|
|
|
autoPlay(cameras[0],cameras[1])
|
|
}
|
|
|
|
});
|
|
|
|
function autoPlay(camera1,camera2){
|
|
|
|
var videos = document.getElementById('videos')
|
|
while(videos.firstChild){
|
|
videos.removeChild(videos.firstChild)
|
|
}
|
|
if(camera1 != null && camera1 != undefined){
|
|
$.ajax({
|
|
url:'/api/camera/'+camera1,
|
|
type:'get',
|
|
data:{},
|
|
dataType:'json',
|
|
success:function(data){
|
|
let camera = data.data;
|
|
console.log("okkk1:"+camera)
|
|
if(camera != null){
|
|
let server = camera.rtcServer + ":" + camera.rtcServerPort;
|
|
var video = document.createElement('video')
|
|
video.setAttribute('id',camera1)
|
|
video.autoplay = true
|
|
video.controls = true
|
|
video.muted = true
|
|
video.style = 'width:700px;'
|
|
video.setAttribute('class','video')
|
|
videos.appendChild(video)
|
|
let player = new WebRtcPlayer(server,camera1,'camera'+camera1);
|
|
}
|
|
|
|
},
|
|
error:function(){
|
|
console.log('请求出错！');
|
|
}
|
|
})
|
|
}
|
|
if(camera2 != null && camera2 != undefined){
|
|
$.ajax({
|
|
url:'/api/camera/'+camera2,
|
|
type:'get',
|
|
data:{},
|
|
dataType:'json',
|
|
success:function(data){
|
|
let camera = data.data;
|
|
console.log("okkk2:"+camera)
|
|
if(camera != null){
|
|
let server = camera.rtcServer + ":" + camera.rtcServerPort;
|
|
var video = document.createElement('video')
|
|
video.setAttribute('id',camera2)
|
|
video.autoplay = true
|
|
video.controls = true
|
|
video.muted = true
|
|
video.style = 'width:700px;'
|
|
video.setAttribute('class','video')
|
|
videos.appendChild(video)
|
|
let player = new WebRtcPlayer(server,camera2,'camera'+camera2);
|
|
}
|
|
|
|
},
|
|
error:function(){
|
|
console.log('请求出错！');
|
|
}
|
|
})
|
|
}
|
|
};
|
|
|
|
</script>
|
|
</html> |