157 lines
5.0 KiB
Plaintext
157 lines
5.0 KiB
Plaintext
|
<!DOCTYPE html>
|
|||
|
|
<%@page import="com.sipai.tools.CommString"%>
|
|||
|
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ page import="java.net.URLDecoder"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<% request.setAttribute("ONE_STRING", CommString.ONE_STRING); %>
|
|||
|
|
<% request.setAttribute("TWO_STRING", CommString.TWO_STRING); %>
|
|||
|
|
<% request.setAttribute("ZERO_STRING", CommString.ZERO_STRING); %>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
<head>
|
|||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
|||
|
|
<link href="CSS/components-md.css" rel="stylesheet" id="style_components" type="text/css" />
|
|||
|
|
<link href="CSS/plugins-md.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
|
|||
|
|
<script src="node_modules/jquery-backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
.vimage {
|
|||
|
|
float: left;
|
|||
|
|
width: 30%;
|
|||
|
|
height: 100%;
|
|||
|
|
min-height: 32px;
|
|||
|
|
max-height: 60px;
|
|||
|
|
}
|
|||
|
|
.center-vertical{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var websocket = null;
|
|||
|
|
var restartDialog;
|
|||
|
|
//判断当前浏览器是否支持WebSocket
|
|||
|
|
if ('WebSocket' in window) {
|
|||
|
|
/*var time = $('#datetimepicker').val();
|
|||
|
|
if(time==null || time==''){
|
|||
|
|
time=now;
|
|||
|
|
}*/
|
|||
|
|
websocket = new ReconnectingWebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/now");
|
|||
|
|
}
|
|||
|
|
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连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
|||
|
|
window.onbeforeunload = 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 zhibo(){
|
|||
|
|
closeWebSocket();
|
|||
|
|
setInterval(
|
|||
|
|
websocket.open(),3000
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function huifang(){
|
|||
|
|
closeWebSocket();
|
|||
|
|
console.log(websocket)
|
|||
|
|
if(websocket === null) {
|
|||
|
|
websocket = new ReconnectingWebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/42");
|
|||
|
|
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连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
|||
|
|
window.onbeforeunload = function () {
|
|||
|
|
closeWebSocket();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function(){
|
|||
|
|
$('#datetimepicker').datetimepicker();
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<body onload="initMenu();" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<!-- 引用top -->
|
|||
|
|
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- Main content -->
|
|||
|
|
<section class="content container-fluid " style="padding:0;">
|
|||
|
|
<!-- 20200617 Tab Menu @niu -->
|
|||
|
|
<div class="hor-menu hor-menu-light">
|
|||
|
|
<div class="nth-tabs" id="main-tabs"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: 20px">
|
|||
|
|
<p style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷体">视频显示</p>
|
|||
|
|
<img id="show_video" style="width: 534px;height: 300px;border:1px solid black;" src="" ondblclick="max(this.id);" alt="正在加载。。。">
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: 20px">
|
|||
|
|
<button onclick="zhibo();">切换直播</button>
|
|||
|
|
<input id="datetimepicker" type="text">
|
|||
|
|
<button onclick="huifang();">切换回放</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!-- /.content -->
|
|||
|
|
</div>
|
|||
|
|
<%--<jsp:include page="/jsp/bottom.jsp"></jsp:include>--%>
|
|||
|
|
<jsp:include page="/jsp/side.jsp"></jsp:include>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|