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 threading
import queue
import time
import mss
import cv2
from flask import Flask, render_template, Response
from flask_socketio import SocketIO, emit
import secrets
import numpy as np
import base64
app = Flask(__name__)
app.config['SECRET_KEY'] = secrets.token_urlsafe(32) # For SocketIO
socketio = SocketIO(app)
frame_queue = queue.Queue()
capture_interval = 0.1 # Adjust capture interval as needed
terminate_threads = False
def 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 writer
def 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