通过 RTSP 访问多个摄像机并在 WEB 上显示它们？

Posted 2023-02-19

【中文标题】通过 RTSP 访问多个摄像机并在 WEB 上显示它们？

【英文标题】：access multiple camera via RTSP and display them on WEB?

【发布时间】：2013-10-24 08:52:45

【问题描述】：

如何

我安装了 3 个 IP 摄像头，还有一个 Web 客户端，我可以通过他们给我的 IP 查看它。这是一个 HTTP 页面，我可以在其中查看已安装的流式摄像头。

我发现我也可以通过 VLC 播放器单独流式传输相机。

camera 1 : rtsp://192.168.1.10/cam/stream/channel/01
camera 2 : rtsp://192.168.1.10/cam/stream/channel/02
camera 3 : rtsp://192.168.1.10/cam/stream/channel/03

当我在我的 vlc 上键入一个 url 时，我被请求使用 rtsp 身份验证。完成表格后，我可以在我的 VLC 上流式传输视频。

我的问题是，鉴于上面的 URL，我如何在我的自定义 html 页面上流式传输它们。

<div id="cam1">
 <video> </video>
</div>

<div id="cam2">
 <video> </video>
</div>

<div id="cam3">
 <video> </video>
</div>

这是我通过 vlc 流式传输时得到的信息

Type:Video
Codec: H264 - MPEG-4 AVC (part10) (h264)

【参考方案1】：

不幸的是，你不能像你想要的那样简单，只需使用视频标签。 video 标签主要适用于录制的文件，但不适用于实时视频。例外是 .m3u8 文件，它将播放实时 HLS（Apple Http 实时流媒体）。因此，如果您的观众是 iPad/iPhone/android（其中一些），那么您可以在 video 标签下放置一个指向 .m3u8 文件的链接。对于 PC 桌面查看器，您需要在网页上托管 3 个 Flash 播放器，并为他们提供 3 个 RTMP URL，这些 URL 引用您的 3 个直播流。

那是关于客户端（网络浏览器）。对于服务器端，您需要一些流媒体服务器软件来从您的 3 台摄像机中提取 RTSP 流，并将它们重新打包为用于 Flash 播放器的 RTMP 流和用于移动设备的 HLS。我会推荐 Unreal Media Server - 易于配置，非常可靠。我用它来将我的 RTSP 摄像机流式传输给在线观众。我也试过 Wowza、Adobe 和 Red5 服务器，也试试。对我来说太复杂了，因为我不是程序员。

【参考方案2】：

简而言之，您可以使用 vlc 网络插件来播放流。像这样的：

 <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" \
   codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" \
     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="no" loop="no"   \
   target="rtsp://192.168.2.169:554/live/ch01_0" ></embed> \
 </OBJECT>

在我的特定情况下，这不是一个好的解决方案，因为我在 Leafletjs 地图中显示我的流（在可拖动的标记的弹出消息上）； 由于某种原因，传单不能很好地处理 vlc。 出于这个原因，我正在寻找其他可以给我带来更好结果的解决方案，例如：

将 rtsp 流编码为 webm 视频并将它们显示在 html5 视频标签上（我的相机总是聚合 alix pc 引擎。我仍然不知道 alix 是否可以处理这种处理，但我已经知道这给了我延迟 30 秒）； 在 HTML5 画布或其他类似内容中显示连续快照 (my question here)；

【参考方案3】：

有媒体源扩展（MSE）可以支持实时 h264，延迟非常低（Chrome Firefox Safari 低于 1s）。但是需要一个网关来将 RTSP 转换为分段的 MP4。 https://github.com/linkingvision/h5stream 这个链接可以帮助你测试 MSE 延迟的性能。并且您可以测试多 RTSP 源。