Image over Socket.IO

Image over Socket.IO.js

//NodeJS
var express = require('express');
var app = express();
var http = require('http').Server(app);
var fs = require('fs');
var io = require('socket.io')(http);

app.use(express.static(__dirname, '/'));

io.on('connection', function(socket){
  fs.readFile('image.png', function(err, data){
    socket.emit('imageConversionByClient', { image: true, buffer: data });
    socket.emit('imageConversionByServer', "data:image/png;base64,"+ data.toString("base64"));
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

/////////////////

<!-- Browser JavaScript -->
<img id="img" width="40%">
<img id="img2" width="40%">

<script src="/jquery-2.1.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io-stream.js"></script>

<script>
function b64(e){var t="";var n=new Uint8Array(e);var r=n.byteLength;for(var i=0;i<r;i++){t+=String.fromCharCode(n[i])}return window.btoa(t)}

$(document).ready(function() {
  
  var socket = io();

  socket.on('imageConversionByClient', function(data) {
    $("#img").attr("src","data:image/png;base64,"+b64(data.buffer));
  });

  socket.on('imageConversionByServer', function(data) {
    $("#img2").attr("src",data);
  });

});

</script>

If you are using Python in the backend (Flask, Django, FastAPI, etc.), you can use the following code to send an image:

photo = cv2.imread(photo_path)
photo = cv2.imencode('.jpg', photo)
bin_photo = base64.b64encode(photo)
socketio.emit('receive_image', 'data:image/jpg;base64,' + bin_photo.decode('utf-8'))

You will need OpenCV for this.

for Flask-socket-io python side you can also use this to read the file
with open(filepath, "rb") as f: image_bytes = f.read() bin_photo = base64.b64encode(image_bytes) socketio.emit('receive_image', 'data:image/jpg;base64,' + bin_photo.decode('utf-8'))

Thanks a lot Rick!