1

Suppose I am receiving data from a video chat and I need to add the data to the video element in the HTML page.

So here is the code:

var payload = [];   // This array keeps updating, since it is getting the data from the network using media stream.
var remoteVideo = document.getElementById('remoteVideo');
var buffer = new Blob([], { type: "video/x-matroska;codecs=avc1,opus" });
var url = URL.createObjectURL(buffer);
remoteVideo.src = url;

Now, I am getting data in the buffer. How do I update the url i have created instead of creating a new one again to view the video?

user229044
  • 232,980
  • 40
  • 330
  • 338
Trishant Pahwa
  • 2,559
  • 2
  • 14
  • 31

1 Answers1

4

I think you might not need to update the url at all using MediaSource,the process goes like this:

  1. Create a MediaSource Object.
  2. Create an object URL from the MediaSource using createObjectURl
  3. Set the video's src to the object URL
  4. listen tosourceopen event and when it occurs, create a SourceBuffer instance.
  5. Use SourceBuffer.appendBuffer() to add all of your chunks to the video.

But pay close attention to MediaSource limitations and considerations.

EDIT:

I found this Answer which explains the process described above more precisely and also points out the considerations you should take, and also an example.

Mu-Majid
  • 851
  • 1
  • 9
  • 16