前后端结合实现实时监控检测-face

前后端结合实现实时监控检测-face

概述

  • 需要一个方法来解决调用同步视频流并检测视频内容的过程

详述

  • 结合flask和opencv，配合yolov3-tiny完成的实时检测，不采用websocket和前后端分离，能够迅速部署项目

难点

  • 同步传输不是关键，关键在于同步的过程中需要对当前画面进行处理，处理之后才是同步内容，而且函数的调用层在视图层

解决问题和过程

使用python的生成器，yield的性质是保存并返回，所以可以在停留在当前帧的基础上返回当前帧，关键代码如下

@app.route('/watch')
def index():
    return render_template("realtime.html")
def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

@app.route('/api/user/real/')
def videoreal():
    return Response(gen(VideoCamera()),mimetype='multipart/x-mixed-replace; boundary=frame')
  • realtime.html 渲染界面的文件，帧画面就嵌入在其中，将videoreal的路径嵌入url_for（jinjia2自带的模板函数）中
  • gen() 外面套一层循环保证实时切帧

realtime.html的body，重点在url_for,jinjia2模板函数，用于重定向

<body>
    <div class="show">
        <div class="main">
            <div class="top">
                <div class="container-small">
                    <div class="left">
                        <img class="img" src="{{ url_for('videoreal') }}">
                    </div>
                    <div class="right">
                        <div class="container-small">
                <h1 class="title-1">
                    实时视频
                </h1>
                <div class="title_group">
                    <h2 class="title-english">
                        REALTIME
                    </h2>
                    <h2 class="title-english">
                        VIDEO
                    </h2>
                </div>
            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">

        </div>
    </div>
</body>

顺利解决✌

posted @ 2021-06-28 15:13  火言火又  阅读(443)  评论(0)    收藏  举报