巷道视频
qiushui
4 years ago
parent
3d70ecb6ea
commit
141eaea94d
@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"serverIp": "http://localhost:9007",
|
"serverIp": "http://192.168.8.140:9007",
|
||||||
"webRtcIp": "192.168.8.140:8083"
|
"webRtcIp": "192.168.8.140:8083"
|
||||||
}
|
}
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
<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>
|
||||||
Loading…
Reference in New Issue