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>
|
||
|