我如何在网页上显示RTSP视频流?

问题描述 投票:82回答:15

我有一个提供实时RTSP视频流的IP摄像机。我可以使用VLC媒体播放器,通过为其提供URL来查看提要:

rtsp://cameraipaddress

但是我需要在网页上显示供稿。相机提供程序提供了一个我正在使用的ActiveX控件,但它确实有问题,并导致浏览器频繁挂起。

有人知道我可以使用支持RTSP的任何其他视频插件吗?

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

video-streaming rtsp
15个回答
27
投票

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
投票

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

Streaming IP/Network Camera on web browser using NodeJS

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


1
投票

Microsoft Mediaplayer可以满足您的所有需求。我使用2003/2008 Server的MS Mediaservices交付视频作为广播和单播流。该服务可以从cam获取流并广播它。比您只有“问题”的问题可以在所有操作系统的所有浏览器中“显示”该图片


1
投票

出于这种目的,我将VLC用作重新分发服务器。您说您可以使用VLC观看视频吗?右键单击VLC中的媒体,选择“流”,然后选择选项。您也可以使用命令行来完成此操作,从而为您提供各种选项(代码转换,缩放,压缩,去隔行)的潜在好处。这是一个从源代码开始VLC分发到其自己的555端口的批处理(因此,您必须在网页上的src选项中键入rstp:// myvlcserveripaddress:555才能获取流)


1
投票

通过中继检查媒体源扩展的Axis检查媒体流库


0
投票

对于我使用的那个,以下URL有效:


-7
投票

以上所有解决方案都无法解决,也无法花费太多时间来弄清楚。


17
投票

大约您可以有3种选择来在网页中显示RTSP视频流:

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

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

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

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

16
投票

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

但是幸运的是,有一些基于云的服务可以为我们完成这项工作。最好的之一是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文件中,无需进行任何修改。


8
投票

如果您想将RTSP直接流式传输到网页,那么恐怕您唯一的选择是使用相机随附的ActiveX控件查看器。这是一个直接连接的IP Cam-> Viewer,应该确实是最快的。不知道为什么会有问题; Axis ActiveX对我来说很好。

但是,此选项的带宽使用效率并不高,您不能同时为多个查看器提供服务(大多数IP摄像机限制了10个查看器)。更好的选择是将单个RTSP流上载到集中托管的流服务器,该服务器会将您的流转换为RTMP / MPEG-TS并将其发布到Flash播放器/机顶盒。

Wowza,Erlyvideo,Unreal Media Server,Red5是您的选择。


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 url格式。因此,您需要为相机获得相同的效果。您可以通过咨询相机供应商支持来获取此信息。还要记住,我在Chrome ((使用ActiveX插件使用Chrome的ActiveX插件))和其他浏览器((包括手机浏览器))上进行了测试。


6
投票

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

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

我们在以下情况下在生产中使用它:

-WebRTC到Webrtc(很多)-WebRTC到RTMP-RTSP到WebRTC

5
投票

Wowza

  1. 将RTSP重新流式传输到RTMP(Flash Player)不适用于AndroidChrome或FF(不支持Flash)
  2. 将RTSP重传到HLS

Web Call Server(Flashphoner)

  1. 将RTSP重新流式传输到WebRTC(Chrome浏览器和在Android或台式机上为FF)

  2. 将RTSP重新流式传输到Websocket(iOS Safari和Chrome / FF桌面)

看看这个article


4
投票

尝试使用QuickTime Player!这是我的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;

3
投票

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

链接中的描述非常详细且易于遵循,但是在使它起作用之前,我仍然需要进行一些调整(关于NodeJS服务器上的端点)。我为此制作了一个own question,并获得了良好的工作效果answer

© www.soinside.com 2019 - 2024. All rights reserved.