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

小开

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

小开

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>

小开

Roughly you can have 3 choices to display RTSP video stream in a web page:

真人版
Quicktime player
VLC 播放器

你可以通过 google 搜索找到嵌入 activeX 的代码。

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

Realplayer 本身不支持 H.264视频，您必须为 Realplayer 安装一个快速插件才能实现 H.264解码。
Quicktime 播放器不支持 RTP/AVP/TCP 传输，它的 RTP/AVP (UDP)传输不包括 NAT 打孔。因此，唯一可行的传输是广域网部署中的 HTTP 隧道。
VLC 不支持 RTP/AVP 传输的 NAT 打孔，但是提供了 RTP/AVP/TCP 传输。

小开

If you want to stream RTSP directly to web page, then I am afraid your only option is to use an ActiveX control viewer that comes with the camera. This is a direct connection IP Cam -> Viewer, and should really be the fastest. Not sure why you having issues; Axis ActiveX works pretty good for me.

However, this option is not really bandwidth-efficient and you can not serve multiple concurrent viewers (most of IP Cams have 10 viewers limit). The better option is to upload a single RTSP stream to centrally-hosted streaming server, which will convert your stream to RTMP/MPEG-TS and publish it to Flash players/Set-Top boxes.

Wowza，Erlyvideo，虚拟媒体服务器，Red5是你的选择。

小开

微软媒体播放器可以做所有，你需要。我使用2003/2008服务器的 MS 媒体服务，以广播和单播流的形式提供视频。这个服务可以从摄像头获取信息流并进行广播。比你有“只”的问题，以“显示”在所有操作系统的所有浏览器的图片

我的提示: 首先检查操作系统，然后加载你的插件。在 Windows 操作系统上很简单——使用 WMP，在其他操作系统上使用 MS Silverlight..。

小开

出于这样的目的，我使用 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 插件)的网页示例。

小开

在网页上显示来自 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 文件没有任何修改。

小开

从 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 插件)和其他浏览器 (包括流动电话浏览器)上测试过，可能不支持。

小开

哇塞

将 RTSP 重新流化到 RTMP (Flash 播放器)将无法在 Android 上工作 Chrome 或 FF (不支持 Flash)
将 RTSP 重新流向合肥光源

Web Call Server (Flashphoner)

将 RTSP 重新流化到 WebRTC (Chrome 和在 Android 或桌面上的 FF)
将 RTSP 重新流化到 Websockets (iOS Safari 和 Chrome/FF 桌面)

看看这个文章。

小开

您也可以尝试开源 WebRTC 媒体服务器库伦托

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

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

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

小开

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

他们在 JS 中实现了一个类似于 Gstream 的管道，其中包含 h264 Depay。 Note: the streaming consumed in the js is not directly rtsp but encapsulated into a ws:// by the library itself on a node.js rtsp-websocket proxy.

小开

我正在寻找一些非常相似的一天(查看我的 IP 摄像头的 RTSP 视频馈送在一个简单的 html 页面上没有任何花哨的 ActiveX 插件)。它基于 ffmpeg、 NodeJS、 NGINX (非强制但有用)和节点媒体服务器。

链接中的描述非常详细并且容易理解，但是在开始工作之前(关于 NodeJS 服务器上的端点)我还需要做一些调整。我问了将 RTSP 从带有 Node Media Server 的 IP cam 重新流到 http/ws，并用 html 显示，得到了一个很好的答案。

小开

我在 Github 上发布了一个项目，可以帮助你在不需要插件的情况下将 ip/network 摄像头实时传输到网络浏览器上。这个项目是我为 MIT License 下的一个开源项目贡献的，它可能会与你的需求相匹配:

基于 NodeJS 的 Web 浏览器流媒体 IP/网络摄像头

目前还没有完整的框架包，但它是一个启动，可能会给您提供进一步开发的方法。
作为一个学生，我希望这个有帮助，请有助于这个项目。

小开

一种选择是使用某种媒体伺服器/网关。我尝试了各种解决方案(vlc、 ffmpeg 和其他一些) ，最适合我的是 Janus WebRTC 服务器。它的设置有点困难，你必须从源代码编译它(当我尝试它的版本在 Ubuntu repos 没有 RTSP 支持) ，但他们有详细的编译指令和文件关于如何设置一切。

我设法从本地网络上的3个全高清摄像头获得视频和音频信号，延迟很小。我可以确认它与大华和海康威视相机(不确定是否所有型号)。

我使用的是 Ubuntu 服务器18.04运行 Apache HTTP Server，Chrome 作为浏览器(默认情况下它不能在火狐上运行，但也许有解决方案)。

小开

我建议使用 npm 包 rtsp-Relay。这对我来说非常好，只有0.5秒的延迟时，rtsp 源是在同一个网络。您可以在 git-hub 页面 < a href = “ https://github.com/k-yle/rtsp-Relit”rel = “ nofollow norefrer”> rtsp-Relit 上找到相关文档

小开

我终于找到了一个解决方案，这里涉及到使用一个叫做 rtsp-Relit Link 的节点包: https://www.npmjs.com/package/rtsp-relay，你可以使用这个包，并按照 github 页面中提到的说明进行操作，对我个人来说，当在同一个本地连接上进行流媒体传输时，我只管理了800到600毫秒的延迟。

小开

您可以使用 RTSPtoWeb，添加您的流程，并在其网页上查看。