Issue
I am using following code to display camera feed in Flask web app.
App.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)
templates/index.html
<body>
<div>
<img src="{{ url_for('video_feed') }}" width="50%">
</div>
</body>
I want to print frame[0][0][0] value dynamically using commas at the bottom of the video like below.
Video Feed
51, 37, 222, 67, ...
Could you please help me with that?
Thanks in advance
Solution
The simplest method is to run JavaScript code with loop which periodically gest this value from server and put value in HTML.
But frame has to be in global variable to access it in another function in flask. And after converting frame to jpg you have to use different variable for this value.
But this method sometimes may have problem with synchromization. It may get value from new frame but browser may still display old frame.
Minimal working code
It uses setInterval(function, 40) to run function every 40ms (which gives 25 executions per second - like 25 frames per second). And this function uses fetch() to get value (JSON) from url /get_value and display it in <div id="value">
EDIT: I use frame[0,0,0].tolist() instead of frame[0,0].tolist() to get only BLUE (cv2 keeps pixel as B,G,R instead of R,G,B). I also add all values to innerText instead of repalcing previous value.
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()
Answered By - furas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.