I am doing a machine learning project. Which works in real-time. I need to send the video from the webcam to a specific API(flask) and show it to the user again(after prediction).

When using the following POST method it's really very slow in localhost.

CODE 1

var canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 240;
var context = canvas.getContext('2d');
var image = document.getElementById('image');

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = stream;

        window.setInterval(function() {
            context.drawImage(video, 0, 0, 320, 240); 
            canvas.toBlob(upload, "image/jpeg");
        }, 100);    
    });
}

function upload(file) {
    var formdata =  new FormData();
    formdata.append("snap", file);
    
    var xhr = new XMLHttpRequest();
    var url = "http://localhost:5000/vid"
    xhr.open("POST", url , true);

    xhr.responseType = 'blob';   
    xhr.onload = function() {
        if(this.status = 200) {
        } else {
            console.error(xhr);
        }
        
        image.src = URL.createObjectURL(this.response);
    };
    xhr.send(formdata);
}

But when using the direct cap = cv2.VideoCapture(0) without API posting its working properly.

Any solutions?

EDIT (flask backend part)

def send_file_data(data, mimetype='image/jpeg', filename='output.jpg'):
    response = make_response(data)
    response.headers.set('Content-Type', mimetype)
    response.headers.set('Content-Disposition', 'attachment', filename=filename)
    
    return response


#predicting result
def generate_frames(frame):

    img_face = cv2.resize(frame,(256,256))    
    
    ** prediction process **
            
    ret,buffer=cv2.imencode('.jpg',img_face)

    frame=buffer.tobytes()

    return frame


#calling this from frontend   
@app.route('/upload', methods=['GET', 'POST'])
def upload():

    if request.method == 'POST':
        fs = request.files.get('snap')
        if fs:
            img = cv2.imdecode(np.frombuffer(fs.read(), np.uint8), cv2.IMREAD_UNCHANGED)
            img = np.array(img)
            return send_file_data(generate_frames(img))
        else:
            return 'ERROR'
    
    return 'WELCOME'