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

问题描述 投票：0回答：3

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

我安装了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上输入网址时，我正在通过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)
video-streaming rtsp
3个回答
0
投票

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

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

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画布中显示连续快照或类似的其他快照（my question here）;
0
投票

媒体源扩展（MSE）可以支持具有极低延迟的实时h264（Chrome Firefox Safari低于1秒）。但是需要一个网关将RTSP转换为支离破碎的MP4。 https://github.com/linkingvision/h5stream此链接可以帮助您测试MSE延迟的性能。您可以测试多RTSP源。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.