I'm trying to capture a video of my scream and stream it in a Flask server but it returns **"No video with supported format and MIME type found"
**
I have two files:
1- App.py -> for capturing the stream
2- Index.html -> to stream the video
Code:App.py
import threadingimport queueimport timeimport mssimport cv2from flask import Flask, render_template, Responsefrom flask_socketio import SocketIO, emitimport secretsimport numpy as npimport base64app = Flask(__name__)app.config['SECRET_KEY'] = secrets.token_urlsafe(32) # For SocketIOsocketio = SocketIO(app)frame_queue = queue.Queue()capture_interval = 0.1 # Adjust capture interval as neededterminate_threads = Falsedef generate_frames(): with mss.mss() as sct: monitor = {"top": 40, "left": 0, "width": 800, "height": 600} # Adjust codec = cv2.VideoWriter_fourcc(*'mp4v') # QSV codec out = cv2.VideoWriter('output.mp4', codec, 25, (640, 480)) while not terminate_threads: start_time = time.time() frame = sct.grab(monitor) img = cv2.cvtColor(np.frombuffer(frame.rgb, dtype=np.uint8), cv2.COLOR_BGR2RGB) img = cv2.resize(img, (640, 480)) # Adjust resolution out.write(img) # Write to output using QSV ret, buffer = cv2.imencode('.jpg', img, [int(cv2.IMWRITE_JPEG_QUALITY), 80]) # Adjust quality frame_queue.put(buffer.tobytes()) elapsed_time = time.time() - start_time if elapsed_time < capture_interval: time.sleep(capture_interval - elapsed_time) out.release() # Release video writerdef stream_frames(): while not terminate_threads: frame = frame_queue.get() encoded_frame = base64.b64encode(frame).decode('utf-8') socketio.emit('frame', {'frame': encoded_frame})@app.route('/')def index(): return render_template('index.html')if __name__ == '__main__': capture_thread = threading.Thread(target=generate_frames) stream_thread = threading.Thread(target=stream_frames) capture_thread.start() stream_thread.start() try: socketio.run(app, debug=True) finally: terminate_threads = True capture_thread.join() stream_thread.join()index.html:
<!DOCTYPE html><html><head><title>Real-Time Screen Stream</title></head><body><h1>Real-Time Screen Stream</h1><video id="video" width="800" height="600" controls></video><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script><script> var socket = io(); var video = document.getElementById('video'); socket.on('frame', function(data) { var binaryFrame = atob(data.frame); var arrayBuffer = new ArrayBuffer(binaryFrame.length); var uint8Array = new Uint8Array(arrayBuffer); for (var i = 0; i < binaryFrame.length; i++) { uint8Array[i] = binaryFrame.charCodeAt(i); } var blob = new Blob([uint8Array], { type: 'video/mp4' }); video.src = URL.createObjectURL(blob); });</script></body></html>I tried to change the codex and the encoding and decoding but I'm still stuck