Python-摄像头画片传输到网页前端显示_python读取到摄像头画面显示在html上

作者：神奇cpp | 2024-07-01 10:01:08

踩

python读取到摄像头画面显示在html上

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

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

话不多说，直接上代码！

主要使用了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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

以下是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>
1
2
3
4
5
6
7
8
9
10
11

以下是使用效果
在这里插入图片描述
完成。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/775936