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

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

rtsp://cameraipaddress

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

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

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

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>

在网页上显示来自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文件中即可，无需进行任何修改。

大致上，您可以选择3种在网页中显示RTSP视频流的方法：

1. Realplayer
2. Quicktime播放器
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传输。

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

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

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

从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插件），并且可能不支持其他浏览器（包括手机浏览器）。

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

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

在以下情况下，我们将其用于生产环境：

 -WebRTC到Webrtc（很多）
 -WebRTC到RTMP
 -RTSP到WebRTC

哇扎

1. 将RTSP重新流式传输到RTMP（Flash Player）不适用于Android Chrome或FF（不支持Flash）
2. 将RTSP重新流式传输到HLS

网络呼叫服务器（Flashphoner）

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

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

看一下这篇文章。

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

链接中的描述非常详细且易于遵循，但是在使它起作用之前，我仍然需要进行一些调整（关于NodeJS服务器上的端点）。我对此提出了一个自己的问题，并得到了一个很好的可行的答案。

试试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="'+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;

通过Axis检查媒体流库，该媒体库中继Media Source扩展

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API

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

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

使用NodeJS在Web浏览器上流式传输IP /网络摄像机

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

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

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

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

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

我的提示：先检查操作系统，然后再加载插件。在Windows上，它是易于使用的WMP，在其他方面，它是MS Silverligt ...

为此，我将VLC用作重新分发服务器。您说您可以使用VLC观看视频吗？右键单击VLC中的媒体，选择“流”，然后选择您的选项。您也可以使用命令行来完成此操作，从而为您提供各种选项（转码，缩放，压缩，去隔行）的潜在好处。这是一个从源代码开始VLC分发到其自己的555端口的批处理（因此，您必须在网页上的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

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

以上所有解决方案都无法正常工作，或者无法找出解决方案。

这是最终的答案。您可以在您的网站中嵌入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/