How to Embed CCTV Security Camera Video on a WebSite

Want to learn how to embed a live video stream from a security camera on your website? This article documents one way to do it using an analog CCTV camera and network video server. I documented this setup based on my recent experience with a prospective business customer at CCTV Camera Pros.

Live CCTV Camera

Here is a live view of a security camera installed at CCTV Camera Pros office in West Palm Beach, Florida. This camera is embedded into this web page is using the same setup that I recommended to the customer that I spoke to. This website uses a responsive website design which means that the HTML used to embed the video works on desktop, tablet, and mobile web browsers and adjusts in size according to the screen size and resolution of the device. In plain English, the live video and all other elements of the page will look good on desktop and mobile browsers.

Display Security Camera Video on Website

A business owner of a laundromat in New York contacted me recently because she wanted to display video from a security camera on her company website using one of the existing CCTV cameras from her security system. She wanted her customers to be able to visit her website from any desktop or mobile web browser to see how busy the laundromat was at any given time. The existing system at her business consists of 4 security cameras that are connected to a DVR (a very typical setup for a small business). Her system uses analog CCTV cameras that are hard wired to the DVR using RG59 coaxial cable. One of the four cameras provides an overview of the area where all the clothes washers are located. This is the camera view that she wants to add to her website.

She also wants to replace her existing DVR because it does not support the ability to login to her system remotely from her Mac computer or cell phones. She has an iPhone and her husband has an Android. They both want to be able to login to the system remotely to see all of their cameras and playback recorded video if anything happens.

Her last requirement was for the system to use a monitor for public display to show her customers that the entire business is monitored by video surveillance for their protection. She wants this monitor to display all four cameras on one screen continuously. This monitor is to be installed on the wall in the main area of the laundromat so that everyone can see it.

DVR Surveillance System with Website Video Embed

Here is a diagram of the of the system setup that I proposed to her. I suggested that she replace her existing DVR with a 4 channel iDVR-PRO4A and that she add a Zavio V1100 network video server so that she can enable video streaming for one camera using HTML.

Here’s how it all works.

1. All of her existing cameras (except camera #4, the one that will stream on the website) will connect to the the new DVR using the coax cable that is already in place. The iDVR-PRO uses standard BNC connectors so this will be a simple drop in replacement to her old DVR.
2. Camera #4  will connect to the BNC video input of the Zavio V1100 using the existing RG59 coax cable that is in place.
3. The V1100 has a BNC loop output will be connected to the video input of the DVR. I suggested that she place the video server on the same shelf as the DVR and use this RG59 jumper cable to connect it to the DVR.
4. The V1100 video server will be connected to her network router using CAT-5 cable. Her network router and modem sit in the same closet as the DVR, so this is easy for her to connect as well.
5. The tech support team at CCTV Camera Pros can help setup the port forwarding rules required to make the video from the server available over the Internet.
6. We can provide instructions to her webmaster or we can assist with setting up the video embed code on her website. This page documents one way embed Zavio IP cameras and video servers into a  web page. It is done a little different above on this page because I wanted to make the video display responsive for desktop and mobile web browsers.
7. The iDVR-PRO4A has a spot monitor output that can be used to display a single camera, scroll from camera to camera and / or display all 4 cameras on the screen at once. This public display monitor will be mounted inside the laundromat. More information about the iDVR-PRO spot monitor feature can found here and a demo video can be found here.
8. The iDVR-PRO is also connected to her network router so that the two business owners can login to the DVR to view all cameras from Mac, Windows, iOS, and Android. Demo videos of the remote camera access can be found here.

Live Streaming Cameras for Business Websites

Besides sharing how a CCTV camera can be embedded on a website, I also wrote this article because I thought that the idea of using an “Internet webcam” specifically for a laundromat website was great. Besides laundromats, there are certainly a lot of other businesses that should think about installing a camera at their business to show online customers how busy they currently are.

Here are some other ideas for using a live camera on a businesses website.

• Hotels and resorts can use cameras to show a live view of their property.
• Night clubs can stream a live view of events or special areas of interest at their location.
• Zoos and wildlife sanctuaries can provide a live view of animals.
• Waterfront restaurants can show off thier oceanfront or lakefront views.
• Ski resorts can show a live view of the slopes.
• Golf courses can show a live view of one or more holes.

One last thing that I want to mention. Using a CCTV camera with a network video server or using IP cameras to stream live video on a website obviously has limitations. Besides the camera and server, the quality of the video your website visitors will experience is dependent on the Internet speed at the location of the camera. Specifically, the upload speed (which is usually slower that download speed from cable and DSL providers) is what your camera uses to stream video. Also, network video servers and IP cameras are usually limited to 10 simultaneous viewers or less. This means that depending on the specific camera or server you use, the webpage that you embed your video stream into will be limited to about 10 visitors at a time.

There are hosted video streaming options that charge a monthly fee that support unlimited users. They generally cost $300 a month or more which is not feasible for a small business. Using CCTV cameras or IP cameras provides an affordable low volume alternative with no monthly fees (besides the required high speed Internet connection).

Do you need help in planning how to implement a live camera for your website? Please contact me if you would like help from me. I can be reached at mike@cctvcamerapros.net.