Video streaming 通过RTSP访问多个摄像头并将其显示在WEB上？

如何通过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>

---

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

---

这是关于客户端（web浏览器）。对于服务器端，您需要一些流式服务器软件，该软件将从您的3个摄像头接收RTSP流，并将它们重新打包到闪存播放器的RTMP流和移动设备的HLS。我建议使用虚拟媒体服务器-易于配置，非常可靠。我用它将我的RTSP摄像头传输给在线观众。我也试过Wowza、Adobe和Red5服务器，也试过。对我来说太复杂了，因为我不是程序员。

简而言之，您可以使用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>

\
\
\
\
\
\

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

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

  ---

有媒体源扩展（MSE）可以支持实时h264，延迟非常低（Chrome Firefox Safari低于1s）。但需要一个网关将RTSP转换为碎片化MP4。此链接可帮助您测试MSE延迟的性能。您可以测试多RTSP源

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