I would like to keep the video stream live whilst doing something else in the background. At the moment the video seems to stop whilst a function is called.
In my small example below when clicking the 'start' button the javascript pauses for 3 seconds. During the waiting time the video feed freezes. How would I go about it if I want to keep the video feed active in the background?
server-side:
from flask import Flask, render_template, Response
from flask_socketio import SocketIO, emit
import cv2
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, async_handlers=True, pingTimeout=900)
camera = cv2.VideoCapture(0)
@socketio.on('start')
def start_event(message):
emit( 'snapshot', {} )
def gen_frames(): # generate frame by frame from camera
i = 0
while True:
i+=1
# Capture frame-by-frame
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
'
b'Content-Type: image/jpeg
' + frame + b'
') # concat frame one by one and show result
@app.route('/video_feed')
def video_feed():
#Video streaming route. Put this in the src attribute of an img tag
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
@app.route('/')
def index():
return render_template('index2.html')
if __name__ == '__main__':
socketio.run(app, debug=True)
client side:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- socketio -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
<script>
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
const socket = io();
socket.on('connect', function() {
$('#start').click(function(e) {
socket.emit( 'start', {});
});
socket.on('snapshot', function(msg) {
console.log('stop');
wait(3000);
console.log('resume');
})
});
</script>
</head>
<body>
<div class="container-fluid">
<img src="{{ url_for('video_feed') }}" width="100%" id="canvas">
<div>
<button type="button" value="Submit" id="start" class="btn btn-dark">start</button>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65901642/socketio-python-javascript-keep-video-stream-active-whilst-calling-function 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
