title: Save image using web socket communication
body: <p>I want to send an image from client to server and use it, but it seems isn't complete. This image is captured from webcam using WebRTC and first I put it in <code>canvas1</code>, then I send it to the server and then added to <code>canvas2</code>. Well, I can see the both images but I can't save it on server side.</p>
  
  <p>Bellow is my code.</p>
  
  <h3>Server side:</h3>
  
  <pre><code>@ServerEndpoint("/imageEcho")
  public class WebSocketImageServer {
  
      private Logger logger = Logger.getLogger(WebSocketImageServer.class);
      private static Set&lt;Session&gt; clients = Collections.synchronizedSet(new HashSet&lt;Session&gt;());
  
  
      @OnOpen
      public void onOpen (Session session) {
          // Set max buffer size
          session.setMaxBinaryMessageBufferSize(1024*512);
          // Add session to the connected sessions set
          clients.add(session);
          this.logger.info("Client " + session.getId() + " connected.");
      }
  
      @OnClose
      public void onClose (Session session) {
          // Remove session from the connected sessions set
          clients.remove(session);
          this.logger.info("Client " + session.getId() + " disconnected.");
      }
  
      @OnError
      public void onError(Throwable error) {
          this.logger.error(error.getMessage());
      }
  
      @OnMessage
      public void processVideo(byte[] imageData, Session session) {
          try {
              if (session.isOpen()) {
  
                  FileUtils.writeByteArrayToFile(new File("c:\\image.png"), imageData);
  
                  // Wrap a byte array into a buffer
  
                  ByteBuffer buf = ByteBuffer.wrap(imageData);
                  session.getBasicRemote().sendBinary(buf);
              }
          } catch (IOException e) {
              try {
                  session.close();
              } catch (IOException e1) {
              }
          }
      }
  
  }
  </code></pre>
  
  <h3>Client side:</h3>
  
  <pre><code>app.controller("StreamController", function($scope, StreamService) {
  
      var video = document.getElementById("video");
      video.videoWidth = 480;
      video.videoHeight = 360;
      var canvas1 = document.getElementById("image");
      var canvas2 = document.getElementById("newImage");
  
      /* WebRTC */
  
      //Configure waht kind of media will be shared.
      var constraints = {
              audio: true,
              video: true
      };
  
      // Start Webcam.
      function successCallback(stream) {
          // Add stream to video.
          video.srcObject = stream;
  
          connect();
          takeSnapshot();
      }
  
      function errorCallback(error) {
          console.log('navigator.getUserMedia error: ', error);
      }
  
      function takeSnapshot() {
          var timer = setInterval(function () {
              //Add an image from video to canvas.
              canvas1.getContext('2d').drawImage(video, 0, 0,                 canvas1.width, canvas1.height);
  
              // Get image from canvas and send it to server.
              sendFile();
          }, 30000);
      }
  
      navigator.getUserMedia(constraints, successCallback, errorCallback);
  
  
      /* WebSocket */
  
      var wsUri = "ws://localhost:8081/WITSoftwareRecognitionWeb            /imageEcho";
      var websocket = null;
  
      function connect() {
          if (websocket == null) {
              // Create a web socket.
              websocket = new WebSocket(wsUri);
              // Define type of WebSocket, can be UTF-8 String, buffer or blob.
          websocket.binaryType = 'arraybuffer';
  
              // Add WebSocket default methods.
              websocket.onopen = function(evt) {
                  onOpen(evt)
              };
  
              websocket.onmessage = function(evt) {
                  onMessage(evt)
              };
  
              websocket.onerror = function(evt) {
                  onError(evt)
              };
          }
      };
  
      function onOpen(evt) {
          console.log("Connected to Endpoint!");
      }
  
      function onError(evt) {
          console.log('ERROR: ' + evt.data);
      }
  
      function onMessage(evt) {
      // Our WebSocket only accepts communication throw binary     (buffer).
          if(evt.data instanceof ArrayBuffer) {
              convertFromBinary(evt.data);
              console.log("File received.");
              console.log('canvas 1: ' + canvas1.toDataURL());
              console.log('canvas 2: ' + canvas2.toDataURL());
          }
      }
  
      function convertToBinary(image) {
          var buffer = new ArrayBuffer(image.data.length);
          var bytes = new Uint8Array(buffer);
          for (var i=0; i&lt;bytes.length; i++) {
              bytes[i] = image.data[i];
          }
          return buffer;
      }
  
      function convertFromBinary(buffer) {
          var bytes = new Uint8Array(buffer);
          var image =     canvas2.getContext('2d').createImageData(canvas2.width, canvas2.height);
          for (var i=0; i&lt;bytes.length; i++) {
              image.data[i] = bytes[i];
          }
          //Add the new image to the newImage canvas.
          canvas2.getContext('2d').putImageData(image,0,0);
      }
  
      function sendFile() {
          if (websocket != null) {
              var url = canvas1.toDataURL("image/png");
              console.log(url);
              var image = canvas1.getContext('2d').getImageData(0, 0,         canvas1.width, canvas1.height);
              var buffer = convertToBinary(image);
              websocket.send(buffer);
              console.log("File sended.");
          }
      };
  
  });
  </code></pre>