Playing RTP Video Stream with HTML5-Video-Tag

Question

I am sending RTP video data from an Android phone to my computer. The RTP streaming works, proven with ffplay.

Now I'm trying to receive and display the stream inside Chrome (63.0.3239.84, Win10, 64Bit). I receive the RTP packets with node.js and pass them to all connected users with help of socket.io.

To display the video in an HTML5 <video>-tag, I tried a similar approach as the example in the docs of the MediaSource API. This is, what i've tried to append the video data on the fly:

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>

However, I don't get any errors from my video-object. If I close the MediaSource at some point with ms.endOfStream() and try to start the video after that, I get a MediaError with code 4: DEMUXER_ERROR_COULD_NOT_OPEN.

Any suggestions? Am I somehow on the right way? Or is this kind of video streaming not possible in Chrome and the only way of "live streaming" would be with using a playlist and video-file-chunks?

szatmary szatmary · Accepted Answer · 2017-12-19T14:29:45

The browser only supports video in an mp4 (or webm) container. It does not support the rtp protocol. It must be repackaged to a format the browser supports.

Playing RTP Video Stream with HTML5-Video-Tag

1 Answers