Video source from javascript blob

Question

I'd like to display a video from a stream;

I have a nodeJS server sending an ogg video stream to a websocket port, and when a client connects to that port, it starts receiving the video stream data, but the following method does not seem to understand the data as video correctly...

In the following context, "camera" is a html5 video tag id:

function connectWS()
{
  var client = new BinaryClient('ws://192.168.161.193:8088');
  client.on('stream', function(stream, meta)
  {
    stream.on('data', function(data)
    {
      var arrayBuffer = [];
      arrayBuffer.push(data);
      var video = new Blob([new Uint8Array(arrayBuffer)], { type: "video/ogg" });
      document.getElementById('camera').src = (window.URL || window.webkitURL).createObjectURL(video);
    });
  });
}

Someone seems to already have the video blob working, but I can't find how...

Display a video from a Blob Javascript

Thank you!

Answer 1

stream.ondata is fired every time a new chunk of data is received.

You tried to create a new blob multiple times in stream.ondata .

I think you may wanted to create a new blob only once in client.onstream and push data into it multiple times.