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

Question

如何通过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身份验证的im。完成表单后，我可以在我的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)

Answer 1

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

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

Answer 2

简而言之，您可以使用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地图中显示我的流(在可拖动的标记的弹出消息上)；由于某些原因，leaflet不能很好地处理vlc。出于这个原因，我正在寻找其他可以给我带来更好结果的解决方案，比如：

• 将rtsp流编码为webm视频，并将其显示在html5视频标签上(我的相机总是聚合了一个alix pc引擎。我仍然不知道alix是否可以处理这种处理，但我已经知道这可以让我在delay);
• display画布或其他类似的(my question here);

中获得30秒的HTML5连续快照

Answer 3

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