html - Video source from javascript blob - Stack Overflow

admin管理员组

文章数量:1333389

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!

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!

• javascript
• html
• node.js
• video
• video-streaming

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Sep 3, 2013 at 12:38 SergioBRSergioBR 9122 silver badges77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： htmlVideo source from javascript blobStack Overflow