logo标签列表

如何在网页中显示RTSP视频流？

video-streamingrtsp
131

我有一台提供实时RTSP视频流的IP摄像头。我可以通过提供URL来使用VLC媒体播放器查看该视频源：

rtsp://cameraipaddress

但我需要在网页上显示这个视频。摄像头供应商提供了一个ActiveX控件，我已经让它工作，但它非常容易出错并导致浏览器经常挂起。

有人知道我可以使用哪些支持RTSP的替代视频插件吗？

该摄像头可配置为以H264或MPEG4格式进行流媒体传输。

1
我也一直在探索这个可能性，使用多个RTSP摄像头，并且不想使用任何ActiveX控件。我想建立一个自定义的Web服务器，使网页可以持续检索JPEG图像以在网页上显示。这样就可以在Safari等浏览器中支持，并在iPhone上查看。 - Jerry Dodge
子集：使用<video:>元素：https://dev59.com/_XI-5IYBdhLWcg3wqqXh - Ciro Santilli OurBigBook.com
@JerryDodge 我已经尝试了使用Java WebSocket服务器的想法，它每秒将图像文件名作为字符串发送到Web浏览器，例如“photo1.jpeg”。Web浏览器中的JavaScript使用文件名来设置HTML的<img>标签的src属性。它可以工作，但速度非常慢，看起来不像实时流视频。你已经尝试过你的想法吗？它运行得快吗？ - O Connor
@OConnor 对于非常基础的低帧率显示，客户端拉取比服务器推送更好。还要考虑TCP和UDP之间的区别。它们都有优缺点。最简单的方法是在客户端需要时请求新图像。 - Jerry Dodge
https://github.com/deepch/RTSPtoWeb 看起来是一个不错的选择（我自己还没有尝试过）。 - Günter Zöchbauer
16个回答
34

VLC还带有一个ActiveX插件，可以在网页中显示视频提供的源：

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>
2
值得一提的是，截至目前，VLC媒体播放器已经由774名开发人员构建。 - Jerry Dodge
26
Chrome在2015年9月1日之后不再支持NPAPI插件，因此该插件已被阻止，无法再使用。 - user2988855
2
axvlc.cab的链接已失效。 - hailinzeng
如果插件被阻止了，有什么其他的替代解决方案可用吗？ - naveenkumar.s
20

大致上，您可以有三种选择在网页中显示RTSP视频流：

  1. Realplayer
  2. Quicktime player
  3. VLC player

您可以通过谷歌搜索找到嵌入ActiveX的代码。

据我所知，每个播放器都有一些限制。

  1. Realplayer不支持H.264视频，必须安装Quicktime插件才能实现H.264解码。
  2. Quicktime播放器不支持RTP/AVP/TCP传输，并且它的RTP/AVP（UDP）传输不包括NAT洞穴穿透。因此，在WAN部署中唯一可行的传输是HTTP隧道传输。
  3. VLC既不支持RTP/AVP传输的NAT洞穴穿透，但支持RTP/AVP/TCP传输。
2
最近的Quicktime Player版本在Mavericks开始已经放弃了RTSP支持。 - Mike
Totem在Linux/Ubuntu上也支持RTSP流。 - Oki Erie Rinaldi
18

在网页上显示来自IP摄像机的实时视频流并不容易，因为您需要宽带互联网和与主要浏览器兼容的出色视频播放器。

但幸运的是，有一些基于云的服务可以帮助我们完成这项工作。其中最好的之一是IPCamLive。该服务可以接收来自IP摄像机的RTSP/H264视频流，并向观众进行广播。 IPCamLive具有Flash/HTML5视频播放器组件，在PC、MAC、平板电脑或移动设备上显示视频。最棒的是，该网站会生成所需的HTML片段，以嵌入实时视频，就像这样：

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

所以我们只需要将其复制粘贴到我们的HTML文件中，不进行任何修改。

2
更新：显然现在不起作用。显示为：“此相机无法嵌入。切换到标准或专业包以进行嵌入。” - muglikar
2
你所需要做的就是升级你的相机到标准/专业套餐，然后你就能够将相机嵌入到你的网页中。 - Adorjan Princz
14

您也可以尝试使用开源的WebRTC媒体服务器Kurento

Kurento 可以播放 RTSP 视频流并将其发送至 WebRTC 或转码为 RTMP 或保存在服务器上。

我们在生产环境中使用它处理以下情况：

  • WebRTC 到 WebRTC（多对多）
  • WebRTC 到 RTMP
  • RTSP 到 WebRTC
8

我在VLC官方文档中找到了一个简单有效的解决方案，适用于Web插件。

https://wiki.videolan.org/Documentation:WebPlugin/

稍微修改了一下代码，现在它可以正常工作。以下是我的代码-

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

注意：上面的代码片段使用的是rtsp url格式，该格式适用于我的IP摄像头。因此您需要根据您的摄像头获取相同的信息。您可以通过咨询摄像头供应商支持来获得此信息。另外请注意，我在Chrome上进行了测试（使用Chrome的ActiveX插件），其他浏览器（包括手机浏览器）可能不被支持。

9
请记住，你只是找到了一些仅适用于Windows的ActiveX垃圾代码，而不是像你所称的“解决方案”，它在其他任何地方都无法运行（例如真正的操作系统、移动设备和游戏机等）。 - nonchip
1
@nonchip 哦，我想你对这个问题有更好的解决方案。此外，我也在安卓手机上测试了这个插件，所以它不仅限于Windows系统。无论如何，我真的很想知道你有什么跨平台的替代方案来显示CCTV摄像头的信息源。 - Swastik Padhi
1
抱歉，但那是个谎言。你嵌入的ActiveX是 - 根据定义 - 仅限于Windows。Chrome在Android上所做的是识别 x-vlc-plugin，忽略专有内容并推送一个VLC应用程序意图。此外，关于您提到的跨平台替代方案：目前唯一的解决方案是在Web服务器中使用ffmpeg/avconv等重新打包RTSP流以便于HTTP/WebSocket/WebRTC。然后只需添加一个 <video> 标签即可完成。 - nonchip
1
流无法播放，可能是由于此问题（代码库）http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab 404未找到。 - Vara Prasad
8
如果您想将RTSP直接流式传输到网页，则恐怕您唯一的选择是使用带有摄像头的ActiveX控件查看器。这是一个直接连接IP摄像机和查看器的过程，应该是最快的方式。不确定为什么您会遇到问题；Axis ActiveX在我这里效果还不错。
然而，这种选项并不真正高效，而且您无法服务多个并发观众（大部分IP摄像机都有10个观众限制）。更好的选择是将单个RTSP流上传到集中托管的流媒体服务器上，该服务器将转换您的流为RTMP / MPEG-TS并将其发布到Flash播放器/机顶盒。
Wowza、Erlyvideo、Unreal Media Server、Red5是您的选择。
这绝对是正确的方法。更好的带宽管理，同时转码为适合网络的格式，例如Flash播放器的RTMP格式。有没有人使用过上述任何媒体服务器，并可以详细说明设置、性能、延迟等方面的易用性？我曾尝试使用Red 5，但发现有些东西有点棘手。 - elMarquis
8
5

Wowza

  1. 将RTSP重新流媒体到RTMP（Flash播放器）无法在Android Chrome或FF上使用（不支持Flash）。
  2. 将RTSP重新流媒体到HLS。

Web Call Server（Flashphoner）

  1. 将RTSP重新流媒体到WebRTC（原生浏览器功能，适用于Chrome和FF，无论是在Android还是桌面上）

  2. 将RTSP重新流媒体到Websockets（iOS Safari和Chrome / FF桌面版）

请查看此文章。

4

尝试使用QuickTime播放器！这是我的JavaScript代码，用于在网页上生成嵌入对象并播放流：

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+address+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;
谢谢。我已经尝试了QuickTime选项，但是它存在非常严重的延迟问题。 - elMarquis
那是因为QuickTime有3秒的缓冲...这也让我很烦恼...嘿，如果你找到其他有效的方法，请在这里发布！再见！ - Cipi
2
你好，你的程序有一个错误，“address”拼写成了“asdress”。谢谢。 - Clinton Green
9
为什么要用JavaScript编写这个？ - Thomas Bennett
3
一种选择是使用某种流媒体服务器/网关。我尝试了各种解决方案（如vlc、ffmpeg等），但对我而言最好的是Janus WebRTC服务器。它有点难以设置，您需要从源代码编译（当我尝试时，Ubuntu存储库中的版本没有RTSP支持），但他们在如何设置所有内容上有详细的编译说明和文档。
我设法从本地网络上的3个FullHD摄像机获取视频和音频源，并且延迟非常小。我可以确认它适用于Dahua和Hikvision相机（不确定是否适用于所有型号）。
我使用的是运行Apache web服务器的Ubuntu Server 18.04，以及Chrome作为浏览器（默认情况下Firefox无法工作，但也许有解决方法）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接