Flask-SocketIO to update image dynamically-CodePudding

I am trying to have my server send images with flask-socketio periodically. I am sending the image over with the following code

app.py

with open(f'{app.static_folder}\\image.jpg', ) as f:
        img = f.read()

socketio.emit('my_response',
             {'data': 'Server generated event', 'count': count,
              'image': img})

test.js

socket.on('my_response', function(msg) {     

    let arrayBufferView = new Uint8Array(msg['image']);

    console.log(arrayBufferView);

    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var img_url = URL.createObjectURL(blob);
    console.log(img_url);
    $("#img_cam").attr("src", img_url);
});

This is not updating the image for me. I see the right data being sent over with socketio, and the data looks right after the Uint8Array as well.

If I make a button on the html page and use the update image line with a file it works just fine.

How do I take the image sent over and update the image source?

Edit: Fixed my issue as I misspelled img_cam in my html file. This code posted worked.

CodePudding user response：

Solved my question by fixing my html file.

The id needed to match between the html file and the js file. The code for updating the image works.