在HTML5中通过RTSP或RTP进行流式传输

Question

我正在构建一个Web应用程序,它应该从服务器http://lscube.org/projects/feng回放RTSP/RTP流.

HTML5视频/音频标签是否支持rtsp或rtp？如果没有,最简单的解决方案是什么？也许下载到VLC插件或类似的东西.

Answer 1

技术上'是'

(但不是真的...)

HTML 5的<video>标签与协议无关 - 它并不关心.您将协议src作为URL的一部分放在属性中.例如:

<video src="rtp://myserver.com/path/to/stream">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

或者可能

<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

也就是说,<video>标签的实现是特定于 浏览器的.由于HTML 5的早期阶段,我希望经常更改支持(或缺乏支持).

从W3C的HTML5规范(视频元素):

用户代理可以支持任何视频和音频编解码器和容器格式

Answer 2

我认为,问题的精神并没有得到真正的回答.不,您现在无法使用视频标签播放rtsp流.关于与Chromium guy"never"的链接的另一个答案有点误导,因为链接的帖子/答案并不直接指Chrome通过视频标签播放rtsp.读取整个链接的线程,尤其是最底层的注释和其他线程的链接.

真正的答案是这样的:不,你不能只在html 5页面上放一个视频标签并播放rtsp.您需要使用某种类型的Javascript库(除非您想要使用flash和silverlight播放器进行播放)才能播放流式视频.{IMHO}按照html 5视频讨论和实施的速度,专有视频标准的各个供应商对帮助这一进展不感兴趣所以不要指望视频标签的承诺易用性,除非浏览器制造商接受它自己以某种方式解决问题...再次,不太可能.{/ IMHO}

Answer 3

这是一个老问题,但我最近自己必须这样做,我实现了一些工作(除了像我这样的回复会节省我一些时间):基本上使用ffmpeg将容器更改为HLS,大多数IPCams流h264和一些基本类型的PCM,所以使用类似的东西:

ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8

然后使用带有HLS插件的video.js这将很好地播放实时流在第二个链接下还有一个jsfiddle示例).

注意:虽然这不是本机支持,但在用户前端不需要任何额外的支持.

Answer 4

Chrome永远不会实施支持RTSP流媒体.

至少,在Chromium开发的话,在这里:

我们永远不会为此添加支持

Answer 5

HTML5中有三种流协议/技术:

直播,低延迟 - WebRTC - Websocket

VOD和直播,高延迟 - HLS

1. WebRTC

事实上,WebRTC是SRTP(安全RTP协议).因此,我们可以说视频标签通过WebRTC间接支持RTP(SRTP).

因此,要在Chrome,Firefox或其他HTML5浏览器上获取RTP流,您需要一个WebRTC服务器,它将SRTP流传送到浏览器.

2. Websocket

它基于TCP,但延迟低于HLS.你需要一个Websocket服务器.

3. HLS

用于VOD(预先录制的视频)的最流行的高延迟流媒体协议.

Answer 6

使用VLC,我能够将实时RTSP流(mpeg4)转码为OGG格式的HTTP流(Vorbis/Theora).质量很差,但Chrome 9中的视频工作.我也测试了WEBM(VP8)中的转码,但它似乎没有用(VLC有选项,但我不知道它是否真的实现了. .)

第一个有这方面文件的人应该通知我们;)

Answer 7

几年前， H5 中有一些关于 RTSP 的更新：

• H5 不支持 RTSP，无论是 PC 还是移动设备。
• Flash 在Chrome中被禁用，请参阅Adob​​e
• MSE工作得很好，除了 iOS safari，flv.js在 H5 上播放 HTTP-FLV，或者hls.js在 H5 上播放 HLS。
• WebRTC也是H5中播放流媒体的一种可能的方式，特别是在0.2~1s延迟场景下。

注意：我认为这是因为RTSP使用TCP信令协议来交换SDP，而不是H5中的HTTP，所以很难支持它，尤其是现在有了WebRTC。

因此，如果您可以将 RTSP 转码为其他协议，例如 HTTP-FLV/HLS/WebRTC，那么您可以使用 H5 来播放流。推荐使用FFmpeg进行转码：

ffmpeg -i "rtsp://user:password@ip" -c:v libx264 -f flv rtmp://server/live/stream

启动像SRS这样的 RTMP 服务器来接受 RTMP 并将其转换为 HTTP-FLV、HLS 和 WebRTC：

./objs/srs -c conf/rtmp2rtc.conf

然后就可以通过以下方式播放流了：

• 通过视频或hls.js进行 HLS ：http://server:8080/live/stream.m3u8
• HTTP-FLV 由flv.js提供：http://server:8080/live/stream.flv
• 通过 H5 或原生 SDK 实现的 WebRTC：webrtc://server:1985/live/stream

请注意，HLS 的延迟约为 5~10 秒，LLHLS 较好，但也不会太多。HTTP-FLV大约为1~3s，与RTMP非常相似。WebRTC 延迟约为 0.2 秒，而如果转换 RTSP 到 RTMP 到 WebRTC，延迟约为 0.8 秒。