title: video stream and websocket javascript
body: <p>I'm trying to send video from the camera to the server and take it back to my computer, the video from the camera is perfectly displayed on the first screen, and on the second screen should be the same video, but received from the server. I send the video to the server well and the server accepts it and sends it back to the computer. But the video is not displayed on the second screen. </p>
  
  <p>Here is my code.<br></p>
  
  <p><b>Client:</b></p>
  
  <pre><code>&lt;video autoplay class="video" id="video1"&gt;&lt;/video&gt;
  &lt;video autoplay class="video" id="video2"&gt;&lt;/video&gt;
  &lt;script type="text/javascript"&gt;
  var video1, video2;
  var port="&lt;%out.write(port);%&gt;";
  var ws;
  var connect=false;
  switch(lang){
      case "en":
          text1="roll up";
          text2="expand";
          break;
      case "ru":
          text1="свернуть";
          text2="развернуть";
          break;
      }
  video1=document.querySelector('#video1');
  ws = new WebSocket("ws://127.0.0.1:"+port);
  ws.binaryType = 'arraybuffer';
  navigator.mediaDevices.getUserMedia({ audio: true, video: {width: 400,         height: 400}})
      .then(stream =&gt; {
          var streamChunks = [];
          var outChunks = [];
          video1.src = window.URL.createObjectURL(stream);
          const mediaRecorder = new MediaRecorder(stream);
          //запись потока в массив
          mediaRecorder.addEventListener("dataavailable",function(event) {
              if(connect==true){
                  streamChunks.push(event.data);
                  ws.send(streamChunks[0]);
              }
              streamChunks = [];
          });
          mediaRecorder.start();
          setInterval(function() {
              mediaRecorder.requestData();
          }, 1000);
  });
  var mediaSource = new MediaSource();
  var buffer;
  var queue = [];
  video2=document.querySelector('#video2');
  ws.onopen = function(e) {
        connect=true;
  };
  mediaSource.addEventListener('sourceopen', function(e) {
      video2.play();
      buffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  
      buffer.addEventListener('update', function() { //Note: Have tried 'updateend'
          if (queue.length &gt; 0 &amp;&amp; !buffer.updating) {
              buffer.appendBuffer(queue.shift());
          }
      });
  }, false);
  video2.src=window.URL.createObjectURL(mediaSource);
  ws.onmessage = function(event) {
      if (event.data instanceof ArrayBuffer) {
          try {
             if (buffer.updating || queue.length &gt; 0) {
              queue.push(event.data);
             } else {
              buffer.appendBuffer(event.data);
             }
          }  catch (e) {
              console.log(e);
          }                               
  }  else  {
      writeResponse(event.data); 
  }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><b>Server</b></p>
  
  <pre><code>package model;
  
  import java.net.InetSocketAddress;
  import java.net.UnknownHostException;
  import java.nio.ByteBuffer;
  import java.util.HashSet;
  import java.util.Set;
  
  import org.java_websocket.WebSocket;
  import org.java_websocket.handshake.ClientHandshake;
  import org.java_websocket.server.WebSocketServer;
  
  public class video_chat_server extends WebSocketServer {
      private Set&lt;WebSocket&gt; conns;
      public video_chat_server( int port ) throws UnknownHostException {
          super( new InetSocketAddress(port) );
          conns = new HashSet&lt;&gt;();
      }
  
      public video_chat_server( InetSocketAddress address ) {
          super(address);
      }
  
  @Override
  public void onMessage(WebSocket conn, ByteBuffer blob) {
      // TODO Auto-generated method stub
      for (WebSocket sock : conns) {
          sock.send(blob);
      }
  }
  
  @Override
  public void onOpen(WebSocket conn, ClientHandshake handshake) {
      // TODO Auto-generated method stub
      if(conns.size()&lt;2)conns.add(conn);
  }
  }
  </code></pre>