为什么我的 S3 存储桶中的视频没有缓冲到 html 视频标签？答案

【问题标题】：Why aren't the videos in my S3 bucket buffering to html video tag?为什么我的 S3 存储桶中的视频没有缓冲到 html 视频标签？
【发布时间】：2019-06-01 16:01:48
【问题描述】：

到目前为止，我已经在 Udoo x86 advanced plus 上成功编写了一个节点脚本，该脚本可以捕获以太网连接的 IP cam 的 RTSP 流。我使用 ffmpeg 将流转码为 5 秒的 mp4 文件。一旦文件出现在文件夹中，它们就会上传/同步到我的 AWS S3 存储桶。接下来我有一个节点服务器，它从 S3 存储桶获取最近创建的 mp4 文件，并通过 mediasource 扩展程序运行它，最后运行到一个 html 视频标签。

视频正在浏览器上播放，但不是以任何同步方式。似乎没有缓冲发生。一个视频播放然后另一个，依此类推。视频到处跳过。

非常感谢有关此错误的任何指导。

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);

我的 ffmpeg 标签：

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")}`
  ];

根据我对 Mediasource 扩展的了解，它们允许接收多个视频并允许客户端缓冲它们，使其看起来像一个更长的视频。简单来说。

【问题讨论】：

标签： node.js amazon-s3 ffmpeg ip-camera media-source

【解决方案1】：

解决了这是解决方案

sourceBuffer.mode = "序列";

【讨论】：