There has been a lot of people who have asked how to stream an IP Camera to a Webpage. Well here we go!
Lets start by gathering the software and Hardware that we will need.
- Unreal Media Server - Free Version is fine for a few cameras.
- WampServer – To host your webpage [optional]
- WordPress [pen source website creation tool written in PHP]
- Computer that will run this Software
- IP Camera [ EL series IP Cameras]
Lets start by setting up our camera. For this article I will be using the <http://www.securitycameraking.com/1.3-megapixel-ip-indoor-59161-prd1.html” target=”_blank”>IPOD-EL1MPIR50-W
We will be setting the camera up to monitor the front door. Keep in mind that we are just getting the camera’s feed directly from the IP camera and not from an NVR. This means that you will not be able to go back and review recorded footage, just the live feed from the Webpage.
My Camera is set to 192.168.1.164. I will go ahead and install Unreal Media Server.
RTSP URl is : rtsp://xxx.xxx.xxx.xxx:554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif
Replace the X’s with your Network Camera IP address
In this video you will see how to add your IP camera so that we can go from RTSP to RTMP using the Unreal Media Server and also stream it out.
What we need to do next is open some ports on your computer, in my case Windows 8.1
You will need to Allow Outbound Data from ports 5119 [Players] and 5113 [Live Servers] on the Firewall Rules. For this you need to Open your Control Panel and navigate to Windows Firewall then click on Advanced Settings. This will open a new Window where you can add your Firewall Rules. Once you are in this new window you can add the rule by going on the left pane and clicking on “New Rule”. Then Tick the Radio Button, the one beside the “PORT” and click Next and then go and tick on the Specific remote Ports. Once you have done this, the area where you can specify the port number will allow you to add the port number that you need for Unreal Media Server. I am using the default which are the 5119 and 5113. At this point you are done with setting your Firewall Rules to allow outgoing Data from this application.
Great! We have finished these steps. Now since we are going to Host our own webpage we are going to be using Wamp Server. Wamp will allow you to Develop as well as Host your Domain name. Keep in mind that it is best to get a Domain name with a company that will allow for Dynamic IP Updates such as DYN.com. If not you will have to have your ISP give you a static IP. This is done so that the ISP will not change your IP address so when navigating to your domain/webpage your visitors do not end up in limbo as the address has changed. For example it is like setting your GPS to go to 123 Johnson street and all of a sudden your house is not there and now it is in 129 Johnson street .
Lets get started!
Download and Install Wamp onto your computer.
Open the Setup File and click next and accept the agreement. Then select where the WAMP folder will be residing. The default is fine. Tick the boxes to get your Shortcuts, click next and then install. In some cases it will ask you for the default web browser which is fine, then select your PHP mail Parameters. Default is fine, Localhost and your email address. Once you do this the application should start and if it does not, launch it using the Short Cut in your Desktop.
Once you have installed WAMP onto your computer you want to configure some settings before you can host your Web Page.
For this we will be navigating to the WAMP icon on the Tool Tray. Right-click on the icon and click on “Apache” then select “httpd.conf open”, this will open up a file.
It is easier if you choose to open it with Notepad ++. This will show the file in its structure versus notepad, as notepad might clump everything together and you end up either corrupting the file or making the wrong changes.
You want to click on your keyboard CTRL and F at the same time to open the Finder. Make sure that the file is selected and your cursor is on another application. Once you have opened up the Finder tool you want to input the following “servername”. Once you have located this on the document you want to change port 80 to 8080.
After doing this open again the Finder tool and search for “Listen”. Once you have located this, you want to find and change the line “Listen 80″ to “Listen 8080″ and also make sure that the “#” is removed. This means it is enabled.
Save the file and restart all services by clicking on the Wamp Icon on the Tool Tray. Once it has restarted, open your Web Browser and Navigate to http://localhost:8080/phpmyadmin.
If it gives you the Following Error “Forbidden”, you want to go and modify a file called phpmyadmin.conf in “C:\wamp\alias”. Open it up with the notepad ++ application and make these changes.
Order Allow, D