How do I render the video to client side browser?

[tanmoyAtb]

Hello I tried streaming the modified chunks to front end using sockets.io. Here's a code snippet.

on server side

darknet.detect({
  cfg: './cfg/yolo.cfg',
  weights: './yolo.weights',
  data: './cfg/coco.data',
  cameraIndex: 0,
  frameSkip: 0, // how many frames to skip, when calling the callback
}, function(modified, original, detections, dimensions) {
  getPipe(dimensions).write(modified);
  
  io.emit('data', modified);

});

on client side

socket.on('data', data => {
	console.log(data);
	image.src = `data:image/jpeg;base64,${data}`;
});

I'm receiving data in my client side console, but the images are not getting decoded for preview

[OrKoN]

@tanmoy12 the data in the modified buffer is raw pixels (normally in bgr24 format). You need to transform it to jpeg or anything else before sending to the client.

[tanmoyAtb]

Thank you. I could not find any native library in nodejs for the conversion.

[CasperPas]

Have you tried using the data with Canvas2D on browser side?