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

时间:2017-12-19 10:26:56

标签: javascript html5 google-chrome video rtp

我正在将Android手机的RTP视频数据发送到我的电脑。 RTP流式传输有效,已通过UITextFields验证。

现在我尝试接收并在Chrome中显示流(63.0.3239.84,Win10,64Bit)。我收到Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x1d02966c0 'UISV-canvas-connection' UIStackView:0x102c6d820.leading == UIInputSwitcherTableCellSegmentView:0x102c6df20.leading (active)>", "<NSLayoutConstraint:0x1d0296760 'UISV-canvas-connection' H:[UIInputSwitcherTableCellSegmentView:0x102c6fc00]-(0)-| (active, names: '|':UIStackView:0x102c6d820 )>", "<NSLayoutConstraint:0x1d0296800 'UISV-fill-equally' UIInputSwitcherTableCellSegmentView:0x102c6efd0.width == UIInputSwitcherTableCellSegmentView:0x102c6df20.width (active)>", "<NSLayoutConstraint:0x1d02968f0 'UISV-fill-equally' UIInputSwitcherTableCellSegmentView:0x102c6fc00.width == UIInputSwitcherTableCellSegmentView:0x102c6df20.width (active)>", "<NSLayoutConstraint:0x1d02967b0 'UISV-spacing' H:[UIInputSwitcherTableCellSegmentView:0x102c6df20]-(9)-[UIInputSwitcherTableCellSegmentView:0x102c6efd0] (active)>", "<NSLayoutConstraint:0x1d02968a0 'UISV-spacing' H:[UIInputSwitcherTableCellSegmentView:0x102c6efd0]-(9)-[UIInputSwitcherTableCellSegmentView:0x102c6fc00] (active)>", "<NSLayoutConstraint:0x1d0295860 'UIView-Encapsulated-Layout-Width' UIStackView:0x102c6d820.width == 0 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x1d02968a0 'UISV-spacing' H:[UIInputSwitcherTableCellSegmentView:0x102c6efd0]-(9)-[UIInputSwitcherTableCellSegmentView:0x102c6fc00] (active)> 的RTP数据包,并在ffplay的帮助下将其传递给所有已连接的用户。

要在HTML5 node.js - 代码中显示视频,我尝试了与MediaSource API的the example in the docs类似的方法。这就是我试图即时添加视频数据的内容:

&#13;
&#13;
socket.io
&#13;
<video>
&#13;
&#13;
&#13;

但是,我的视频对象没有任何错误。如果我在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某处关闭MediaSource并尝试在此之后启动视频,则会收到代码为<video></video>的MediaError。

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

1 个答案:

答案 0 :(得分:0)

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