我正在使用以下代碼在 Flask Web 應用程式中顯示相機源。
應用程式.py
from flask import Flask, render_template, Response
import cv2
app = Flask(__name__)
camera = cv2.VideoCapture(0)
def gen_frames():
while True:
success, frame = camera.read() # read the camera frame
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') # concat frame one by one and show result
@app.route('/')
def index():
return render_template('index.html')
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == "__main__":
app.run(debug=True)
模板/index.html
<body>
<div>
<img src="{{ url_for('video_feed') }}" width="50%">
</div>
</body>
我想使用視頻底部的逗號動態列印 frame[0][0][0] 值，如下所示。
視頻源
51, 37, 222, 67, ...
你能幫我解決這個問題嗎？
提前致謝
uj5u.com熱心網友回復：
最簡單的方法是使用回圈運行 JavaScript 代碼，該回圈定期從服務器獲取此值并將值放入HTML.
但frame必須在全域變數中才能在燒瓶的另一個函式中訪問它。在將幀轉換為之后，jpg您必須為此值使用不同的變數。
但是這種方法有時可能會出現同步問題。它可能會從 new 中獲得價值，frame但瀏覽器可能仍會顯示 old frame。
最少的作業代碼
它用于setInterval(function, 40)每 40 毫秒運行一次函式（每秒執行 25 次 - 比如每秒 25 幀）。此函式用于fetch()從 url 獲取值（JSON）/get_value并將其顯示在<div id="value">
編輯：我只使用frame[0,0,0].tolist()而不是frame[0,0].tolist()獲取BLUE（cv2 將像素保持為B,G,R而不是R,G,B）。我還將所有值添加到innerText而不是替換以前的值。
from flask import Flask, render_template_string, jsonify, Response
import cv2
import time
app = Flask(__name__)
camera = cv2.VideoCapture(0)
#success, frame = camera.read() # default value at start
success = False # default value at start
frame = None # default value at start
def gen_frames():
global success
global frame
while True:
success, frame = camera.read() # read the camera frame
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
image = buffer.tobytes() # use other variable instead of `frame`
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n'
b'\r\n' image b'\r\n') # concat frame one by one and show result
time.sleep(0.04) # my `Firefox` needs this to have time to display image.
# And this gives stream with 25 FPS (Frames Per Second) (1s/0.04s = 25)
@app.route('/get_value')
def get_value():
#if frame is not None:
if success:
value = frame[0,0,2].tolist()
else:
value = ['?']
#print(value)
return jsonify(value)
@app.route('/')
def index():
return render_template_string('''
<body>
<div>
<img src="{{ url_for('video_feed') }}" width="50%">
</div>
<div id="value"></div>
<script>
place = document.querySelector("#value");
setInterval(function(){
console.log("run function");
fetch("/get_value")
.then(response => response.json())
.then(data => {
if(place.innerText.length > 0){
place.innerText = ",";
}
place.innerText = data;
})
}, 40);
</script
</body>
''')
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == "__main__":
try:
app.run(debug=True) #, use_reloader=False)
except KeyboardInterrupt:
print("Stopped by `Ctrl C`")
finally:
camera.release()
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490886.html