HTML5中通过 RTSP 或 RTP 的流

我正在建立一个网络应用程序,应该播放来自服务器 Http://lscube.org/projects/feng的 RTSP/RTP 流。

HTML5视频/音频标签支持 rtsp 还是 rtp?如果没有,最简单的解决办法是什么?也许下降到一个 VLC 插件或类似的东西。

549253 次浏览

技术上来说,是的

(但不是真的...)

HTML5的 <video>标记与协议无关,它不关心。将协议作为 URL 的一部分放在 src属性中。例如:

<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>标记的实现是特定于浏览器的。由于 HTML5还处于早期阶段,我希望能够经常改变支持(或者缺乏支持)。

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

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

我对 HTML 5 video 标记和 rtsp (rtp)流的观察是,它只能用于 konqueror (KDE 4.4.1,Phonon-backend set to GStreamer)。我只有视频(没有音频)与 H.264/AAC RTSP (RTP)流。

来自 http://media.esof2010.org/的流不能与 konqueror 一起工作(KDE 4.4.1,Phonon-backend 设置为 GStreamer)。

使用 VLC,我能够将实时 RTSP 流(mpeg4)转换为 OGG 格式(Vorbis/Theora)的 HTTP 流。质量很差,但是视频可以在 Chrome9中运行。 我还测试了 WEBM (VP8)中的转码,但似乎不起作用(VLC 有这个选项,但我不知道它是否真的实现了。.)

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

Chrome 永远不会支持 RTSP 流。

至少,用 Chromium 开发者 给你的话来说:

我们永远不会支持这件事

我认为,这个问题的精神并没有得到真正的回答。不行,现在不能用视频标签播放 rtsp 流。另一个关于 Chromium 家伙的“从来没有”链接的答案有点误导,因为链接的线程/答案并没有直接指向通过 video 标签播放 rtsp 的 Chrome。阅读整个链接的线程,尤其是最底部的注释和指向其他线程的链接。

真正的答案是: 不,你不能只是把一个视频标签上的 html 5页面和播放 rtsp。您需要使用某种类型的 Javascript 库(除非您想要使用 flash 和 Silverlight 播放器来播放视频)来播放流媒体视频。以 html 5视频讨论和实现的速度来看,各种专有视频标准的供应商对帮助推进这一进程不感兴趣,所以不要指望承诺的使用 video 标签的便利性,除非浏览器制造商自己以某种方式解决这个问题... ... 同样,不太可能。{/IMHO }

Chrome 不支持 RTSP 流。 一个重要的项目来检查它 WebRTC。

WebRTC 是一个免费、开放的项目,通过简单的 API 为浏览器和移动应用程序提供实时通信(RTC)功能

支援浏览器:

Chrome,Firefox 和 Opera。

支援流动平台:

Android 和 IOS

Http://www.webrtc.org/

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

直播,低延迟 - WebRTC 网络插座

视频点播和直播,高延迟 HLS

1. WebRTC

实际上 WebRTC 是 SRTP (安全 RTP 协议)。 因此我们可以说 video 标签通过 WebRTC 间接地支持 RTP (SRTP)。

因此,要在你的 Chrome、 Firefox 或其他 HTML5浏览器上获得 RTP 流,你需要一个 WebRTC 服务器将 SRTP 流传递给浏览器。

2. Websocket

它是基于 TCP 的,但是比 HLS 具有更低的延迟。

3. HLS

最流行的视频点播(预录视频)高延迟流协议。

这是一个老问题,但我最近不得不自己做,我做到了一些工作(除了像我这样的反应会节省我一些时间) : 基本上使用 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

然后使用 Video jsHLS 插件这将发挥现场流很好还有第二个链接下的 jsfiddle 示例)。

注意: 虽然这不是一个本地支持,它不需要任何额外的用户前端。

现在下结论。

由于 rtsp 不能工作于 OOB,所以我试图建立一种无意义的绕过它的方法。如果没有一个“管理者”来处理视频流,使视频标签的工作方式更加完美,那么现在就不可能实现。

我目前正在围绕 android + html (混合)解决方案开发一些东西,以一种非常邪恶的方式来管理它。由于它应该直接从摄像头播放到没有中间服务器的 android,我们提出了一个解决方案,涉及画布标签,以桥接非 webview 与 webview。

几年前,H5区的 RTSP有了一些更新:

  • H5不支持 RTSP,PC 机和手机都不支持。
  • 铬合金中禁用了 Flash,请参阅 Adobe
  • MSE 运行良好,除了 iOS safari,翻译在 H5上播放 HTTP-FLV,或者 HLS在 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

启动一个 RTMP 服务器,如 SRS,以接受 RTMP 并转换为 HTTP-FLV、 HLS 和 WebRTC:

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

然后可以通过以下方式播放流:

  • 通过视频或 HLS: http://server:8080/live/stream.m3u8
  • HTTP-FLV by 翻译: http://server:8080/live/stream.flv
  • WebRTC by H5或本地 SDK: webrtc://server:1985/live/stream

合肥光源的潜伏期在5 ~ 10s 之间,合肥光源的潜伏期较好,但不太长。HTTP-FLV 大约是1 ~ 3s,非常类似于 RTMP。WebRTC 的延迟约为0.2 s,而 RTSP 转换为 RTMP 转换为 WebRTC 的延迟约为0.8 s。