目录
- 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="" one rror="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图像流。 - 用户的浏览器接收到这些帧，并在页面上显示为连续的视频流。