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

Posted 2023-02-19

【中文标题】在 HTML5 中通过 RTSP 或 RTP 流式传输

【英文标题】：Streaming via RTSP or RTP in HTML5

【发布时间】：2010-12-16 16:41:06

【问题描述】：

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

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

【问题讨论】：

视频标签不适用于 RTSP。而且我所知道的任何浏览器都没有原生实现 RTSP。正如您已经想到的那样，您要么需要一个插件。或者使用 Chrome 和 Firefox 原生支持的 webRTC，您将能够使用带有一些 webRTC 逻辑的视频标签。如果您尝试从 IP 摄像机等来源进行流式传输，请使用 Wowza 等流式传输服务（或自己编写）将 RTSP 转码为 webRTC。这是我给你的建议。

我认为您可以使用 html5 获取流，但不能流到某个地方。

好问题，谢谢。 “我相信我们不支持 RTSP，只支持通过 videojs-flash 的 RTMP。” -- 这是 Video.js 媒体播放器主要维护者的回答。我重新研究了主题，但找不到一个好的解决方案。

可以使用 WebRTC RTCPeerConnection 在 HTML 视频元素中播放 RTSP（或更准确地说是 RTSP 设置的 RTP 流）。之前在webrtc.live555.com 有一个演示。诀窍是找到一个添加了所需 WebRTC DTLS 和 SRTP 机制的 RTSP 服务器。

哇，已删除答案中有这么多好内容！????

【参考方案1】：

技术上“是”

（但不是真的...）

HTML 5 的 <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> 标签的实现是特定于浏览器的。由于 HTML 5 还处于早期阶段，我预计会经常更改支持（或缺乏支持）。

来自 W3C 的 HTML5 规范 (The video element)：

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

【讨论】：

UPDATE：在 chrome 中尝试了第一种方法，得到了GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME。 video 元素上似乎只允许使用 HTTP[S] 方案。

您肯定永远不会通过 HTTP 传输视频而只使用 RTP 之类的协议吗？通过 TCP 会非常慢..

@markmnl 这是讽刺吗？ （我不能说...我很容易上当受骗。） 几年来，HTTP 传输是通过网络传输视频的主要方法。 Youtube、Netflix 等。不是效率问题，而是简单、防火墙穿越、缓存服务器友好等。

@markmnl 为了后代的利益，值得一提的是 Netflix 曾经使用 MS Silverlight 进行流式传输，但不久前就放弃了。作为自 2001 年以来一直从事流媒体的人，我最初对 HTTP 接管感到震惊。现在我正在喝Kool Aid。在企业网络中，效率很重要，专用协议 RTP 是标准，尤其是当它可以提供多播等功能时。

【参考方案2】：

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

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

【讨论】：

好评高尔夫。我也想做 Elben 没有成功的事情。

【参考方案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

然后使用video.js 和HLS plugin 这将很好地播放直播第二个链接下还有一个jsfiddle示例。

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

【讨论】：

它对我有用，我已经在使用 Videojs，这个 HLS 插件使带有 m3u8 文件的直播频道适用于大多数 url，如果不是全部的话。

试试这个@Cesar：ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -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

@Arter 基本上你需要在你的服务器（从命令行）上运行它，比如 Linux 机器或远程的东西。您需要从当前用户的角度访问 /var/www/html/ 文件夹（在此示例中）。您也可以尝试借助 LAMP 堆栈或 The Uniform Server（更精简的解决方案）在 Windows 上执行此操作

这对我有用。 'hls_wrap' 在最新的 ffmpeg 中已弃用。我对任何感兴趣的人都使用了这个命令行：ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]

我的意思是 HTML5 本身不支持开箱即用的协议，但需要翻译（有点）。本机支持意味着要么扩展代码以理解协议，要么编写插件来做到这一点（在浏览器的情况下，html5 是不同的故事，但最终支持在浏览器中），即采取负责重新打包 RTP 并控制与 RTCP 和 RTSP 本身的会话。

【参考方案4】：

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

直播，低延迟 - WebRTC - 网络套接字

VOD 和直播，高延迟 - HLS

1. WebRTC

其实WebRTC就是SRTP(secure RTP protocol)。 因此我们可以说video标签通过WebRTC间接支持RTP(SRTP)。

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

2。网络套接字

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

3. HLS

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

【讨论】：

如何使用网络套接字播放实时音频+视频流？视频的唯一方法是使用 Broadway.js，而使用 h264 nal 流则相当麻烦。

HLS代表HTTP Live Streaming，我想知道为什么HLS被广泛用于VOD而不是LOD？

您无法在 Web 浏览器中从 WebSocket 播放视频。至少不是开箱即用。

-1，用于网络套接字......但不是因为人们所说的所有其他原因。您绝对可以通过 websocket 接收数据来播放视频。这对于 MediaSource 扩展来说是微不足道的。但你不应该，因为你可以直接使用 HTTP Progressive！

【参考方案5】：

Chrome 永远不会支持 RTSP 流。

至少，用 Chromium 开发者here 的话来说：

我们永远不会添加对此的支持

【讨论】：

差不多。 Chrome 已经支持 RTSP 流媒体，这就是为什么他永远不会添加对此的支持；）

不，你不能让它在 chrome 中工作，它在尝试使用 youtube rtsp 链接时不起作用。

【参考方案6】：

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

第一个有这方面文档的人应该通知我们；）

【讨论】：

"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcodevcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3:httpmux=ogg,dst=127.0.0.1:8080/desktop.ogg :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep - 这是 VLC 命令，它将您的输入（例如屏幕捕获设备）流式传输到给定的输出流（例如 127.0.0.1:8080/desktop.ogg）

然后您可以将其嵌入视频标签：<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">。

但不幸的是，性能很差，如果它也可以用 MP4 容器完成，那就太好了。 AFAIK 支持 MP4 的浏览器比支持 OGG 的浏览器多。

它也对我有用。我已经将 VLC 设置为通过my_ip:port 地址上的 HTTP 协议流式传输音频和视频，然后我使用 HTML5 <video> 标记，如下所示：<video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>。

【参考方案7】：

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

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

支持的浏览器：

Chrome、Firefox 和 Opera。

支持的移动平台：

安卓和ios

http://www.webrtc.org/

【参考方案8】：

我对 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）。

【参考方案9】：

到此为止。

由于 rtsp 无法 OOB，因此我正在尝试构建一种无意义的解决方法。如果没有“管理器”处理流式传输以完善视频标签的工作方式，那么现在是不可能的。

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

【参考方案10】：

过去几年，有一些关于 RTSP in H5的更新：

RTSP 在 H5 中不受支持，无论是 PC 还是移动设备。 在Chrome 中禁用了Flash，请参阅Adobe 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

启动一个 RTMP 服务器，如SRS 以接受 RTMP 并传输到 HTTP-FLV、HLS 和 WebRTC：

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

那么播放流就OK了：

HLS 通过视频或hls.js:http://server:8080/live/stream.m3u8 HTTP-FLV by flv.js: 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左右。