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.
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>
One can do this securely as well without exposing any information about the camera location or User credentials. For free as well:
http://foscam.us/forum/showing-secure-methods-using-php-to-display-your-ip-cameras-t8721.html
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.
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
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.
Anybody figure out how to make the stream image smaller so it fits on a page? The live stream is too BIG.
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″>
Hello, I have a camera hosted here: http://gallopintocam1.homeip.net:9000
if i put this address in the browser it asks me to login. I have to user and password, but how would I embed this video in a regular website?
Hi Mariano, the solution is to add the username and password to the URL, like this: http://username:password@gallopintocam1.homeip.net:9000/
Hope this helps!
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
Hi Mariano, I can’t get gallopintocam1.homeip.net:9000 to respond either. A connection timeout indicates that the port forwarding setup is wrong. Please follow our Remote Monitoring setup instructions to make sure this is all configured correctly.
Hello again.. thanks for the responses! It was indeed the port. One more thing, will this: http://username:password@gallopintocam1.homeip.net:9000/
work for any type of camera? I dont know which framework/ camera my clients are using
Thanks again!
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.
Hello Ben! I dont think it is with Security Spy. Is there a universal way of doing it?
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.
can you help me. i have ip camera. how script input cctv video streaming into my web.
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.
<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
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.
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
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
it worked!. thank you.
how can i record this stream to a file?
Is there a way/ code for me to stream live from my pc to my website using OBS or vmix… Tired of using social media
There hasn’t been much discussion on this topic but thought I would chime in. I have a Wyze camera (testing) that I plan to use as a weather camera, although it is currently in my garage. I have changed the camera’s firmware so that it can RTSP. Following the steps above I posted the three methods and published on a WordPress site at: https://alaskafamily.net/streaming-video-tests/js-jpeg/
I have found the JS Jpg method to be the most reliable still. While not perfect, it works on both Safari and Chrome using iOS. From the Mac desktop if breaks in Chrome but runs reliably in Safari. Is there a setting in Chrome that does this that anyone’s aware of?