upload
This commit is contained in:
ascendhuawei
@@ -0,0 +1,39 @@
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
|
||||
dl, dt, dd, ul, ol, li,
|
||||
pre,
|
||||
form, fieldset, legend, button, input, textarea,
|
||||
th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
button, input, select, textarea /* for ie */ {
|
||||
font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
|
||||
address, cite, dfn, em, var { font-style: normal; }
|
||||
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
|
||||
small { font-size: 12px; }
|
||||
|
||||
ul, ol { list-style: none; }
|
||||
|
||||
a { text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
sup { vertical-align: text-top; }
|
||||
sub { vertical-align: text-bottom; }
|
||||
|
||||
legend { color: #000; } /* for ie6 */
|
||||
fieldset, img { border: 0; }
|
||||
button, input, select, textarea { font-size: 100%; }
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
|
||||
summary, time, mark, audio, video {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
mark { background: #ff0; }
|
||||
@@ -0,0 +1,77 @@
|
||||
#dlg-mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
background-color: rgba(0,0,0,0.75)/*rgba(140,140,140,0.4)*/;
|
||||
}
|
||||
|
||||
#dlg-mask * {
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box; /* Firefox */
|
||||
-webkit-box-sizing: border-box; /* Safari */
|
||||
}
|
||||
|
||||
#dlg-box {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
z-index: 200001;
|
||||
padding: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.88);
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#dlg-box h1 {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
#dlg-box p, #dlg-box input {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
#dlg-box p {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
#dlg-box input {
|
||||
height: 29px;
|
||||
cursor: text;
|
||||
}
|
||||
#dlg-box div {
|
||||
height: 30px;
|
||||
}
|
||||
#dlg-box div span {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 64px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
color: #187be1;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#dlg-box div span:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.dot {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
body{
|
||||
background-color: #edf7f9;
|
||||
font-family: Arial, 黑体, Tahoma;
|
||||
}
|
||||
|
||||
.nav{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #155070;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav_left{
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nav_left img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.nav_left p span{
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.box_top{
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.box_content{
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.content_top{
|
||||
height: 50px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.content_top li{
|
||||
width: 82px;
|
||||
height: 32px;
|
||||
float: left;
|
||||
border: 1px solid #51a8da;
|
||||
margin-right: 5px;
|
||||
color: #51a8da;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content_top li:nth-child(3){
|
||||
background-color: #51a8da;
|
||||
color: #ffffff;
|
||||
}
|
||||
.content_mid{
|
||||
border-top:2px solid #51a8da;
|
||||
padding-top: 15px;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
.mid_list{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-right: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
.mid_list li{
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
line-height: 40px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.mid_list li:nth-child(odd){
|
||||
background-color: #edf7f9;
|
||||
}
|
||||
.mid_list li:nth-child(odd) span:nth-child(2){
|
||||
float: right;
|
||||
}
|
||||
.mid_add{
|
||||
width: 82px;
|
||||
height: 32px;
|
||||
background-color: #51a8da;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content_bot{
|
||||
border-top:2px solid #51a8da;
|
||||
}
|
||||
#mytable th,td{
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
body{
|
||||
background-color: #edf7f9;
|
||||
font-family: Arial, 宋体, Tahoma;
|
||||
}
|
||||
|
||||
.nav{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #155070;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav_left{
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nav_left img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.nav_left p span{
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
.refresh{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -6px 0 0 -6px ;
|
||||
|
||||
}
|
||||
|
||||
.video_top{
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.video_content{
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.video_fps{
|
||||
text-align: right;
|
||||
padding-right: 100px;
|
||||
}
|
||||
.video_inner{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
@@ -0,0 +1,97 @@
|
||||
var dialog = (function Dialog() {
|
||||
var $mask = $("<div id='dlg-mask'></div>");
|
||||
|
||||
//title--
|
||||
//content--object{type[1 for input, 0 for text], text[display in content]}
|
||||
//btnFlag--1 for OK+Cancel, 0 for OK
|
||||
function initHtml(title, content, btnFlag, ok, cancel) {
|
||||
var div = "";
|
||||
div += "<div id='dlg-box' class='dot'>";
|
||||
div += "<h1 class='dot' style=\"margin-bottom:5px\">" + title + "</h1>"
|
||||
div += "<div style=\"width:100%;height:1px;background-color:#ccc;\"></div>";
|
||||
if (content.type == 0) {
|
||||
div += "<p>" + content.text + "</p>"
|
||||
} else if (content.type == 1) {
|
||||
div += "<input type='text' value='" + content.text + "' placeholder='" + content.placeholder + "' autocomplete='off'/>";
|
||||
}
|
||||
if (btnFlag == 0) {
|
||||
div += "<div><span class='ok'>OK</span></div>";
|
||||
} else if (btnFlag == 1) {
|
||||
div += "<div><span class='ok'>OK</span><span class='cancel'>Cancel</span></div>";
|
||||
}
|
||||
div += "</div>";
|
||||
$mask.html(div);
|
||||
$mask.find("input").val($mask.find("input").val());
|
||||
if (content.type == 1) {
|
||||
$mask.find(".ok").on("click", function() {
|
||||
var retText = $mask.find("input").val();
|
||||
hide();
|
||||
if (ok) {
|
||||
ok(retText);
|
||||
}
|
||||
});
|
||||
$mask.find(".cancel").on("click", function() {
|
||||
var retText = $mask.find("input").val();
|
||||
hide();
|
||||
if (cancel) {
|
||||
cancel(retText);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$mask.find(".ok").on("click", function() {
|
||||
hide();
|
||||
if (ok) {
|
||||
ok();
|
||||
}
|
||||
});
|
||||
$mask.find(".cancel").on("click", function() {
|
||||
hide();
|
||||
if (cancel) {
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function calcBoxPos() {
|
||||
var $box = $mask.find("#dlg-box");
|
||||
var mask_w = $mask.outerWidth();
|
||||
var mask_h = $mask.outerHeight();
|
||||
var box_w = $box.outerWidth();
|
||||
var box_h = $box.outerHeight();
|
||||
var pos_left = (mask_w - box_w) / 2 + "px";
|
||||
var pos_top = (mask_h - box_h) / 2 + "px";
|
||||
$box.css("left", pos_left).css("top", pos_top);
|
||||
}
|
||||
|
||||
function show() {
|
||||
$("body").prepend($mask);
|
||||
$mask.css("display", "block");
|
||||
if ($mask.find("input") && $mask.find("input")[0]) {
|
||||
$mask.find("input")[0].focus();
|
||||
}
|
||||
calcBoxPos();
|
||||
$(window).resize(calcBoxPos);
|
||||
}
|
||||
|
||||
function hide() {
|
||||
$mask.css("display", "none");
|
||||
$mask.remove();
|
||||
}
|
||||
|
||||
return {
|
||||
hide: hide,
|
||||
tip: function(title, text, ok) {
|
||||
initHtml(title, { type: 0, text: text }, 0, ok, null);
|
||||
show();
|
||||
},
|
||||
input: function(title, text, placeholder, ok, cancel) {
|
||||
initHtml(title, { type: 1, text: text, placeholder: placeholder }, 1, ok, cancel);
|
||||
show();
|
||||
},
|
||||
confirm: function(title, text, ok, cancel) {
|
||||
initHtml(title, { type: 0, text: text }, 1, ok, cancel);
|
||||
show();
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
var dialog = (function Dialog() { var e = $("<div id='dlg-mask'></div>"); function d(j, h, i, f, g) { var k = ""; k += "<div id='dlg-box' class='dot'>"; k += "<h1 class='dot'>" + j + "</h1>"; if (h.type == 0) { k += "<p>" + h.text + "</p>" } else { if (h.type == 1) { k += "<input type='text' value='" + h.text + "' placeholder='" + h.placeholder + "' autocomplete='off'/>" } } if (i == 0) { k += "<div><span class='ok'>OK</span></div>" } else { if (i == 1) { k += "<div><span class='ok'>OK</span><span class='cancel'>Cancel</span></div>" } } k += "</div>"; e.html(k); e.find("input").val(e.find("input").val()); if (h.type == 1) { e.find(".ok").on("click", function() { var l = e.find("input").val(); b(); if (f) { f(l) } }); e.find(".cancel").on("click", function() { var l = e.find("input").val(); b(); if (g) { g(l) } }) } else { e.find(".ok").on("click", function() { b(); if (f) { f() } }); e.find(".cancel").on("click", function() { b(); if (g) { g() } }) } } function c() { var k = e.find("#dlg-box"); var h = e.outerWidth(); var j = e.outerHeight(); var l = k.outerWidth(); var g = k.outerHeight(); var f = (h - l) / 2 + "px"; var i = (j - g) / 2 + "px"; k.css("left", f).css("top", i) } function a() { $("body").prepend(e); e.css("display", "block"); if (e.find("input") && e.find("input")[0]) { e.find("input")[0].focus() } c(); $(window).resize(c) } function b() { e.css("display", "none"); e.remove() } return { hide: b, tip: function(h, g, f) { d(h, { type: 0, text: g }, 0, f, null); a() }, input: function(j, i, h, f, g) { d(j, { type: 1, text: i, placeholder: h }, 1, f, g); a() }, confirm: function(i, h, f, g) { d(i, { type: 0, text: h }, 1, f, g); a() } } })();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Channels</title>
|
||||
<link rel="stylesheet" href="/static/css/base.css">
|
||||
<link rel="stylesheet" href="/static/css/list.css">
|
||||
<link rel="stylesheet" href="/static/css/dialog.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="nav">
|
||||
<div class="nav_left">
|
||||
<img src="/static/images/logo.png" alt="">
|
||||
<p><span>Presenter Server</span></p>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_top">
|
||||
<span> >View List</span>
|
||||
</div>
|
||||
<div style="width:100%;height:2px;background-color:#ccc;"></div>
|
||||
<div class="box_content">
|
||||
<ul class="content_top">
|
||||
<li class="top_refresh"><img src="/static/images/u1.png" alt=""><span>Refresh</span></li>
|
||||
<li class="top_del"><img src="/static/images/u2.png" alt=""><span>Delete</span></li>
|
||||
</ul>
|
||||
|
||||
<div class="content_bot">
|
||||
<form name="myForm">
|
||||
<table id="mytable" border="1" width="100%">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th><input type="checkbox" id="checkAll"></th>
|
||||
<th>Status</th>
|
||||
<th>View Name</th>
|
||||
</tr>
|
||||
{% for item in listret %}
|
||||
<tr>
|
||||
<td>{{item['id']}}</td>
|
||||
<td><input type="checkbox" name="selectFlag" value="1"></td>
|
||||
{% if item['status'] == 1 %}
|
||||
<td><img src="/static/images/u5.png" alt=""></td>
|
||||
{% else %}
|
||||
<td><img src="/static/images/u6.png" alt=""></td>
|
||||
{% end %}
|
||||
<td ><a class="view_channel" style="cursor:pointer">{{item['name']}}</a></td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/static/js/jquery-1.10.2.min.js"></script>
|
||||
<script src="/static/js/dialog.js"></script>
|
||||
<script>
|
||||
$("#checkAll").click(function() {
|
||||
if (this.checked) {
|
||||
$("input[name='selectFlag']:checkbox").each(function() {
|
||||
$(this).attr("checked", true);
|
||||
})
|
||||
} else { //反之 取消全选
|
||||
$("input[name='selectFlag']:checkbox").each(function() {
|
||||
$(this).attr("checked", false);
|
||||
})
|
||||
}
|
||||
});
|
||||
$(".view_channel").click(function(){
|
||||
var url = "/view?name=" + encodeURIComponent($(this).text());
|
||||
window.open(url);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<script>
|
||||
function checkNameValidate()
|
||||
{
|
||||
var name = $("#cname").val().trim();
|
||||
if (name.length == 0)
|
||||
{
|
||||
dialog.tip("Tips","Channel name can not be empty");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (name.length > 25)
|
||||
{
|
||||
dialog.tip("Tips", "Length of channel name should less than 25" ,function(){});
|
||||
return false;
|
||||
}
|
||||
for (var i = 0; i < name.length; i++)
|
||||
{
|
||||
var c = name.charAt(i).charCodeAt();
|
||||
var flag = ((c >= 48 && c <= 57) || (c >= 97 && c<= 122) || (c>= 65 && c <= 90) || (c == 47));
|
||||
if (false == flag)
|
||||
{
|
||||
dialog.tip("Tips", "Channel name only support 0-9, a-z, A-Z /" ,function(){});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
$(".top_create").click(function () {
|
||||
if($(".content_mid").css("display")=="none"){
|
||||
$(".content_mid").css("display","block").animate({height:"100px"});
|
||||
}else{
|
||||
$(".content_mid").animate({height:"0"}).css("display","none");
|
||||
}
|
||||
});
|
||||
$(".mid_add").click(function () {
|
||||
var rowlen = $("#mytable").find("tr").length;
|
||||
if (rowlen >= 11)
|
||||
{
|
||||
dialog.tip("Tips", "Presenter supports up to 10 channels" ,function(){});
|
||||
return;
|
||||
}
|
||||
|
||||
//check
|
||||
if (true == checkNameValidate())
|
||||
{
|
||||
var url = "/add?"+"name=" + encodeURIComponent($("#cname").val().trim()) +"&time="+(new Date().getTime());
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data)
|
||||
{
|
||||
if (data["ret"] == "success")
|
||||
{
|
||||
window.location.reload()
|
||||
}
|
||||
else
|
||||
{
|
||||
dialog.tip("Tips", data["msg"], function(){});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
$(".top_refresh").click(function () {
|
||||
window.location.reload();
|
||||
});
|
||||
$(".top_del").click(function () {
|
||||
if($("input[name='selectFlag']").is(":checked")){
|
||||
var msg = "";
|
||||
$("input[name='selectFlag']:checked").each(function() {
|
||||
// 遍历选中的checkbox
|
||||
tr = $(this).parents("tr");
|
||||
td = $(tr).find("td");
|
||||
msg += encodeURIComponent($(td).eq(3).text());
|
||||
msg += ",";
|
||||
});
|
||||
dialog.confirm("Tips", "Are you sure to delete ？", function(){
|
||||
var url = "/del?"+"time="+(new Date().getTime())+"&name="+msg;
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data)
|
||||
{
|
||||
if (data["ret"] == "success")
|
||||
{
|
||||
window.location.reload()
|
||||
}
|
||||
else
|
||||
{
|
||||
dialog.tip("Tips", data["msg"], function(){});
|
||||
}
|
||||
},
|
||||
});
|
||||
}, function(){});
|
||||
}else{
|
||||
dialog.tip("Tips", "Please select one item at least", function(){});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>view</title>
|
||||
<link rel="stylesheet" href="/static/css/base.css">
|
||||
<link rel="stylesheet" href="/static/css/testvideo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="video_box">
|
||||
<div class="nav">
|
||||
<div class="nav_left">
|
||||
<img src="/static/images/logo.png" alt="">
|
||||
<p><span>Presenter Server</span></p>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="video_top">
|
||||
<span> >view</span>
|
||||
</div>
|
||||
<div style="width:100%;height:2px;background-color:#ccc;"></div>
|
||||
<div class="video_content">
|
||||
<div class="video_fps" id='fpswapper' hidden><p><span> channel name: {{ channel_name }} </span> <span> fps:</span><span id='fpsval'></span></p></div>
|
||||
<div class="video_inner">
|
||||
<img src="/static/images/loading.gif" id = "loading" board = "1" alt=""/>
|
||||
<!-- <img id = "load_media" hidden width = "1024px" board = "1" alt=""/> -->
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/static/js/jquery-1.10.2.min.js"></script>
|
||||
<script>
|
||||
|
||||
var canvas=document.getElementById("canvas")
|
||||
var ctx=canvas.getContext("2d")
|
||||
$('#fpswapper').hide()
|
||||
$('#loading').hide()
|
||||
|
||||
function startViewVideo(){
|
||||
$('#loading').show()
|
||||
$('#canvas').hide()
|
||||
|
||||
var image = new Image();
|
||||
var wsProtocol = "ws://";
|
||||
if (window.location.protocol == "https:"){
|
||||
wsProtocol = "wss://";
|
||||
}
|
||||
var wsUrl = wsProtocol + window.location.host+"/websocket?req={{req}}&name={{channel_name}}";
|
||||
var ws = new WebSocket(wsUrl);
|
||||
var onmessageflag = false;
|
||||
|
||||
ws.onopen = function() {
|
||||
ws.send('next');
|
||||
};
|
||||
var count = 0;
|
||||
var timestart = 0;
|
||||
|
||||
ws.onmessage = function (evt) {
|
||||
$('#loading').hide()
|
||||
$('#canvas').show()
|
||||
var data = JSON.parse(evt.data)
|
||||
var rectangles = []
|
||||
if ('ok' == data['status']){
|
||||
$('#fpsval').text(data.fps);
|
||||
$('#loading').hide();
|
||||
// $('#load_media').show();
|
||||
var src = "data:image/jpeg;base64," + data['image'];
|
||||
// $('#load_media').attr('src', src);
|
||||
if (data['type'] == 'video'){
|
||||
$('#fpswapper').show();
|
||||
rectangles = data['rectangle_list']
|
||||
}
|
||||
var wantedWidth = 1024
|
||||
var img = new Image()
|
||||
img.src = src
|
||||
img.onload=function(){
|
||||
scale_factor = wantedWidth/img.width
|
||||
canvas.setAttribute("width",1024)
|
||||
canvas.setAttribute("height",img.height*scale_factor)
|
||||
ctx.strokeStyle="yellow"
|
||||
ctx.font="30px serif"
|
||||
ctx.fillStyle="yellow"
|
||||
ctx.strokeStyle="yellow"
|
||||
ctx.font="30px serif"
|
||||
ctx.fillStyle="yellow"
|
||||
ctx.drawImage(img,0,0, wantedWidth, img.height*scale_factor)
|
||||
for (var index in rectangles){
|
||||
var pos= rectangles[index].slice(0,4) //
|
||||
for (var i in pos){
|
||||
pos[i] = pos[i]*scale_factor
|
||||
}
|
||||
var msg = rectangles[index].slice(4,5)
|
||||
//add space between msg and face
|
||||
//if upper space is not enough show the msg at the bottom
|
||||
if(50>pos[1]){
|
||||
// ctx.fillText(msg,pos[0],pos[3]+50)
|
||||
}
|
||||
else{
|
||||
// ctx.fillText(msg,pos[0],pos[1]-10)
|
||||
}
|
||||
ctx.beginPath()
|
||||
// 1/3 space draw line
|
||||
if(msg == 'points'){
|
||||
ctx.strokeStyle = "#0F4F00"
|
||||
ctx.arc(pos[0],pos[1],6,0,2*Math.PI)
|
||||
ctx.fillStyle = "#6CFF33"
|
||||
ctx.fill()
|
||||
|
||||
}else if(msg == 'hand_box'){
|
||||
ctx.strokeStyle = "#FF0000"
|
||||
ctx.lineWidth = 5
|
||||
ctx.moveTo(pos[0],pos[1])
|
||||
ctx.lineTo(pos[2],pos[1])
|
||||
ctx.moveTo(pos[2],pos[1])
|
||||
ctx.lineTo(pos[2],pos[3])
|
||||
ctx.moveTo(pos[0],pos[1])
|
||||
ctx.lineTo(pos[0],pos[3])
|
||||
ctx.moveTo(pos[0],pos[3])
|
||||
ctx.lineTo(pos[2],pos[3])
|
||||
// }else if(msg == 'hand_point'){
|
||||
// ctx.strokeStyle = "#33FAFF"
|
||||
// ctx.arc(pos[0],pos[1],3,0,2*Math.PI)
|
||||
// ctx.fillStyle = "#33FAFF"
|
||||
// ctx.fill()
|
||||
// }else if(msg == 'hand'){
|
||||
// ctx.strokeStyle = "#FC33FF"
|
||||
// ctx.lineWidth = 3
|
||||
// ctx.moveTo(pos[0],pos[1])
|
||||
// ctx.lineTo(pos[2],pos[3])
|
||||
|
||||
}else if(msg == 'body'){
|
||||
ctx.strokeStyle = "#FFF700"
|
||||
ctx.lineWidth = 5
|
||||
ctx.moveTo(pos[0],pos[1])
|
||||
ctx.lineTo(pos[2],pos[3])
|
||||
}else{
|
||||
ctx.font = "30px Arial";
|
||||
ctx.lineWidth = 5
|
||||
ctx.fillStyle = "#33FAFF"
|
||||
ctx.fillText(msg, 200, 200);
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
ws.send('next');
|
||||
}
|
||||
}
|
||||
startViewVideo();
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user