### Vue 前端接收 Flask 后端视频流的实现方案 #### 1. 使用 HTML5 `<video>` 标签结合 Flask 提供的视频流接口 Vue 前端可以通过标准的 HTML5 `<video>` 元素来展示来自 Flask 后端的视频流。Flask 需要提供一个特定的路由，用于返回视频帧数据（通常是以二进制形式）。前端只需将此路由作为 `<video>` 的 `src` 属性值即可。 ##### Flask 后端代码示例 以下是一个简单的 Flask 示例，它通过 `/video_feed` 路由发送视频流： ```python from flask import Flask, Response import cv2 app = Flask(__name__) def generate_frames(): camera = cv2.VideoCapture(0) # 打开默认摄像头 while True: success, frame = camera.read() if not success: break ret, buffer = cv2.imencode('.jpg', frame) frame_bytes = buffer.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n') @app.route('/video_feed') def video_feed(): return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame') if __name__ == "__main__": app.run(debug=True) ``` ##### Vue 前端代码示例 在 Vue 组件中，可以直接设置 `<video>` 元素的 `src` 属性指向 Flask 提供的视频流接口： ```html <template> <div> <h3>实时视频流</h3> <video autoplay playsinline muted width="640" height="480"> <source :src="streamUrl" type="multipart/x-mixed-replace;boundary=frame" /> Your browser does not support the video tag. </video> </div> </template> <script> export default { data() { return { streamUrl: "http://localhost:5000/video_feed", // 替换为实际的 Flask API 地址 }; }, }; </script> ``` 上述方法利用了 HTML5 `<video>` 对 MIME 类型的支持，直接从后端拉取视频流并播放[^2]。 --- #### 2. 使用 WebSocket 实现低延迟视频流传输 如果需要更低的延迟或者更高的灵活性，可以考虑使用 WebSocket 进行视频流传输。这种方式适合实时性要求较高的场景，比如在线会议或监控系统。 ##### Flask 后端代码示例 为了支持 WebSocket，可以使用 `Flask-SocketIO` 或者原生 Python 的 WebSocket 库。以下是一个基于 `Flask-SocketIO` 的简单实现： ```python from flask import Flask from flask_socketio import SocketIO, emit import base64 import cv2 app = Flask(__name__) socketio = SocketIO(app) def capture_frame(): camera = cv2.VideoCapture(0) while True: success, frame = camera.read() if not success: continue _, buffer = cv2.imencode('.jpg', frame) jpg_as_text = base64.b64encode(buffer).decode('utf-8') socketio.emit('new_frame', {'image': jpg_as_text}) @socketio.on('connect') def on_connect(): print("Client connected!") capture_frame() if __name__ == '__main__': socketio.run(app, debug=True) ``` ##### Vue 前端代码示例 在 Vue 中，可以通过监听 WebSocket 消息动态更新页面上的图像内容： ```html <template> <div> <h3>WebSocket 视频流</h3> <img :src="currentFrame" alt="Video Stream" style="width: 640px; height: 480px;" /> </div> </template> <script> export default { data() { return { currentFrame: null, }; }, created() { const socket = new WebSocket("ws://localhost:5000/socket.io/?EIO=4&transport=websocket"); socket.addEventListener("message", (event) => { try { const data = JSON.parse(event.data); if (data.new_frame && data.image) { this.currentFrame = `data:image/jpeg;base64,${data.image}`; } } catch (error) { console.error("Error parsing message:", error); } }); }, }; </script> ``` 这种方法通过 WebSocket 将每一帧图片以 Base64 编码的形式传递给前端，并动态更新 `<img>` 元素的内容[^3]。 --- #### 3. 结合 MJPEG 流的方式 MJPEG 是一种常见的视频流格式，特别适合轻量级应用场景。Flask 可以生成 MJPEG 数据流，而前端只需要通过 `<video>` 或 `<img>` 标签加载该流。 ##### Flask 后端代码示例 ```python from flask import Flask, Response import cv2 app = Flask(__name__) def mjpeg_stream(): camera = cv2.VideoCapture(0) while True: success, frame = camera.read() if not success: break ret, buffer = cv2.imencode('.jpg', frame) frame_bytes = buffer.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n') @app.route('/mjpeg_feed') def mjpeg_feed(): return Response(mjpeg_stream(), mimetype='multipart/x-mixed-replace; boundary=frame') if __name__ == "__main__": app.run(debug=True) ``` ##### Vue 前端代码示例 ```html <template> <div> <h3>MJPEG 视频流</h3> <img :src="streamUrl" alt="MJPEG Stream" style="width: 640px; height: 480px;" /> </div> </template> <script> export default { data() { return { streamUrl: "http://localhost:5000/mjpeg_feed", }; }, }; </script> ``` 这种实现方式简单高效，尤其适用于不需要复杂交互的场景[^4]。 --- ### 总结 根据不同的需求和性能指标，可以选择合适的技术栈来实现 Vue 前端与 Flask 后端之间的视频流传送。HTML5 `<video>` 标签是最简便的方法之一，而 WebSocket 更加灵活但增加了开发复杂度。MJEPG 方式则是介于两者之间的一种折衷方案。