使用HTML5-Video-Tag播放RTP视频流

Question

我将RTP视频数据从Android手机发送到我的电脑。 RTP流媒体工作，与ffplay证明。

现在我正在尝试接收并显示Chrome内的流（63.0.3239.84，Win10,64Bit）。我使用node.js接收RTP数据包，并在socket.io的帮助下将它们传递给所有连接的用户。

为了在HTML5 <video>-tag中显示视频，我尝试了与MediaSource API的the example in the docs类似的方法。这就是我试图在运行中附加视频数据的内容：

var socket    = io();
var ms        = new MediaSource();
var mimeCodec = 'video/mp4; codecs="avc1.42C01E"';
var queue     = [];
var video     = document.querySelector('video');

// receiving the rtp-packets from android, forwarded by nodes socket.io
socket.on('video-fragment', function(fragment) {
  queue.push(fragment.slice(11)); // cutting of rtp header to get plain NAL units
});

video.src = URL.createObjectURL(ms);

var timeout = 500;
var appendChunk = function() {
  if(queue.length > 0) {
    timeout = 500;
    var append = function() {
      var sb = ms.addSourceBuffer(mimeCodec);
      sb.appendBuffer(queue.shift());
      sb.addEventListener('updateend', function() {
        if(video.paused) {
          console.log("try to start video");
          video.play();
        }

        appendChunk();
      });
      ms.removeSourceBuffer(sb);
    };
    if(ms.readyState == "open") {
      append();
    } else {
      ms.addEventListener('sourceopen', function() {
        appendChunk();
      });
    }
  } else {
    setTimeout(appendChunk, timeout); // try again after some timeout...
    timeout *= 2;
  }
}
appendChunk(); // start recursive call

<video></video>

但是，我的视频对象没有任何错误。如果我在某个时候使用ms.endOfStream()关闭MediaSource并尝试在此之后启动视频，我会得到一个代码为4: DEMUXER_ERROR_COULD_NOT_OPEN的MediaError。

有什么建议？我是不是以正确的方式？或者这种视频流在Chrome中是不可能的，“直播”的唯一方法是使用播放列表和视频文件块？

Answer 1

浏览器仅支持mp4（或webm）容器中的视频。它不支持rtp协议。必须将其重新打包为浏览器支持的格式。