巷道视频

4 years ago · 141eaea94d
parent 3d70ecb6ea
commit 141eaea94d
3 changed files with 132 additions and 22 deletions
--- a/config.json
+++ b/config.json
@ -1,4 +1,4 @@
 {
-    "serverIp": "http://localhost:9007",
+    "serverIp": "http://192.168.8.140:9007",
    "webRtcIp": "192.168.8.140:8083"
 }
--- a/index.html
+++ b/index.html
@ -16,28 +16,28 @@
            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)
+              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('请求出错！');
              }
-            },
-            error:function(){
-                console.log('请求出错！');
-            }
-          })
+            })
          });
          
          
--- a/street.html
+++ b/street.html
@ -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>