0

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

我安装了 3 个 IP 摄像头，还有一个网络客户端，我可以通过他们给我的 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)
4

3 回答 3

0

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

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

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

  • 将 rtsp 流编码为 webm 视频并将它们显示在 html5 视频标签上（我的相机总是聚合 alix pc 引擎。我仍然不知道 alix 是否可以处理这种处理，但我已经知道这给了我 30 秒的延迟);
  • 在 HTML5 画布或其他类似内容中显示连续快照（我的问题在这里）；
于 2014-10-17T08:53:41.747 回答
0

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

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

于 2013-11-05T20:38:49.363 回答
0

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

于 2017-12-24T15:36:30.273 回答