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.
Aucun commentaire:
Enregistrer un commentaire