How to play video with buffer array which append continuous from server

I am trying to make a broadcasting to real time http streaming to HTML5 video client . In this system i am using Websocket to transfer data, there is a Recorder who initiate webcam live broadcast video.

Server simply receives and send to the client who is connected in that Session.

When the client connected it receives a continuous 5s chunk of video as a buffer array through Websocket.

My main problem is on the Client-side, how can I play the video when it receives the first chunk

//code in recoder

var mediaRecorder = null;
var getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;
getUserMedia(
  videoConfig,
  function(stream) {
    mediaRecorder = new MediaRecorder(stream);
  },
  function(err) {
    console.log("Failed to get local stream", err);
  }
);
var chunks = []
var interval;
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

function beginRecorder() {
  mediaRecorder.start();
  mediaRecorder.ondataavailable = function(ev) {
    chunks.push(ev.data);
  };
  interval = setInterval(function() {
    mediaRecorder.stop();
    let blob = new Blob(chunks, { type : mimeCodec });
    mediaRecorder.start();
    socket.emit("recoder-send-blob", {blob: blob} );
    chunks = []
  }, 5000);
}

//code in server

socket.on("recoder-send-blob", data => {
  socket.broadcast.emit("server-send-blob", data.blob);
});

//code in client

var mediaSource = new MediaSource();
var video = document.getElementById("main-video");
video.src = URL.createObjectURL(mediaSource);

var sourceBuffer = [];
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
mediaSource.addEventListener('sourceopen', function(){
  sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  socket.on("server-send-blob", (buf) => {
    sourceBuffer.appendBuffer(new Uint8Array(buf))
    if (video.paused) {
      video.play(); // Start playing after 1st chunk is appended.
    }
  });
});