【学长笔记】Python-摄像头画片传输到网页前端显示

如何快速使用python将摄像头画面传输到前端页面上

Small Joe

1591人浏览 · 2023-03-07 17:13:35

Small Joe · 2023-03-07 17:13:35 发布

摄像头画片如何传输到网页前端显示

—————————————————————————————————

话不多说，直接上代码！

主要使用了Opencv读取摄像头，经过Flask渲染到前端页面中。

以下为后端代码

import cv2
from flask import Flask, render_template, Response

app = Flask(__name__)

camera = cv2.VideoCapture(0)

def generate_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('/')
def index():
    return render_template('index.html')  # 渲染HTML模板

@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)

以下是index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{url_for('video_feed')}}">
</body>
</html>