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
  • 222,134
  • 40
  • 319
  • 330
Trishant Pahwa
  • 2,024
  • 1
  • 10
  • 29

1 Answers1

3

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
  • 795
  • 7
  • 14