title: How to receive continuous chunk of video as a blob array and set to video tag dynamically in Websocket
body: <p>I am trying to make my own broadcasting architecture. In this system i am using Websocket to transfer data since i know <a href="http://www." rel="nofollow noreferrer">it</a> is suitable for continuous data transfer. 
  <hr>
  In my system there is a <b>Host</b> who initiate webcam live broadcast video. I use <a href="https://github.com/streamproc/MediaStreamRecorder/blob/master/MediaStreamRecorder.js" rel="nofollow noreferrer">MediaStreamRecorder.js</a> which record every 5s chunk of video and send to server through websocket as blob array.</p>
  
  <p>Server simply recieve and send to the all client who are connected in that Session.</p>
  
  <p>When client connected then it receive continuous 5s chunk of video as blob array through Websocket. </p>
  
  <p>My main problem is in Client side how can I set the video blob array to <code>html video</code> source dynamically in every 5 seconds such that it can play every 5s chunk of video data.</p>
  
  <p><b>I am using Glassfish 4.0 as server and Javscript in Host and Client side. Browser: Chrome</b>
   Source Code:</p>
  
  <h3>ServerBroadCast.java</h3>
  
  <pre><code>    package websocket1;
  
  import java.io.IOException;
  import java.nio.ByteBuffer;
  import java.util.Collections;
  import java.util.HashSet;
  import java.util.Iterator;
  import java.util.Set;
  
  import javax.websocket.OnClose;
  import javax.websocket.OnMessage;
  import javax.websocket.OnOpen;
  import javax.websocket.Session;
  import javax.websocket.server.ServerEndpoint;
  
  @ServerEndpoint(value = "/liveStreamMulticast")
  public class LiveStreamMultiCast {
      private static final Set&lt;Session&gt; sessions = Collections.synchronizedSet(new HashSet&lt;Session&gt;());
  
      @OnOpen
      public void whenOpening(Session session) {
          // session.setMaxBinaryMessageBufferSize(1024*512); // 512 KB
          sessions.add(session);
          System.out.println("You are Connected!");
          System.out.println("Total Connection are connected: " + sessions.size());
  
      }
  
      @OnMessage
      public void handleVideo(byte[] videoData, Session HostSession) {
          // System.out.println("Insite process video");
  
          try {
              if (videoData != null) {
                  sendVideo(videoData, HostSession);
              }
  
          } catch (Throwable e) {
              System.out.println("Error sending message " + e.getMessage());
          }
      }
  
  
      @OnClose
      public void onClosing(Session session) {
          System.out.println("Goodbye!");
          sessions.remove(session);
      }
  
      private void sendVideo(byte[] videoData, Session hostSession) throws IOException {
  
          Iterator&lt;Session&gt; iterator = sessions.iterator();
          Session tempSession = null;
  
          while (iterator.hasNext()) {
              tempSession = iterator.next();
  
              // System.out.println("Sever send data to "+ tempSession);
              if (!tempSession.equals(hostSession))
                  tempSession.getBasicRemote().sendBinary(ByteBuffer.wrap(videoData));
  
          }
  
      }
  }
  </code></pre>
  
  <h3>host.html</h3>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Demo&lt;/title&gt;
      &lt;script type="text/javascript" src="js/required/mediastream.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;video id="video" autoplay=""&gt;&lt;/video&gt;
  
  &lt;button id="stopButton" onclick="stop()"&gt;Stop&lt;/button&gt;
  &lt;script type="text/javascript"&gt;
  
  var url = "ws://localhost:8080/LiveTraining3Demo/liveStreamMulticast"; // 8080/application_name/value_given_in_annotation
  
  var socket = new WebSocket(url);
      var video = document.querySelector('video');
  
  socket.onopen = function(){
  
      console.log("Connected to Server!!");
  
  }
  socket.onmessage = function(msg){
      console.log("Message come from server");
  
  }
  /////////////////////////////////
  var wholeVideo =[];
  var chunks = [];
  var mediaRecorder;
  //////////////////////////////////////
  
    function gotMedia(stream) {
      video.srcObject = stream;
      mediaRecorder = new MediaStreamRecorder(stream);
      console.log("mediaRecorderCalled");
      mediaRecorder.mimeType = 'video/webm';
      mediaRecorder.start(5000);//
      console.log("recorder started");
  
      mediaRecorder.ondataavailable = (event) =&gt;{
          chunks.push(event.data);
          console.log("push  B");
          wholeVideo.push(event.data);
          console.log("WholeVideo Size:");
          setTimeout(sendData(),5010);
      }
  
  
  
    }
  
  
    function sendData(){ 
      //var byteArray = new Uint8Array(recordedTemp);
      const superBuffer =  new Blob(chunks, {
          type: 'video/webm'
          });
  
       socket.send(superBuffer);
       console.log("Send Data");
        console.table(superBuffer);
        chunks = [];
  
    }
  
  
    navigator.getUserMedia  = navigator.getUserMedia || 
                                       navigator.webkitGetUserMedia ||
                                        navigator.mozGetUserMedia || 
                                         navigator.msGetUserMedia;
  
    navigator.mediaDevices.getUserMedia({video: true , audio: true})
        .then(gotMedia)
        .catch(e =&gt; { console.error('getUserMedia() failed: ' + e); });
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>client.html</h3>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;Recieve Video&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;video id="video" autoplay controls loop
      style="width: 700; height: 500; margin: auto"&gt;
      &lt;source src="" type="video/webm"&gt;
  &lt;/video&gt;
  &lt;script&gt;
      var url = "ws://localhost:8080/LiveTraining3Demo/liveStreamMulticast"; // 8080/application_name/value_given_in_annotation
      var check = true;
      var socket = new WebSocket(url);
      var videoData = [];
      var superBuffer = null;
      //var videoUrl;
  
      //socket.binaryType = 'arraybuffer';
      socket.onopen = function() {
          console.log("Connected!!");
  
      }
  
      var check = true;
      socket.onmessage = function(videoStream) {
  
          var video = document.querySelector('video');
          var videoUrl = window.URL.createObjectURL(videoStream.data);
          video.src = videoUrl;
          video.load();
          video.onloadeddata = function() {
              URL.revokeObjectURL(video.src);
              video.play();
          }
          //video.srcObject
  
          //video.play();
  
          console.table(videoStream);
  
      }
      socket.onerror = function(err) {
          console.log("Error: " + err);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><hr>
  When I try to run all other looks fine but in <code>client.html</code> only the video tag source is display with no any video play.</p>
  
  <p>I am working on it since a week.
  Might be my some implementation goes wrong, I also know <a href="https://webrtc.org/" rel="nofollow noreferrer">WebRTC</a>, <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/broadcast" rel="nofollow noreferrer">Mauz Webrtc Broadcast</a> but i didn't like to go through that complex if there is another simple way to do that. I am not like to use <code>node.js</code> server since i have to make this web application with spring.
  Any idea can be appreciated.
   Thanks In Advance!!.</p>