0

how do i access multiple camera via RTSP and display them on WEB?

i have 3 IP camera installed, along with it is a web client that i can view via the IP theyve given to me. it is a HTTP page, where i can view the streaming camera installed.

i discovered that i can also stream the camera via the VLC player individually.

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

when i type a url on my vlc, im being requested with an rtsp authentication. upon completing the form, i can stream the video on my VLC.

my question is, given the URL above, how can i stream them on my custom HTML page. 

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

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

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

this is the info i got when i stream via vlc

Type:Video
Codec: H264 - MPEG-4 AVC (part10) (h264)
bobbyjones
  • 2,029
  • 9
  • 28
  • 47

3 Answers3

0

Unfortunately, you can not do it as simple as you want, just with video tag. video tag mostly works with recorded files but not with live video. The exception is .m3u8 files that will play live HLS (Apple Http live streaming). So if your viewers are iPads/iPhones/Androids(some of them), then you could put a link to .m3u8 file under video tag. For PC desktop viewers, you need to have 3 Flash players hosted on your webpage, and provide them with 3 RTMP URLs that refer to your 3 live streams.

That's about client side (web browser). For server side, you need some streaming server software that will ingest RTSP streams from your 3 cameras and will re-package them to RTMP streams for Flash players and to HLS for mobile devices. I would recommend Unreal Media Server - easy to configure, very reliable. I use it to stream my RTSP cameras to online viewers. I also tried Wowza, Adobe and Red5 servers, try them too. Too complicated for me as I am not a programmer.

user1390208
  • 1,866
  • 20
  • 20
0

In short, you can use vlc web plugin to play the streams. Something like this:

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

In my particular case this is not a good solution because I'm displaying my streams inside a leafletjs map (on the pop up message of the markers which are draggable); For some reason leaflet does not handle vlc very nicely. For this reason I'm looking for other solutions that can give me better results like:

  • encoding rtsp streams to webm video and displaying them on html5 video tags (my cameras have always a alix pc engine aggregated. I still don't know if the alix can handle this kind of processing but I already know that this gives me a 30secs delay);
  • display consecutive snapshots in a HTML5 canvas or something else similar (my question here);
Community
  • 1
  • 1
Bruno Camarneiro
  • 545
  • 4
  • 19
0

There has media source extensions(MSE) can support live h264 with very low latency(Chrome Firefox Safari below 1s). but there need a gateway to convert RTSP to fragmented MP4. https://github.com/linkingvision/h5stream this link may help you test the performance of the MSE latency. and you can test the multi RTSP source.

linkingv
  • 1