### 使用 OpenCV 将图像流传输到网页 为了实现实时图像流通过浏览器访问，通常采用的方式是将捕获的图像编码成JPEG格式并通过HTTP服务器发送给客户端。Python结合Flask框架能够轻松创建这样的Web服务。 #### 创建 Flask Web 应用程序并集成 OpenCV 流媒体 1. **安装必要的库** 安装所需的 Python 包来支持这个过程： ```bash pip install flask opencv-python-headless numpy ``` 2. **编写代码以启动 HTTP 服务器并将视频帧作为响应返回** 下面是一个简单的例子，展示了如何读取摄像头输入，并将其转换为适合在网络上传输的形式[^1]。 ```python from flask import Flask, Response import cv2 import numpy as np app = Flask(__name__) camera = cv2.VideoCapture(0) def gen_frames(): while True: success, frame = camera.read() if not success: break else: ret, buffer = cv2.imencode('.jpg', frame) frame = buffer.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') @app.route('/video_feed') def video_feed(): return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame') if __name__ == '__main__': app.run(host="0.0.0.0", port=5000) ``` 这段脚本定义了一个名为 `gen_frames` 的函数用于获取每一帧的数据，并对其进行处理使其成为 JPEG 编码后的字节串形式；接着设置了路由 `/video_feed` 来提供多媒体数据流接口，最后运行应用程序监听所有 IP 地址上的端口 5000。 3. **前端 HTML 页面展示实时视频流** 为了让用户能够在浏览器中查看来自上述服务器提供的实时视频源，可以在HTML页面里嵌入如下所示的对象标签或使用JavaScript Fetch API加载MJPEG流: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Video Stream</title> </head> <body> <h1>Live Video Streaming with OpenCV and Flask</h1> <img src="/video_feed"/> </body> </html> ``` 当打开该HTML文件所在的URL地址（例如 http://localhost:5000），应该可以看到由连接至计算机的摄像设备所捕捉的画面被持续更新显示出来。