ascendhuawei
156 lines
5.7 KiB
HTML
156 lines
5.7 KiB
HTML
<!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>
|