162

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

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

4

10 回答 10

87

技术上“是”

（但不是真的……）

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 规范（视频元素）：

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

于 2009-11-15T09:21:49.410 回答
59

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

真正的答案是：不，您不能只在 html 5 页面上放置视频标签并播放 rtsp。您需要使用某种 Javascript 库（除非您想使用 flash 和 silverlight 播放器玩东西）来播放流视频。{恕我直言}按照 html 5 视频讨论和实施的速度，专有视频标准的各个供应商对帮助推进这一进程不感兴趣，所以不要指望视频标签承诺的易用性，除非浏览器制造商以某种方式解决问题……再次，不太可能。{/恕我直言}

于 2012-07-11T15:15:08.387 回答
44

这是一个古老的问题，但我最近不得不自己做，我取得了一些工作（除了像我这样的响应会节省我一些时间）：基本上使用 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 示例）。

注意：虽然这不是本机支持，但它不需要用户前端的任何额外内容。

于 2016-09-26T08:01:25.707 回答
24

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

直播，低延迟 - WebRTC - Websocket

VOD 和直播，高延迟 - HLS

1.WebRTC

实际上WebRTC就是SRTP(secure RTP protocol)。因此我们可以说视频标签通过WebRTC间接支持RTP（SRTP）。

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

2.网络套接字

它基于 TCP，但延迟比 HLS 低。同样，您需要一个 Websocket 服务器。

3.HLS

VOD（预录视频）最流行的高延迟流媒体协议。

于 2015-09-18T15:49:33.277 回答
22

Chrome 永远不会支持 RTSP 流。

至少，用 Chromium 开发人员的话来说：

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

于 2011-10-14T09:17:25.923 回答
9

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

第一个对此有文档的人应该通知我们；）

于 2011-02-04T16:10:04.057 回答
2

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

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

支持的浏览器：

铬、火狐和歌剧。

支持的移动平台：

安卓和IOS

http://www.webrtc.org/

于 2015-09-11T18:41:59.853 回答
1

我对 HTML 5 视频标签和 rtsp(rtp) 流的观察是，它仅适用于 konqueror（KDE 4.4.1，Phonon-backend 设置为 GStreamer）。我只有带有 H.264/AAC RTSP(RTP) 流的视频（没有音频）。

来自http://media.esof2010.org/的流不适用于 konqueror（KDE 4.4.1，Phonon-backend 设置为 GStreamer）。

于 2010-03-11T12:26:27.120 回答
0

到此为止就下结论了。

由于 rtsp 在OOB 中不起作用，因此我正在尝试构建一种无意义的方法。如果没有“经理”处理流媒体以完善视频标签的工作方式，现在是不可能的。

我目前正在研究围绕 android+html（混合）解决方案的一些东西，以一种非常邪恶的方式来管理它。由于它应该直接从相机播放到 android 没有中间服务器，我们想出了一个涉及画布标签的解决方案，以将非 webview 与 webview 桥接。

于 2021-04-21T10:26:43.063 回答
0

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

  • H5 不支持 RTSP，PC 和移动端都不支持。
  • Flash 在Chrome中被禁用，请参阅Adob​​e
  • 除了 iOS safari 之外，MSE运行良好， 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
  • flv.js的 HTTP-FLV ：http://server:8080/live/stream.flv
  • H5 或原生 SDK 的 WebRTC：webrtc://server:1985/live/stream

注意HLS的延迟在5~10s左右，LLHLS较好但不会太多。HTTP-FLV 大约 1~3s，与 RTMP 非常相似。而WebRTC延迟约为0.2s，而如果将RTSP隐蔽到RTMP再到WebRTC，延迟约为0.8s。

于 2021-12-18T02:55:19.663 回答