logo标签列表

通过HTML5使用RTSP或RTP进行流媒体传输

videohtmlstreamingrtsprtp
170

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

HTML5 video/audio 标签是否支持 rtsp 或 rtp？如果不支持，最简单的解决方案是什么？也许需要使用 VLC 插件或类似的东西。

1
视频标签不支持RTSP，也没有我所知道的任何浏览器原生支持RTSP。你需要一个插件，就像你已经发现的那样。或者使用WebRTC，它在Chrome和Firefox中得到了本地支持，并且您将能够使用带有一些WebRTC逻辑的视频标签。如果您尝试从诸如IP摄像机之类的源流式传输，请使用流媒体服务（如Wowza）来从RTSP转码为WebRTC。这是我的建议。 - Michael P
1
我认为你可以使用HTML5获取流，但你不能将其流式传输到某个地方。 - Salih Karagoz
1
非常好的问题，谢谢。这是 Video.js 媒体播放器的主要维护者的回答，“我相信我们不支持 RTSP，只支持通过 videojs-flash 支持 RTMP。” 我研究了这个问题，但是找不到一个好的解决方案。 - zhibirc
2
可以使用WebRTC RTCPeerConnection在HTML视频元素中播放RTSP（或更准确地说是RTSP设置的RTP流）。以前在http://webrtc.live555.com/上有一个演示。关键是要找到已添加所需的WebRTC DTLS和SRTP机制的RTSP服务器。 - sipsorcery
1
哇，删除的内容 的回答里有这么多好的内容！ - Barney Szabolcs
10个回答
90

从技术上讲“是的”

(但实际上并不是...)

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

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

14
更新：我在谷歌浏览器中尝试了第一种方法，但是收到了“GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME”的错误提示。似乎只有 HTTP[S] 协议的网址能够在视频元素中使用。 - Yan Foto
你肯定不会使用HTTP传输视频，而只使用像RTP这样的协议吧？在TCP上它会非常慢。 - markmnl
11
@markmnl 是讽刺吗？（我分不清，我很容易被骗。）HTTP传输是近几年来在网络上传输视频的主要方法。YouTube、Netflix等等。这不是效率的问题，而是简单性、防火墙穿越、缓存服务器友好性等问题。 - Stu Thompson
7
值得一提的是，Netflix曾经使用微软的Silverlight进行视频流传输，但在一段时间后放弃了它。作为从2001年开始涉足流媒体的人，当看到HTTP接管时我起初感到震惊。现在我已经被吸引住了。在企业网络中，效率至关重要，专门构建的RTP协议通常是规范，特别是当它们能够提供多播等功能时。 - Stu Thompson
63

我认为这个问题的本质并没有得到真正的回答。现在不能使用video标签来播放rtsp流。有关Chromium开发人员“永远不会”链接的另一个答案有点误导，因为链接的线程/答案并没有直接涉及Chrome通过video标签播放rtsp。请阅读整个链接的线程，特别是底部的评论和其他线程的链接。

真正的答案是：不能只将video标签放置在html 5页面上并播放rtsp。您需要使用某种JavaScript库（除非您想使用flash和silverlight播放器播放内容）来播放流媒体视频。 {依我之见}根据HTML 5视频讨论和实现的速度，各种专有视频标准的供应商都不感兴趣帮助推动其进展，因此，除非浏览器制造商自己解决问题，否则不要指望承诺的video标签易用性...这不太可能。{/依我之见}

1
好评Golf。我也想像Elben一样做，但没有成功。 - will824
47

虽然这是一个旧问题，但最近我自己也需要这样做，并取得了一些可行的成果（除非像我的回答这样可以为你省些时间）： 基本上使用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插件。这将很好地播放直播流，第二个链接中也有jsfiddle示例。

注意：虽然这不是本地支持，但在用户前端不需要额外的东西。

1
尝试一下 @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 - Pawel K
不错的解决方案，与我调查过的其他方案相比，CPU 的负担也不是很重。谢谢。 - Deus777
1
@Arter 基本上你需要在服务器上运行这个程序（从命令行），比如 Linux 或其他远程服务器。你需要从当前用户的角度访问 /var/www/html/ 文件夹（以此为例）。你也可以尝试使用 LAMP 堆栈或 The Uniform Server（更轻量级的解决方案）在 Windows 上运行它。 - Pawel K
1
这对我有用。'hls_wrap'在最新的ffmpeg中已被弃用。我使用了以下命令行，供有兴趣的人参考：ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION] - DanTheMan
1
我的意思是HTML5本身不支持该协议，需要进行翻译（某种程度上）。本地支持意味着要么扩展代码以理解协议，要么编写插件来完成此操作（在浏览器的情况下，html5是不同的故事，但最终支持在浏览器中），即负责重新打包RTP并控制RTCP和RTSP会话。 - Pawel K
显示剩余9条评论
27

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（预录制视频）最流行的高延迟流媒体协议。

3
如何使用 Web Socket 播放实时音视频流？目前唯一可行的方式是使用 Broadway.js，但这种方法比较“hacky”，需要使用 h264 nal 流来处理视频。 - mark gamache
1
HLS代表HTTP Live Streaming，我想知道为什么HLS被广泛用于视频点播而不是直播？ - shintaroid
2
你不能直接从WebSocket在网页浏览器中播放视频。至少不能直接播放。 - Michael IV
-1，对于Web Socket...但并非人们所说的所有其他原因。您绝对可以通过WebSocket接收数据来播放视频。这很简单，使用MediaSource扩展即可。但是您不应该这样做，因为您可以直接使用HTTP Progressive！ - Brad
22

Chrome永远不会支持RTSP流媒体。

至少按照一位Chromium开发人员在此处所说：

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

4
几乎就是这样。 Chrome 已经支持 RTSP 流媒体，所以它永远不会添加对此的支持 ;) - Stefan Steiger
2
不，你不能在Chrome中让它工作，当尝试使用YouTube的RTSP链接时它无法工作。 - IdidntKnewIt
9
使用VLC我能够将一个实时的RTSP流（mpeg4格式）转码为OGG格式的HTTP流（Vorbis/Theora）。虽然视频质量较差，但在Chrome 9中可以播放。我也尝试了使用WEBM（VP8）转码，但似乎无法正常工作（VLC有这个选项，但我不知道它是否真的被实现了...） 第一个有相关文档的人应该通知我们;)
2
“C:\Program Files\VideoLAN\VLC\vlc.exe” -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep - 这是VLC命令，它可以将您的输入（例如屏幕捕获设备）流式传输到给定的输出流（例如http://127.0.0.1:8080/desktop.ogg）。 - Zsolt
1
然后，您可以嵌入到视频标签中：<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">。 - Zsolt
2
但遗憾的是，性能相当差，如果能够使用MP4容器进行处理将是非常好的。据我所知，更多的浏览器支持MP4而不是OGG。 - Zsolt
1
这对我也起作用了。我已经设置了VLC，通过HTTP协议在my_ip:port地址上进行音频和视频流传输，然后我使用了HTML5的<video>标签，像这样：<video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5不支持</video>。 - patryk.beza
5
多年来，关于H5中的RTSP有一些更新：
  • H5不支持RTSP，无论是PC还是移动设备。
  • Chrome已禁用Flash，请参见Adobe
  • MSE工作良好，除了iOS Safari，对于flv.js在H5上播放HTTP-FLV或hls.js在H5上播放HLS。
  • WebRTC也是在H5中播放流的可能方式，特别是在0.2〜1秒延迟场景中。
注意：我认为这是因为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.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〜10秒，LLHLS更好但并不太多。 HTTP-FLV约为1〜3秒，非常类似于RTMP。 WebRTC延迟约为0.2秒，而如果将RTSP转换为RTMP再转换为WebRTC，则延迟约为0.8秒。
1
请明确一点：H5 到底是什么？ - djvg
H5是一个网页，HTML5。 - Winlin
H5是指HTML5的一个网页。 - undefined
2

Chrome不支持RTSP流媒体播放。

检查这个重要项目，使用WebRTC。

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

支持的浏览器：

Chrome、Firefox和Opera。

支持的移动平台：

Android和IOS

http://www.webrtc.org/

1

关于HTML 5视频标签和rtsp(rtp)流的观察是，它只能在Konqueror(KDE 4.4.1，Phonon后端设置为GStreamer)中使用。我只能得到一个H.264/AAC RTSP(RTP)流的视频（没有音频）。

http://media.esof2010.org/的流无法在Konqueror(KDE 4.4.1，Phonon后端设置为GStreamer)中使用。

0

目前得出结论。

我正在试图无意义地构建一种解决方法，因为rtsp不能在OOB中工作。没有一个“管理器”来处理流媒体以完美地实现视频标签的方式，现在还不可能。

我目前正在研究围绕android+html（混合）解决方案，以非常狡猾的方式管理此问题。由于它应该直接从相机播放到android而没有中介服务器，我们想出了一种涉及画布标记的解决方案，以桥接非Webview和Webview。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接