Jason C Jason C - 5 months ago 90
Node.js Question

Drawing an image which is sent from client socket using javascript

I am trying to build a service which client can send an image to server and view on website. For now, I had succeed to send image from client via socket. Following is the snippet of my client and server

client.js



var fs = require('fs');
var express = require('express');
var io = require('socket.io-client');
var ss = require('socket.io-stream');

var client = io.connect(${myIP});
var stream = ss.createStream();
var filename = './image/tmp.jpg';

client.on('connect', function(){
console.log('Connect to server');
setInterval(function(){emitpic()}, 30);});


function emitpic(){
fs.readFile(filename, function(err, buf){
client.emit('profile-image', stream,{image: true, buffer: buf.toString('base64')});
console.log('image file is initialized');
});
}





server.js



var express = require('express');
var io = require('socket.io');
var fs = require('fs');
var app = express();

app.use(express.static("."));
app.use(bodyparser.urlencoded({extended:true}));

var port = 1234;
var server = app.listen(port, function(){
console.log('server up:'+ port);
});


var sio = io(server);

sio.on('connection', function(socket){
console.log("got one client");
socket.on('profile-image', function(stream, data){

if(data.image){

var url = 'data:image/jpeg;base64,' + data.buffer;

socket.emit.broadcast('liveCamm', 'data:image/jpeg;base64,' + data.buffer ,function(err, msg){
console.log(err);
console.log(msg);
});

}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





Well, every thing look great between client and server, but the problem is that I want to draw the image on the canvas. Following is my html



<html>
<head>
</head>
<body>
<h1>streaming</h1>

<canvas name = "myCanvas" id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas><br>


<script src="http://code.jquery.com/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
var socket = io();

socket.on('liveCam', function(url) {
console.log('connected');
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = url;
ctx.drawImage(img, 10, 10);

});

</script>
</body>
</html>





I think this part in html doesn't work:



socket.on('liveCam', function(url) {
console.log('connected');
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = url;
ctx.drawImage(img, 10, 10);

});





Does any one have any idea about what's the problem?
Thanks for your patient.

Answer

I solved this problem by moved socket.emit evernt out of socket.on event as follow:

   	socket.on('profile-image', function(data){
	   if(data.image){
		data_g = data;
		urll = data.buffer;
	   	gotimage =true;
	  }
       });

      socket.emit('liveCam', urll ,function(err, msg){
				console.log(err);
	    		console.log(msg);
	});
});

It works like champ, but I don't know what make these different.

Comments