用flask框架在html中运行python程序

目录

- app.py

- templates

  - index.html

首先安装Flask和OpenCV库

pip install flask opencv-python

接着创建一个Python脚本,叫做app.py

from flask import Flask, render_template, Response
import cv2

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

def gen_frames():
    while True:
        # 捕获摄像头的实时画面
        cap = cv2.VideoCapture(0)
        ret, frame = cap.read()
        if not ret:
            break

        # 转换为灰度图像
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        # 将图像转换为bytes,以便通过HTTP传输
        ret, buffer = cv2.imencode('.jpg', gray)
        frame = buffer.tobytes()

        # 发送帧
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

        cap.release()

@app.route('/video_feed')
def video_feed():
    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(debug=False, threaded=True)

接着创建一个html文件,叫做index.html,并创建一个templates文件夹,将html文件放在此文件夹中,因为这是Flask默认的模板文件夹

<!DOCTYPE html>
<html>
<head>
    <title>实时摄像头画面</title>
</head>
<body>
    <h1>实时摄像头画面</h1>
    <img src="{{ url_for('video_feed') }}" alt="Video Feed" />
</body>
</html>

最后运行Flask应用程序

python app.py

下面是它们是如何交互和结合在一起的详细说明:

Python代码

1.导入Flask模块和OpenCV库:

from flask import Flask, render_template, Response
import cv2
这里导入了Flask Web框架和OpenCV图像处理库。

2.创建Flask应用实例:

app = Flask(__name__)

创建一个Flask应用实例。
3.定义路由和视图函数:

@app.route('/')
def index():
    return render_template('index.html')

定义了一个根路由/,当访问此路由时,会渲染并返回index.html页面。
4.生成视频帧的函数:

def gen_frames():
    # ...

gen_frames函数用于从摄像头捕获视频帧,将其转换为灰度图像,并编码为JPEG格式,然后作为字节流yield出来。
5.视频流路由:

@app.route('/video_feed')
def video_feed():
    return Response(gen_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

定义了一个/video_feed路由,返回一个实时视频流。视频流通过Response对象发送,其中mimetype设置为multipart/x-mixed-replace,这允许浏览器接收到连续的视频帧。
6.运行Flask应用:

if __name__ == '__main__':

  app.run(debug=False, threaded=True)

如果直接运行此脚本,则启动Flask服务器。

HTML代码 (前端)

1.页面元数据和样式:

<head>
    <meta charset="UTF-8">
    <title>实时灰度摄像头画面</title>
    <style>
        #videoFeed {
            width: 640px;
            height: 480px;
        }
    </style>
</head>

设置页面的字符编码为UTF-8,定义网页标题,并在<style>标签内定义了视频显示区域的宽度和高度。
2.页面内容:

<body>
    <h1>实时灰度摄像头画面</h1>
    <img id="videoFeed" src="" onerror="this.src='{{ url_for('video_feed') }}'">
    <script>
        // ...
    </script>
</body>

<body>标签包含页面的主要内容。<h1>标签显示页面标题。<img>标签用于显示视频流,其id为videoFeed,初始src为空,当加载失败时,会通过onerror事件设置其src为视频流URL。
3.JavaScript定时刷新图像:

<script>
    setInterval(function(){
        document.getElementById('videoFeed').src = '{{ url_for("video_feed") }}';
    }, 100);
</script>

<script>标签内定义了一个JavaScript定时器,每100毫秒刷新一次图像元素的src属性,指向视频流URL。

总结:

  • 当用户访问根URL(/)时,Flask应用渲染并返回index.html页面。
  • index.html页面中的<img>元素通过onerror事件和JavaScript定时器尝试加载视频流。
  • Flask应用中的/video_feed路由响应这些请求,提供实时的视频帧作为JPEG图像流。
  • 用户的浏览器接收到这些帧,并在页面上显示为连续的视频流。
posted @ 2024-05-18 16:43  Wild-bokeyuan  阅读(461)  评论(0编辑  收藏  举报