upload

2020-09-16 11:50:53 -07:00
commit a61dda4612
97 changed files with 15410 additions and 0 deletions
@@ -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>&nbsp;&nbsp;&nbsp;&nbsp;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>