摄像头画片如何传输到网页前端显示
—————————————————————————————————
话不多说,直接上代码!
主要使用了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>
以下是使用效果
完成。