How can I display an RTSP video stream in a web page

Question

I have an ip camera which provides a live RTSP video stream  I can use VLC media player to view the feed by providing it with the URL   rtsp   cameraipaddress   But I need to display the feed on a web page  The camera provider supplied an ActiveX control which I got working  but it is really buggy and causes the browser to frequently hang   Does anyone know of any alternative video plugins I could use which support RTSP    The camera can be configured to stream in either H264 or MPEG4

User · Answer

I know that this post is old but I was looking for something very similar the other day (view my IP cam's RTSP video feed on a simple html page without any fancy ActiveX plugins). Lucky me, I found a solution! It is based on ffmpeg, NodeJS, NGINX (not mandatory but useful) and Node Media Server.

The description in the link is detailed and easy to follow, but I still had some tweaks to deal with before I got it to work (regarding endpoints on the NodeJS server). I made an own question for it and got a good and working answer.

User · Answer

Try the QuickTime Player  Heres my JavaScript that generates the embedded object on a web page and plays the stream    SET THE RTSP STREAM ADDRESS HERE var address    quot rtsp   192 168 0 101 mpeg4 1 media 3gp quot    var output     lt object width  quot 640 quot  height  quot 480 quot  id  quot qt quot  classid  quot clsid 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B quot  codebase  quot http   www apple com qtactivex qtplugin cab quot  gt        output      lt param name  quot src quot  value  quot   address   quot  gt        output      lt param name  quot autoplay quot  value  quot true quot  gt        output      lt param name  quot controller quot  value  quot false quot  gt        output      lt embed id  quot plejer quot  name  quot plejer quot  src  quot  poster mov quot  bgcolor  quot 000000 quot  width  quot 640 quot  height  quot 480 quot  scale  quot ASPECT quot  qtsrc  quot   address   quot   kioskmode  quot true quot  showlogo false quot  autoplay  quot true quot  controller  quot false quot  pluginspage  quot http   www apple com quicktime download  quot  gt        output      lt  embed gt  lt  object gt           SET THE DIV S ID HERE     document getElementById  quot the div that will hold the player object quot   innerHTML   output

User · Answer

One option would be to use some sort of streaming server gateway  I tried various solutions  vlc  ffmpeg and a few more  and the one that worked best for me was Janus WebRTC server  It is somewhat difficult to set up  and you will have to compile it from source when I tried it the version in Ubuntu repos didn t have RTSP support   but they have detailed compiling instructions and documentation on how to set everything up    I managed to get video and audio feed from 3 FullHD cameras on local network with very little delay  I can confirm it works with Dahua and Hikvision cameras  not sure if all models    What I used was Ubuntu Server 18 04 running Apache web server  and Chrome as a browser  it did not work on Firefox by default but perhaps there are workarounds for it

User · Answer

It   s not easy to display live video stream from an IP camera on a web page because you need wide internet bandwidth and a great video player that is compatible with the major browsers   But fortunately there are some cloud based services that can do this job for us  One of the best is IPCamLive  This service can receive RTSP H264 video stream from an IP Camera and can broadcast it to the viewers  IPCamLive has Flash HTML5 video player component that will display the video on PC  MAC  tablet or mobile  The greatest thing is that this site generates the needed HTML snippet for embedding the live video like this     lt iframe src  http   ipcamlive com player player php alias szekesfehervar  width  800px  height  600px   gt    So we just need to copy paste it into our HTML file without any modification

User · Answer

Also you can try opensource WebRTC Media Server Kurento  Which can play RTSP video stream and send it to WebRTC or transcode to RTMP or saving on server   We are useing it on Production for the following cases     - WebRTC to Webrtc  many to many   - WebRTC to RTMP  - RTSP to WebRTC

User · Answer

Check the media stream library by Axis which relay on Media Source extension    https   github com AxisCommunications media-stream-library-js https   developer mozilla org en-US docs Web API Media Source Extensions API   They implement a pipeline similar to Gstreamer in JS with the h264 depay in it   Note  the streaming consumed in the js is not directly rtsp but encapsulated into a ws    by the library itself on a node js rtsp-websocket proxy

User · Answer

If you want to stream RTSP directly to web page  then I am afraid your only option is to use an ActiveX control viewer that comes with the camera  This is a direct connection IP Cam -  Viewer  and should really be the fastest  Not sure why you having issues  Axis ActiveX works pretty good for me   However  this option is not really bandwidth-efficient and you can not serve multiple concurrent viewers  most of IP Cams have 10 viewers limit   The better option is to upload a single RTSP stream to centrally-hosted streaming server  which will convert your stream to RTMP MPEG-TS and publish it to Flash players Set-Top boxes   Wowza  Erlyvideo  Unreal Media Server  Red5 are your options

User · Answer

Found a simple and working solution from VLC official documentation for web plugin  https   wiki videolan org Documentation WebPlugin   Modified the code a little bit and got it working  Here is my code-   lt embed type  application x-vlc-plugin  pluginspage  http   www videolan org  autoplay  yes  loop  no  width  300  height  200  target  rtsp   10 20 50 15 554 0 888888 888888 main    gt   lt object classid  clsid 9BE31822-FDAD-461B-AD51-BE1D1C159921  codebase  http   download videolan org pub videolan vlc last win32 axvlc cab  style  display none   gt  lt  object gt    Note  The above snippet uses the rtsp url format that is supported by my IP camera  So you need to get the same for your camera  You can get this information by consulting your camera vendor support  Also keep in mind that I tested it on Chrome  using an activeX plugin for Chrome  and other browsers  including mobile phone browsers  might not be supported

User · Answer

VLC also comes with an ActiveX plugin that can display the feed in a web page   http   wiki videolan org ActiveX HTML   lt OBJECT classid  clsid 9BE31822-FDAD-461B-AD51-BE1D1C159921       codebase  http   downloads videolan org pub videolan vlc latest win32 axvlc cab       width  640  height  480  id  vlc  events  True  gt      lt param name  Src  value  rtsp   cameraipaddress    gt      lt param name  ShowDisplay  value  True    gt      lt param name  AutoLoop  value  False    gt      lt param name  AutoPlay  value  True    gt      lt embed id  vlcEmb   type  application x-google-vlc-plugin  version  VideoLAN VLCPlugin 2  autoplay  yes  loop  no  width  640  height  480       target  rtsp   cameraipaddress   gt  lt  embed gt   lt  OBJECT gt

User · Answer

Wowza   Re-streaming RTSP to RTMP Flash Player  Will not work with Android Chrome or FF  Flash is not supported  Re-streaming RTSP to HLS   Web Call Server  Flashphoner    Re-Streaming RTSP  to WebRTC  Native browser feature for Chrome and FF either on Android or desktop  Re-Streaming RTSP to Websockets  iOS Safari and Chrome FF Desktop    Take a look at this article

User · Answer

Roughly you can have 3 choices to display RTSP video stream in a web page    Realplayer Quicktime player VLC player   You can find the code to embed the activeX via google search   As far as I know  there are some limitations for each player    Realplayer does not support H 264 video natively  you must install a quicktime plugin for Realplayer to achieve H 264 decoding  Quicktime player does not support RTP AVP TCP transport  and it s RTP AVP  UDP  transport does not include NAT hole punching  Thus the only feasible transport is HTTP tunneling in WAN deployment  VLC neither supports NAT hole punching for RTP AVP transport  but RTP AVP TCP transport is available

User · Answer

the Microsoft Mediaplayer can do all  you need  I use the MS Mediaservices of 2003   2008 Server to deliver Video as Broadcast and Unicast Stream  This Service could GET the Stream from the cam and Broadcast it   Than you have  only  the Problem to  Display   that Picture in ALL Browers at all OS-Systems  My Tip  check first the OS   than load your plugin   on Windows it is easy -take WMP   on other take MS Silverligt

User · Answer

For purposes like this one I use VLC as a redistribution server  You said you get to catch the video with VLC  Right-click on the media in VLC  select  stream  and choose your options  You can also do it with command line  which gives you potential benefits of various option  transcoding  scaling  compressing  desinterlacing   Here is a batch that starts VLC distribution from source to its own 555 port  so you will have to type rstp   myvlcserveripaddress 555 in your src option on the webpage to get the stream   cd   cd C  Program Files  x86  VideoLAN VLC   vlc --logo-file C  logo png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2  mmsh   typeyoursourceIPhere 554   sout  transcode vcodec div3 vb 800 scale 0 acodec mpga ab 128 channels 2 samplerate 44100  duplicate dst rtp mux ts sdp rtsp    555 stream    sout-all  sout-keep   Here  you have a sample of a webpage that embeds player  based on VLC plugin

User · Answer

I have published project on Github that help you to stream ip network camera on to web browser real time without plugin require  which I contributed to open source project under MIT License that might be matched to your need  here you go  Streaming IP Network Camera on web browser using NodeJS There is no full package of framework yet  but it is a kickstart that might give you a way to proceed further  As a student  I hope this helpful and please contribute to this project

[video-streaming] How can I display an RTSP video stream in a web page?

Examples related to video-streaming

Examples related to rtsp