This week I focused on trying to send a compressed snapshot of a canvas from the client to the server and have the server bounce that image back to the client to be drawn much smaller and replace the cursor at the mouse position. This small avatar image would replace the cursor and allow users of the site to know who was who while they played the musical game that I proposed at the midterm.
The site (with all its errors) can be visited here: https://wpb245.itp.io:8088/snapshot-export.html
I was able to get the canvas snapshot over to the server using our class notes. There I would store the image in an array according to the client’s socket id. The idea was then to emit that image out to the client and have ti be drawn to the canvas at the mouse position. I ran into a number of errors along the way which I will outline.
The first mod I made to the class code is that the client snapshots would be stored on the server in a folder called “userImages” with each client’s socket id as the file name. This way, a client can take a new photo until they are happy with the shot.
Once this image was on the server, I was able to emit it back to the client in the same function as the image was received. The issue then was to draw that image on the canvas which is where most of the code broke down. I could not figure out how to properly store the image and draw it to the canvas.
I first tried to copy the same code from the server side surrounding the Buffer()object to the client side, where I got the following error:
This caused me to realize that the Buffer() object was a Node module. After some Googling, I found that it is possible to install discrete Node modules on the client side using the require()method as outlined in this Github repo from Feross Aboukhadijeh coupled with a package called Browserify, although I was not able to implement this directly. Here you can see the errors I got after trying to require(buffer):
So after abandoning this method, I was able to get the snapshot back to the client, but kept getting errors when trying to draw the image that I received to the canvas. Here is my socket function on the client side to receive the image without the Buffer() object included.
And here is my trying to draw it to the canvas which returned the subsequent error:
SOLVED IN CLASS: Since we receive the pic as a data url from the server, we can just set that url equal to the src of the snapshot <div>, and it all works! We do not have to strip off the data url like we do on the server side. See below:
