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

时间：2010-02-11 14:27:18

标签： video-streaming rtsp

我有一台ip camera，提供实时RTSP视频流。我可以使用VLC媒体播放器通过提供URL来查看Feed：

rtsp://cameraipaddress

但我需要在网页上显示Feed。摄像头提供商提供了一个ActiveX控件，我可以使用它，但它确实很麻烦，导致浏览器频繁挂起。

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

可以将摄像机配置为以H264或MPEG4进行流式传输。

15 个答案:

答案 0 :(得分：27)

VLC还附带一个ActiveX插件，可以在网页中显示Feed：

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>

答案 1 :(得分：17)

粗略地说，您可以有3种选择在网页中显示RTSP视频流：

  1. Realplayer的
  2. Quicktime播放器
  3. VLC播放器

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

    据我所知，每个玩家都有一些限制。

    1. Realplayer本身不支持H.264视频，您必须为Realplayer安装quicktime插件才能实现H.264解码。
    2. Quicktime播放器不支持RTP / AVP / TCP传输，它的RTP / AVP（UDP）传输不包括NAT打孔。因此唯一可行的传输是WAN部署中的HTTP隧道。
    3. VLC既不支持RTP / AVP传输的NAT穿孔，也可以使用RTP / AVP / TCP传输。

答案 2 :(得分：16)

在网页上显示来自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文件中而不做任何修改。

答案 3 :(得分：8)

如果您想将RTSP直接流式传输到网页，那么我担心您唯一的选择是使用相机附带的ActiveX控件查看器。这是直接连接IP Cam - ＆gt;观众，应该是最快的。不确定为什么你有问题; Axis ActiveX对我来说非常有用。

但是，此选项实际上并不具有带宽效率，并且您无法为多个并发查看者提供服务（大多数IP摄像头都有10个查看者限制）。更好的选择是将单个RTSP流上传到集中托管的流媒体服务器，该服务器将您的流转换为RTMP / MPEG-TS并将其发布到Flash播放器/机顶盒。

Wowza，Erlyvideo，虚幻媒体服务器，Red5是您的选择。

答案 4 :(得分：6)

从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>

注意：以上代码段使用我的IP摄像头支持的rtsp网址格式。所以你需要为你的相机做同样的事情。您可以通过咨询相机供应商支持获取此信息。另请注意，我在Chrome （使用适用于Chrome的activeX插件）上测试了它，而其他浏览器（包括手机浏览器）可能不受支持。

答案 5 :(得分：6)

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

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

我们在生产中将其用于以下情况：

 - WebRTC to Webrtc (many to many)
 - WebRTC to RTMP
 - RTSP to WebRTC

答案 6 :(得分：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="'+adsress+'">';
    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;

答案 7 :(得分：3)

我知道这篇文章很老，但是前几天我正在寻找非常相似的东西（在没有任何功能丰富的ActiveX插件的简单html页面上查看我的IP cam的RTSP视频提要）。幸运的是，我找到了解决方案！它基于ffmpeg，NodeJS，NGINX（不是强制性的，但很有用）和Node Media Server。

链接中的描述很详细且易于遵循，但是在使它起作用之前，我仍然需要进行一些调整（关于NodeJS服务器上的端点）。我为此做了一个own question，并取得了良好的成果answer。

答案 8 :(得分：2)

我已经在Github上发布了一个项目，该项目可以帮助您将ip /网络摄像机实时流式传输到Web浏览器而无需插件，这是我根据MIT许可证开发的开源项目，可以满足您的需求，在这里，您可以：

Streaming IP/Network Camera on web browser using NodeJS

尚无完整的框架包，但这是一个启步，可能会为您提供进一步的方法。
作为学生，我希望这会有所帮助，并请为这个项目做贡献。

答案 9 :(得分：1)

Microsoft Mediaplayer可以完成所有您需要的工作。 我使用2003/2008服务器的MS Mediaservices将视频作为广播和单播流传送。 该服务可以从凸轮获取流并广播它。 比你“只”在所有操作系统中“显示”所有浏览中的图片的问题

我的提示：首先检查操作系统，然后加载插件。 在Windows上它很容易 - 采用WMP，其他采取MS Silverligt ......

答案 10 :(得分：1)

出于这样的目的，我使用VLC作为再分发服务器。你说你可以用VLC观看视频吗？右键单击VLC中的媒体，选择“流”并选择您的选项。您也可以使用命令行执行此操作，这为您提供了各种选项（转码，缩放，压缩，逐行扫描）的潜在好处。 这是一个批量启动从源到其自己的555端口的VLC分发（因此您必须在网页上的src选项中键入rstp：// myvlcserveripaddress：555以获取流）

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

Here，您有一个嵌入播放器的网页示例（基于VLC插件）。

答案 11 :(得分：1)

通过Axis来检查媒体流库，该媒体库依赖Media Source扩展

他们实现了类似于JS中的Gstreamer的管道，其中包含h264 depay。 注意：js中消耗的流不是直接rtsp，而是由库本身在node.js rtsp-websocket代理上封装成ws：//。

答案 12 :(得分：0)

对于我使用的网址，以下网址有效：

rtmp://<IP_address>/flash/11:<username>:<password>

例如：

rtmp://192.168.1.10:1935/flash/11:admin:admin

您需要找到IP CAM的IP，用户名和密码。

当输入浏览器时，上述URL将检测其流并打开媒体播放器。 登录您找到的IP地址，可以找到适合您的品牌的URL。 （使用Nmap，愤怒的IP扫描仪等扫描仪）

find URL in Javascript

答案 13 :(得分：0)

一种选择是使用某种流服务器/网关。我尝试了各种解决方案（vlc，ffmpeg等），而最适合我的解决方案是Janus WebRTC服务器。设置起来有些困难，您必须从源代码进行编译（当我尝试使用它时，Ubuntu存储库中的版本不支持RTSP），但是它们详细介绍了compiling instructions和documentation如何设置所有内容。

我设法从本地网络上的3个FullHD摄像机获得了视频和音频馈送，几乎没有延迟。我可以确认它可以与大华和海康威视相机一起使用（不确定是否所有型号）。

我使用的是运行Apache Web服务器的Ubuntu Server 18.04，并使用Chrome作为浏览器（默认情况下它在Firefox上不起作用，但是也许有解决方法）。

答案 14 :(得分：-6)

以上所有解决方案都不再有效或太耗时。

这是最终答案。您可以在您的网站中嵌入rtsp链接。

在html编辑器中复制以下代码：

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

如果所有这些都太复杂而仍然无法解决，请让我帮助你。

我为我的客户做了这件事。

点击此处http://www.mhcreative.com.my/ipcameratowebsite/

相关问题
最新问题