Access multiple camera via RTSP and display them on WEB

rtspvideo streaming

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)

Best Answer

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.

Related Topic