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.

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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;

Answer 9

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.

Answer 10

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

Answer 11

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

Answer 12

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.

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

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