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

Question

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

rtsp://cameraipaddress

但我需要在网页上显示Feed.相机提供商提供了一个ActiveX控件,我已经开始工作了,但它确实很麻烦,导致浏览器频繁挂起.

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

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

Answer 1

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>

Answer 2

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

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

您可以通过谷歌搜索找到嵌入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传输.

Answer 3

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

Answer 4

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

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

Wowza,Erlyvideo,虚幻媒体服务器,Red5是您的选择.

Answer 5

从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我的IP摄像头支持的url格式.所以你需要为你的相机做同样的事情.您可以通过咨询相机供应商支持获取此信息.另请注意,我在Chrome上测试过它(使用适用于Chrome的activeX插件),可能不支持其他浏览器(包括手机浏览器).

Answer 6

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

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

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

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

Answer 7

尝试 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;

Answer 8

Wowza

1. 将RTSP重新流式传输到RTMP(Flash Player)无法与Android Chrome或FF一起使用(不支持Flash)
2. 将RTSP重新流式传输到HLS

Web呼叫服务器(Flashphoner)

1. 将RTSP重新流式传输到WebRTC(适用于Android或桌面的Chrome和FF的本机浏览器功能)

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

看看这篇文章.

Answer 9

我知道这篇文章很旧，但前几天我一直在寻找非常相似的东西（在没有任何花哨的 ActiveX 插件的简单 html 页面上查看我的 IP 摄像头的 RTSP 视频源）。幸运的是，我找到了解决方案！它基于 ffmpeg、NodeJS、NGINX（非强制性但有用）和Node Media Server。

链接中的描述详细且易于理解，但在我开始工作之前我仍然需要进行一些调整（关于 NodeJS 服务器上的端点）。我为此提出了自己的问题，并得到了一个很好且有效的答案。