Adding Live Video To Any Web Page

This tutorial will show you how to add live video from SecuritySpy to your own web page. This does involve editing the HTML of your web page, but it’s relatively simple. Our favourite tool for this is TextMate.

Firstly, you must set up SecuritySpy for remote monitoring, so that it can be accessed over the internet. Next, create a special user account in SecuritySpy that has permission only to view the camera that you want to use. Finally, determine the camera number for the camera in question – this is shown in the Camera Info window (highlighted in red below). If you don’t see this column, click the header bar where you see the column names, and a menu will pop up that allows you to add it.

ci_no1

Three methods for embedding the video feed into a web page are outlined below. In the examples shown, the address of the SecuritySpy system is “demo.viewcam.me”, the port is 8000, and the camera number is 1.

Authentication is supplied via an auth parameter, which is the the Base64 representation of the string user:pass (i.e. the username and password, separated by a colon). Use an online Base64 encoder to generate this value: simply enter your user:pass string, click the Encode button, and copy and paste the result.

If you want to specify a particular size for the image, add width and height parameters, for example the URL in Method 1 would become something like this:

http://demo.viewcam.me:8000/++video?cameraNum=1&width=640&height=480

Method 1: MJPEG

This method works in iOS and all Mac web browsers. On a Windows PC, this works in Chrome, Safari and FireFox but unfortunately not in Internet Explorer. It is very simple to implement, using just an img tag within the body block of the HTML page:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<img src="http://demo.viewcam.me:8000/++video?cameraNum=1&auth=dXNlcjpwYXNz">
</body>
</html>

Method 2: JavaScript JPEG

This has the best compatibility of all these methods, working on virtually all web clients. It does require the insertion of some JavaScript code to the head section of the HTML page in addition to the img tag within the body section. Also make sure to add the onLoad event to the body tag, in order to initially load the image when the page loads:

<html>
<head>
<title>My Web Page</title>
<script>
var i=0;
var url="http://demo.viewcam.me:8000/++image?cameraNum=1&auth=dXNlcjpwYXNz";
function jsUpdate() {document.image.src=url+"&"+(i++);}
</script>
</head>
<body onLoad="jsUpdate()">
<img name="image" onLoad="jsUpdate()">
</body>
</html>

Method 3: HTTP Live Streaming

This method uses H.264 video encoding, and is therefore much lower bandwidth than the above JPEG methods. It also includes audio. The main drawbacks are that it does not have universal support in web browsers (it works best in Safari on either macOS or iOS), and there is an inevitable 10-second latency.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<video controls autoplay width="640" height="480">
<source src="http://demo.viewcam.me:8000/++hls?cameraNum=1&auth=dXNlcjpwYXNz" type="application/x-mpegURL">
</video>
</body>
</html>

20 thoughts on “Adding Live Video To Any Web Page

    1. bensoftware Post author

      Hi Don, thanks for posting, this looks like a neat solution for using PHP to implement the camera feeds. Hopefully this will be useful for some SecuritySpy users.

      Reply
  1. Hans Mouridsen

    Hi

    Thank you for sharing the scripts – it works flawless.

    I’m using method 2, but I was wondering if it’s possible to specify output resolution? The live stream if too big for my webpage.

    Also I’m a little unsure, if it’s safe to put in your username and password in method 2?

    Sorry about my ignorance

    Reply
    1. bensoftware Post author

      Hi Hans,

      Yes in all the methods you are required to put the username/password into the HTML code. However, as mentioned in the article above, you should create a special user account in SecuritySpy for this purpose – an account that only has permission to view live video from the camera and nothing else. This makes it safe to use.

      Reply
      1. Ben Software Post author

        You can add image dimensions to the “img” HTML tag, like this:

        <img width=”640″ height=”480″>

        This works for methods 1 and 2 above. Add the width and height attributes in addition to any existing attributes in the tag. So for example, with method 2, the whole tag would be as follows:

        <img name=”image” onLoad=”jsUpdate()” width=”640″ height=”480″>

        Reply
      1. Mariano

        Thank you so much! I am having difficulties accessing the cam. If you go to where it is hosted the connection times out. Do you have any idea what this could be or how to fix it?
        Thanks again!

        Mariano

        Reply
    1. Ben Software Post author

      If this is a link to SecuritySpy, then this link will work no matter what the camera make/model is. SecuritySpy provides a unified interface that is the same for every camera – as long as it’s working in SecuritySpy then it will work in the same way via SecuritySpy’s web interface.

      Reply
        1. Ben Software Post author

          Hi Mariano, there is no universal way of doing it except by using SecuritySpy (or some other NVR software that accepts video feeds from a wide variety of cameras and presents one unified web server to stream video to web clients, like SecuritySpy does). IP cameras vary significantly in their capabilities and methods of accessing video streams. SecuritySpy supports thousands of cameras from over a hundred different manufacturers. The above information on this page is for adding camera views from SecuritySpy to your own web pages, not directly from cameras themselves.

          Reply
    1. Ben Software Post author

      Hello, the above information applies to our Mac software SecuritySpy. Are you using SecuritySpy? If you have a Mac then we suggest that you download and try out SecuritySpy, then you can use the methods detailed above to add the video feed to your own web pages.

      Reply
  2. Vladimir

    <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="1100" height="600"
    target=rtsp://user:pass@ip:554/cam/realmonitor?channel=1&subtype=0
    channel: 3

    This work for Alhua ip cams

    Reply
    1. Ben Software Post author

      The VLC plugin can also be used to view streams from SecuritySpy, however Chrome no longer supports plugins, and other browsers are also going in the same direction.

      Reply
  3. Nathaniel

    I searched and found this was the best result I was looking for. Unfortunately I can’t get it to work on Method 2 with Chrome or Android, but Safari and Firefox work great. This is with the latest version of SS4. Perhaps there’s an updated method to cover Google browsers now.. Thanks.
    -Nathaniel

    Reply
    1. Ben Software Post author

      Hi Nathaniel, method 2 is the one that is most compatible and should work with all web browsers. However it’s the most tricky because it requires three elements that work together: the

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *