first commit

WebRoot/jsp/work/showVideo.jsp

@@ -0,0 +1,128 @@
+<%@ page language="java" pageEncoding="UTF-8"%>
+<style type="text/css">
+    .select2-container .select2-selection--single{
+      height:34px;
+      line-height: 34px;
+    }
+    .select2-selection__arrow{
+    margin-top:3px;
+    }
+</style>
+<script type="text/javascript">
+    var websocket = null;
+    var restartDialog;
+    //判断当前浏览器是否支持WebSocket
+    if ('WebSocket' in window) {
+      var time = '${time}';
+      if(time==null || time==''){
+        time="now";
+      }
+      $.post(ext.contextPath + '/work/camera/getCameraById.do',{id:'${id}'},function(data){
+            var camera = JSON.parse(data);
+            websocket = new WebSocket("${ws}/videoWebSocket/"+camera.type+"/"+camera.url+"/"+camera.username+"/"+camera.password+"/"+camera.channel+"/"+time+"/${uuid}/standard");
+            websocket.onerror = function () {
+            };
+
+            //连接成功建立的回调方法
+            websocket.onopen = function () {
+              console.info('消息滚动websocker开启');
+            }
+            //接收到消息的回调方法
+            websocket.onmessage = function (event) {
+              // var result= JSON.parse(event.data);
+              $("#show_video").attr("src", event.data);
+            }
+            websocket.onclose = function () {
+              closeWebSocket();
+            }
+          })
+      //websocket = new WebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/${id}/"+time+"/${uuid}");
+    }
+    else {
+      alert('当前浏览器 Not support websocket')
+    }
+
+    //连接发生错误的回调方法
+    // websocket.onerror = function () {
+    // };
+
+    //连接成功建立的回调方法
+    // websocket.onopen = function () {
+    //   console.info('消息滚动websocker开启');
+    // }
+
+    //接收到消息的回调方法
+    // websocket.onmessage = function (event) {
+    //   var result= JSON.parse(event.data);
+    //   $("#show_video").attr("src", "data:image/*;base64," + result.data);
+    // }
+
+    //连接关闭的回调方法
+    // websocket.onclose = function () {
+    //   closeWebSocket();
+    // }
+
+
+
+  //关闭WebSocket连接
+    function closeWebSocket() {
+      websocket.onclose = function () {}; // disable onclose handler first
+      websocket.close();
+    }
+
+    /*function max(id){
+      $('#'+id).width($('#'+id).width()*1.5);
+      $('#'+id).height($('#'+id).height()*1.5);
+    }*/
+    function doClose() {
+      $.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do',{id:'${id}',time:time,uuid:'${uuid}'},function(){
+      })
+      closeModal('subModal');
+      //location.reload();
+    }
+
+    function domin(){
+      $('#modal-content').width(600);
+      $('#modal-content').height(450);
+      $('#show_video').width(540);
+      $('#show_video').height(300);
+    }
+
+    function domid(){
+      $('#modal-content').width(720);
+      $('#modal-content').height(540);
+      $('#show_video').width(660);
+      $('#show_video').height(390);
+    }
+
+    function domax(){
+      $('#modal-content').width(860);
+      $('#modal-content').height(675);
+      $('#show_video').width(820);
+      $('#show_video').height(520);
+    }
+
+</script>
+<div class="modal fade" id="subModal" >
+  <div class="modal-dialog">
+    <div class="modal-content" id="modal-content" style="width:600px;height:450px;">
+      <div class="modal-header">
+        <h4 class="modal-title">视频展示</h4>
+      </div>
+      <div class="modal-body">
+        <div style="padding: 0px">
+            <!-- <p style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷体">视频显示</p> -->
+            <img id="show_video" style="width: 540px;height: 300px;border:1px solid black;" src="" alt="正在加载。。。">
+        </div>
+      </div>
+      <div class="modal-footer">
+      <button type="button" class="btn btn-default"  onclick="domin()">小</button>
+      <button type="button" class="btn btn-default"  onclick="domid()">中</button>
+      <button type="button" class="btn btn-default"  onclick="domax()">大</button>
+        <button type="button" class="btn btn-default"  onclick="doClose()">关闭</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>