Why aren't the videos in my S3 bucket buffering to html video tag?

Question

I have so far successfully programmed a node script on a Udoo x86 advanced plus that captures an Ethernet connected IP cam's RTSP stream. I use ffmpeg to trans-code the stream into 5 second mp4 files. As soon as the files show up in the folder they are uploaded/synced to my AWS S3 Bucket. Next I have a Node server that GET's the most recently created mp4 file from the S3 bucket and runs it through mediasource extension and finally to an html video tag.

The videos are playing on the browser but not in any kind of synchronous manner. No buffering seems to be taking place. one video plays then another and so on. Video is skipping all over the place.

I would really appreciate any guidance with this bug.

export function startlivestream() {
  const videoElement = document.getElementById("my-video");
  const myMediaSource = new MediaSource();
  const url = URL.createObjectURL(myMediaSource);
  videoElement.src = url;
  myMediaSource.addEventListener("sourceopen", sourceOpen);
}
function sourceOpen() {
  if (window.MediaSource.isTypeSupported(
      'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    )
  ) 
{
       console.log("YES");
  }

// 1. add source buffers

  const mediaCodec = 'video/mp4; codecs="avc1.4D601F"';
  var mediasource = this;
  const videoSourceBuffer = mediasource.addSourceBuffer(mediaCodec);

// 2. download and add our audio/video to the SourceBuffers

function checkVideo(url) {
  var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

     oReq.onload = function(oEvent) {
      var arrayBuffer = oReq.response; // Note: not oReq.responseText
      if (arrayBuffer) {
         videoSourceBuffer.addEventListener("updateend", function(_) {
           mediasource.endOfStream();
           document.getElementById("my-video").play();
   });
           videoSourceBuffer.appendBuffer(arrayBuffer);
      }
    };

    oReq.send(null);
  }

  setInterval(function() {
    checkVideo("http://localhost:8080");
  }, 5000);

My ffmpeg tags:

const startRecording = () => {
  const args = [
    "-rtsp_transport",
    "tcp",
    "-i",
    inputURL,
    "-f",
    "segment",
    "-segment_time",
    "5",
    "-segment_format",
    "mp4",
    "-segment_format_options",
    "movflags=frag_keyframe+empty_moov+default_base_moof",
    "-segment_time",
    "5",
    "-segment_list_type",
    "m3u8",
    "-c:v",
    "copy",
    "-strftime",
    "1",
    `${path.join(savePath, "test-%Y-%m-%dT%H-%M-%S.mp4")}`
  ];

From what I have learned about Mediasource extensions they allow multiple videos to be taken in and allow the client to buffer them so it looks like one longer video. In simple terms.

Answer 1

solved this was the solution

sourceBuffer.mode = "sequence";