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.
110 lines
4.0 KiB
HTML
110 lines
4.0 KiB
HTML
4 years ago
|
<html>
|
||
|
|
<script src="webrtcplayer.js"></script>
|
||
|
|
<script src="jquery.min.js"></script>
|
||
|
|
<body>
|
||
|
|
<div class="select">
|
||
|
|
<select id = "streets">
|
||
|
|
</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(){
|
||
|
|
let ip ;
|
||
|
|
$.getJSON("config.json", function (data){
|
||
|
|
console.log(data)
|
||
|
|
ip = data["serverIp"]
|
||
|
|
let webRtc = data["webRtcIp"]
|
||
|
|
WebRtcPlayer.setServer(webRtc);
|
||
|
|
$.ajax({
|
||
|
|
url:ip+'/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(item)
|
||
|
|
if(cameras.length > 0){
|
||
|
|
camera2 = null
|
||
|
|
if(cameras.length >1){
|
||
|
|
camera2 = cameras[1]
|
||
|
|
}
|
||
|
|
autoPlay(cameras[0],camera2)
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function autoPlay(camera1,camera2){
|
||
|
|
|
||
|
|
var videos = document.getElementById('videos')
|
||
|
|
while(videos.firstChild){
|
||
|
|
videos.removeChild(videos.firstChild)
|
||
|
|
}
|
||
|
|
if(camera1 != null && camera1 != undefined){
|
||
|
|
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(camera1,'camera'+camera1);
|
||
|
|
player.load('camera'+camera1)
|
||
|
|
}
|
||
|
|
if(camera2 != null && camera2 != undefined){
|
||
|
|
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(camera2,'camera'+camera2);
|
||
|
|
player.load('camera'+camera2)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|