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

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?

Answer 1

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.