Embedding Network Camera Video on a website

I’ve been asked many times, how do I embed the video from my camera on a public web page. It seems like it would be so simple, you can connect to your camera from a browser, how hard can it be to take that video and put it on a web page so it works with just about any browser. Here’s the problem, most network cameras spit out RTSP (Real Time Streaming Protocol), the standard for surveillance cameras but website don’t understand that protocol, so you have to convert it to a protocol acceptable to most web browsers and that’s RTMP (Real Time Messaging Protocol).

There are ways to make your camera display on a website, but consider that many require ActiveX controls making it only work with Internet Explorer, then you have local PC permission issues and putting your camara directly on a website just doesn’t work for a public website.

The other consideration is how fast your internet upload speed is. You may have to limit resolution and frame rate to suit your internet connection speed. It’s not reasonable to expect 30fps of 1080P video with 100 users connected with a typical home internet connection. If that’s your expectation, you may want to consider a streaming service that specializes in this. They will take your video feed directly from your camera and host the video on their site.

But this is for those that want to do it themselves, know enough HTML programming to be dangerous but just don’t know where to begin. The first thing you need is a media server. There’s several media server software apps out there like Wowsa Streaming Server and Red5 Media Server but I chose a simpler one called Unreal Media Server because they have a free version that will suit most home or small business user’s needs. It’s limited to 5 camera streams and 15 concurrent users. If you exceed those limits, it will wait until the number of active connections drop. In reality, mosts homes don’t have the network bandwidth to do more anyway. Out of all the methods I’ve tried, Unreal Media Server seems to use the least amount of resources, so you can run this on your home PC without impacting your regular work.

The first step is to download the software on the Windows PC that will be running the Unreal Media Server.  Click on this link to download it – http://www.umediaserver.net/umediaserver/download.html and install the software

Before you start, it’s important to know what the RTSP string is for your camera. You can typically get this from the manual that came with the camera or from their tech support. It will look something like this which is for a iMaxCamPro camera but each brand of camera has different parameters;

http://192.168.0.111:554/cam/realmonitor?channel=1&subtype=1

554 is the standard RTSP port and all cameras I’ve tinkered with use this port and the rest is camera specific. Also, the IP address I used will be different than the one for your camera, so make sure you change that if you used my examples.

After Unreal Media Servier is installed, run the Media Server Configurator. This is screen shot of what it looks like. I already setup a live broadcast I called TestCam which is what you’ll be doing soon.

Right click on “Live broadcast” on the left tree and select “new Live Broadcast” and selected the bottom radio button, Broadcast RTSP / MPEG2-TS / MMS Source and click OK.

After clicking OK above, you’ll get a screen to setup the source camera stream, meaning this is where you enter the camera’s RTSP string with your IP addres and parameters specific to your camera. If you camera has the ability to have multiple streams, setup one specifically for this purpose with lower resolution and lower frame rate to suit your needs. Enter your user name and password for the camera. Select Get Video Only next to RTCP A/V Synch and most options you can leave as they are.

After clicking OK, it will take you back to the the first screen I showed above. If it’s not automatically started, you can start the streaming by selecting File from the top menu bar and then Start Media Server. You should have a green ball at the bottom right that says Media Server is running.

The next step is to write a web page that displays your camera. Not going to teach you HTML programming, so the assumption is you know HTML and already have a website but just want to add live streaming from your network camera on your site. There’s diffrerent ways of doing the same thing with HTML, so I’m going to show the simplest, least code required way I know.

<html>

<head>

<title>Webpage Streaming My Camera</title>

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

<script type=”text/javascript” src=”http://www.umediaserver.net/bin/FlashPlayer/umsplayer.js” charset=”utf-8″>

</script>

</head>

<body id=”unload-trigger-element”>

<h3>This is my example</h3>

<!– player container –>

<div id=”player-container”>

</div>

<script type=”text/javascript”>

embedPlayer(‘player-container’, {

flashvars : {

‘rtmp’ : ‘rtmp://192.169.0.50:5119/live/TestCam’,

‘autoplay’ : true     },

size : { width: 352, height: 240 },

playerStyle : ‘quick’ });

</script>

</body>

</html>

Edit this to suit you. Put the width/height of the video you configured your camera to be, in my case, 352×240 is what I chose on my cameras’s sub stream. Also put the IP address of your PC that’s running Unreal Media Server, for testing, just put your local network address of your PC. You can just double click on the file name, for example if it’s on your desktop and it will bring up your browser. Here’s what shows on my browser.

The next step is to make it display from the internet. The first step is to change the IP address for the PC running Unreal Media Server from your local LAN to the external LAN. You may want to use a DDNS service. If you don’t know how to go about this, read my previous article called Accessing Your Camera from the Internet.

Place the web page on your website. My assumption is you already have a website and you just want to embed live streaming video.

Then you need to set your router to allow the Unreal Media Server port to be accessed externally. By default, the port used is 5119.

You also need to setup the Windows firewall to allow people access to the media server. First test it with your firewall off. If that works, then go back and configure the Windows firewall to allow people to access Unreal Media Server until it works the way you expect. Each version of windows is different and there’s tutorials on how to do this.

After you complete this last step the world will be able to see embedded video on your web page. This uses Flash player from Adobe which works on just about any web browser on a PC or Mac but may not work on some smart phones. The world is moving to HTML5 but the transition will take a while and for now, Flash works for most people.

If you want to take it to the next level, you may want to put a time limit on how long someone can live stream. You don’t want someone to connect to your website, minimize the browser and walk away from your their computer for days as it continues to live stream video using up your bandwidth and one of your 15 concurrent connections. The following is a sample page contributed by Rory of Bahamas Security that will do this with a 300 second timeout that you can configure.

<html>
<head>
<title>Unreal Flash Player</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<script type=”text/javascript” src=”http://www.umediaserver.net/bin/FlashPlayer/umsplayer.js” charset=”utf-8″></script></head>
<body id=”unload-trigger-element”>
<!– player container –>
<div id=”player-container”>
</div>
<script type=”text/javascript”>
embedPlayer(‘player-container’, {
flashvars : {
‘rtmp’ : ‘rtmp://192.168.1.100:5119/live/dhdvr’,
‘autoplay’ : true
},
size : { width: 480, height: 360 },
playerStyle : ‘glow’
});
</script>
<span id=”txtleft” style=”display:none;”><br>Guest Time Left: <b><span id=”txttimeout” title=”Time Left ..”>30</span></b></span>
</body>
</html>
<script type=”text/javascript” src=”jquery-1.6.2.js”></script>
<script type=”text/javascript”>
timeouturl = “timedout.htm”;
timeout    = 300;
var tmrtimeout;
var tmrloop;
$(window).load(function() {
if (timeout>-1) {
timeoutLoop();
document.getElementById(‘txtleft’).style.display = “”;
}
});
function timeoutLoop() {
timeout = timeout-1;
if (timeout>=10) {
if (document.getElementById(‘txttimeout’)) {
document.getElementById(‘txttimeout’).innerHTML=”+timeout+”;
}
} else if (timeout<=0) {
if (document.getElementById(‘txttimeout’)) {
document.getElementById(‘txttimeout’).innerHTML=’00′;
clearTimeout(tmrloop);
timedOut();
}
} else {
if (document.getElementById(‘txttimeout’)) {
document.getElementById(‘txttimeout’).innerHTML=’0′+timeout+”;
}
}
tmrloop = setTimeout(‘timeoutLoop()’,1000);
}
function timedOut() {
clearTimeout(tmrtimeout);
if (timeouturl!=””) {
location.href = timeouturl;
}
}</script>