127

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.

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
elMarquis
  • 7,450
  • 4
  • 38
  • 42
  • 1
    I have been exploring this possibility too with my multiple RTSP cameras, and don't want any ActiveX controls. I'd like to build a custom web server which the web page continuously retrieves a JPEG image to display on the web page. This way it can be supported in browsers such as Safari and viewed on an iPhone. – Jerry Dodge May 20 '12 at 19:54
  • subset: with `` element: http://stackoverflow.com/questions/1735933/streaming-via-rtsp-or-rtp-in-html5 – Ciro Santilli OurBigBook.com Mar 07 '16 at 14:41
  • @JerryDodge I have tried idea with Java WebSocket Server which sends image file name as a string e.g. "photo1.jpeg" to the web browser every second. JavaScript in the web browser uses the file name to set the `src` attribute of the `` tag of HTML. It works but very slow that it does not look like a live streaming video. Have you already tried your idea? Does it work fast? – O Connor Oct 02 '20 at 14:16
  • @OConnor For very basic level low-framerate display, it's best for the client to pull than for the server to push. Also consider TCP vs. UDP. They both have their pros and cons. It's easiest just for the client to request a new image whenever it needs to. – Jerry Dodge Oct 05 '20 at 08:23
  • https://github.com/deepch/RTSPtoWeb looks like a good option (not tried myself yet) – Günter Zöchbauer Jun 03 '22 at 05:03

16 Answers16

34

VLC also comes with an ActiveX plugin that can display the feed in a web page:

http://wiki.videolan.org/ActiveX/HTML

<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">
   <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="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>
Russell
  • 530
  • 4
  • 10
20

Roughly you can have 3 choices to display RTSP video stream in a web page:

  1. Realplayer
  2. Quicktime player
  3. 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.

  1. Realplayer does not support H.264 video natively, you must install a quicktime plugin for Realplayer to achieve H.264 decoding.
  2. 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.
  3. VLC neither supports NAT hole punching for RTP/AVP transport, but RTP/AVP/TCP transport is available.
ciphor
  • 8,018
  • 11
  • 53
  • 70
18

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: 

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

So we just need to copy paste it into our HTML file without any modification.

Adorjan Princz
  • 11,708
  • 3
  • 34
  • 25
  • 2
    Update: Apparently doesn't work now. Shows this: "This camera cannot be embedded. Switch to Standard or Professional package for embedding." – muglikar Apr 23 '17 at 19:55
  • 2
    All you need to do is to upgrade your camera to Standard/Professional package and you will be able to embed your camera into your web page. – Adorjan Princz Apr 23 '17 at 20:10
13

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
TylerH
  • 20,799
  • 66
  • 75
  • 101
Denis Lisitskiy
  • 1,285
  • 11
  • 15
8

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.

user1390208
  • 1,866
  • 20
  • 20
  • This is definitely the way to go. Better bandwidth management and also transcodes into a format suitable for web, e.g RTMP for a flash player. Does anyone have any experience with using any of the above media servers and can elaborate on ease of setup, performance, latency etc? I had tried with Red 5 but found some things a bit tricky to get working. – elMarquis Jun 27 '12 at 11:07
8

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-

<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" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

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.

Swastik Padhi
  • 1,849
  • 15
  • 27
  • 8
    keep in mind you found some windows only activeX crap, not a "solution" as you call it, and it will not work on anything else (real OSses, mobiles, consoles, etc). – nonchip Aug 16 '16 at 09:54
  • 1
    @nonchip ah well, I reckon that you have a better solution for the problem. Moreover, I tested the plugin on Android phones as well so it's not **windows only**. And anyway, I would really like to know what cross-platform alternative do you have in mind to display feeds from CCTV cameras. – Swastik Padhi Aug 17 '16 at 07:23
  • 1
    sorry, but that's a lie. the activex you embed is - per definition - win only. what chrome on android does is recognize the `x-vlc-plugin`, ignore the proprietary stuff and just push an vlc app intend. also, about the cross-platform alternatives you mention: the current only solution would be to use ffmpeg/avconv/etc in a web server to repack the rtsp stream to http/websocket/webrtc. then just add a ` – nonchip Aug 17 '16 at 09:44
  • 1
    stream is not playing, may be this issue (codebase)`http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab` 404 not found – Vara Prasad Sep 28 '17 at 10:42
8

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). 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 asked Re-stream RTSP from IP cam with Node Media Server to http/ws and display it with html and received a good answer.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Hauns TM
  • 1,909
  • 2
  • 22
  • 38
5

Wowza

  1. Re-streaming RTSP to RTMP(Flash Player) Will not work with Android Chrome or FF (Flash is not supported)
  2. Re-streaming RTSP to HLS

Web Call Server (Flashphoner)

  1. Re-Streaming RTSP to WebRTC (Native browser feature for Chrome and FF either on Android or desktop)

  2. Re-Streaming RTSP to Websockets (iOS Safari and Chrome/FF Desktop)

Take a look at this article.

ankitr
  • 5,992
  • 7
  • 47
  • 66
4

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 = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+address+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;
AlastairG
  • 4,119
  • 5
  • 26
  • 41
Cipi
  • 11,055
  • 9
  • 47
  • 60
3

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

ilmix
  • 151
  • 3
  • 11
2

Check the media stream library by Axis which relay on Media Source extension

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.

loreii
  • 380
  • 4
  • 13
2

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.

Community
  • 1
  • 1
Chanrithisak Phok
  • 1,590
  • 1
  • 19
  • 29
1

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

uwe
  • 11
  • 1
1

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

Grigory Kornilov
  • 366
  • 2
  • 4
  • 17
1

I would suggest using the npm package rtsp-relay. This for me worked really well, with only 0.5sec of delay when rtsp source was on same network.

For me, personally, I managed a delay of just 800 to 600ms when streaming on same local connection. You can find the documentation on the GitHub page

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Sagar Bhivara
  • 21
  • 5
1

You can use RTSPtoWeb , add your stream and view on its web page.

Aras
  • 60
  • 1
  • 9