Securely Display ANY IP Cam On Webpage Using Synology NAS

Questions about hosting a Website, using MySQL, PhP or MariaDB may be posted here.
Forum rules
1) This is a user forum for Synology users to share experience/help out each other: if you need direct assistance from the Synology technical support team, please use the following form:
https://myds.synology.com/support/suppo ... p?lang=enu
2) To avoid putting users' DiskStation at risk, please don't paste links to any patches provided by our Support team as we will systematically remove them. Our Support team will provide the correct patch for your DiskStation model.
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Securely Display ANY IP Cam On Webpage Using Synology NAS

Postby theuberoverlord » Wed Apr 02, 2014 5:11 am

This Interface supports both accessing your IP Cameras totally securely for private personal use or for public Internet use by others. Live example IP Cameras are used to demonstrate both types of usages below.

Note: Some images are small in some of the live IP Camera demonstrations. They can be any sizes.

Complete List With Links To All Live IP Camera Example Demos:

http://107.170.59.150/

New Live Demonstrations were added for Hikvision and Panasonic IP Cameras here:

http://107.170.59.150/Hikvision/

Minglarn wrote:Don, you are a genius. So easy, yet so powerful scripts. Thanks. Will implement this on my web page.

Again, thanks!

From: http://foscam.us/forum/showing-secure-m ... tml#p43353

Minglarn wrote:Great info Don! But, I still have issuies get access logs from my Synology NAS so I did a small add to your script..

I've put these lines to SecureImageDisplayLogin.php script...

From: http://foscam.us/forum/showing-secure-m ... tml#p43582

Image

Free SecureImageDisplay Version 4.0

Image sizes for the examples shown here are small for demonstration purposes. You can use any sizes.

Works with any IP Camera
Image
Accessible From ANY Computer, Laptop, Tablet, Phone and TV

This Interface works with ALL Foscam IP Camera models and virtually all other IP Cameras as well as any imaging devices that can supply Snapshots via HTTP and/or HTTPS and is compatible with any and all Internet browser capable devices running on any Operating System and using any browser. From Computers to Tablets to Phones and TVs.

Here are the current options this Interface supports:

Custom Logo in IP Camera Images
Custom Text in IP Camera Images
Require Unique User and Password to Access
Allows HTTPS Access Even For MJPEG Based IP Cameras
Set Time Limit for Viewing
Extended Access Restrictions for ALL Foscam IP Camera Models
Save Last Real-Time Image From Foscam IP Camera To Disk
Real-Time Image Request Throttling
Auto-Recovery Image Fallback
Automatic Image Percentage Resize
Automatic Image Fixed Size Resize
Insert Date Time and Custom Text Into Images
Time Zone Offset When Web Server Is In Another Time Zone
Controlled Privacy
Automatic Image Refreshing Using HTML Front-End ("Example Included")

Note: Some demo IP Cameras can be down at times. Which I have no control over. If you see nothing using a link for an example here. Please try another IP Camera example link here. There are many different demo IP Cameras and examples here.

Note: Check the timestamp for each image below. If the Demo IP Camera is offline ("Last image displayed from disk") you will not be able to view the camera in real-time if you click on that IP Cameras image shown below.

Click on any of the Ten Foscam U.S. IP Demo Camera images below to view a specific IP Camera in Real-Time using unsecure methods. If the IP Camera in question natively supports HTTPS then even the unsecure Interfaces can be changed to use HTTPS vs. HTTP and be secure as well.

Last Real-Time Images Stored On Disk Displayed - CDT Time
ImageImageImage
ImageImageImage
ImageImageImage
Image

Live Demonstrations Showing ALL Foscam U.S. Demo IP Cameras At The Same Time Using Secure Methods Using Automatic Refreshed Images:

Without Login Required:

http://107.170.59.150/foscam/FoscamUS.htm

User Name and Password can be ANY combination of characters. Please note that when using HTTP the User and Password are sent in the clear in this Login example. User name is admin Password is admin

With Login Required:

http://107.170.59.150/foscam/SecureImageDisplayLoginUS.php

The same can be done using HTTPS however the example is using a self-signed certificate so you will see a warning:

Without Login Required:

https://107.170.59.150/foscam/FoscamUS.htm

With Login Required:

https://107.170.59.150/foscam/SecureImageDisplayLoginUS.php

Extended Access Restrictions for all Foscam IP Camera Models

If someone were to try to access the Interface that was not allowed to do so and they tried to grab Snapshots or Refreshed Snapshots from your Foscam IP Camera(s). There are Extended Access Restrictions you can implement and use with the Interface. To deny anyone access to the Interface directly. Even if they know the file location of the Interface on the web server.

Example ("Compare above links HTML source code to links below"):

http://107.170.59.150/foscam/FoscamUSAttempt.htm

https://107.170.59.150/foscam/FoscamUSAttempt.htm

Note: Check the timestamp for each image below. If the Demo IP Camera is offline ("Last image displayed from disk") you will not be able to view the camera in real-time if you click on that IP Cameras image shown below.

Click on any of the Seven Foscam.com IP Camera Demo images below to view a specific IP Camera in Real-Time using unsecure methods. If the IP Camera in question natively supports HTTPS then even the unsecure Interfaces can be changed to use HTTPS vs. HTTP and be secure as well.

Last Real-Time Images Stored On Disk Displayed - China Time
ImageImageImageImageImageImage

Live Demonstrations Showing ALL Foscam.com Demo IP Cameras At The Same Time Using Secure Methods Using Automatic Refreshed Images:

Without Login Required:

http://107.170.59.150/foscam/FoscamChina.htm

User Name and Password can be ANY combination of characters. Please note that when using HTTP the User and Password are sent in the clear in this Login example. User name is admin Password is admin

With Login Required:

http://107.170.59.150/foscam/SecureImageDisplayLoginChina.php

The same can be done using HTTPS however the example is using a self-signed certificate so you will see a warning:

Without Login Required:

https://107.170.59.150/foscam/FoscamChina.htm

With Login Required:

https://107.170.59.150/foscam/SecureImageDisplayLoginChina.php

Extended Access Restrictions for all Foscam IP Camera Models

If someone were to try to access the Interface that was not allowed to do so and they tried to grab Snapshots or Refreshed Snapshots from your Foscam IP Camera(s). There are Extended Access Restrictions you can implement and use with the Interface. To deny anyone access to the Interface directly. Even if they know the file location of the Interface on the web server.

Example ("Compare above links HTML source code to links below"):

http://107.170.59.150/foscam/FoscamChinaAttempt.htm

https://107.170.59.150/foscam/FoscamChinaAttempt.htm

The Facts

One of the downsides of accessing your IP Cameras over insecure Internet connections or displaying "Real-Time" image(s) of your Foscam IP Cameras in Social Media sites, Blogs, Forums, Web Pages, Instant Messengers or even in Emails as an image or as links. Is that by doing so, you expose and show your Foscam IP Cameras DDNS and Port or ISP IP Address and Port and User Id and Password credentials for your Foscam IP Camera.

This Interface provides methods that resolve the above issues with future versions and functionality to come. Even while using HTTP unsecure access methods to any of your Foscam IP Cameras.

Secure Private Use

These images and their very secure methods. Contain no reference to your Foscam IP Cameras Model information, DDNS, IP Address or Cameras User credentials on where the Foscam IP Camera images originated from or how they were obtained.

In fact. These methods can be used to check on your Foscam IP Cameras when you are using any Internet browser capable device that is using public or semi-private Internet access. Such as public WiFi access or even your workplace and other semi-private internet connections for your Internet connection at that time.

Where you do not trust or wish to broadcast ANY information about your Foscam IP Cameras when accessing them on any risky or potentially unsecure Internet connection.

Where by doing so. Could and can expose you to Identity Theft or other IP Camera abuses. If others could use that exposed information. To abuse your IP Cameras by changing their position and/or viewing their video streams at anytime and/or gain access to your IP Cameras configurations. Thereby and possibly ("Depending on the User Id Level you used to access your IP Camera when using those unsecure Internet connections") others could also learn your Email and/or FTP User Ids and Passwords for them. Why take that RISK on a unsecure internet connection when there no longer is a need to do so?

Note: Once someone learns where your IP Camera is located ("DDNS and/or ISP IP Address") over an unsecure Internet connection. While also having any valid IP Camera User Id and Password information that was exposed because of using that unsecure Internet connection. They can connect to your IP Camera and based on the IP Cameras User Id level and Password that they ("Sniffed") and captured over a unsecured Internet connection. They can also determine what type of IP Camera is being used during that ("Sniffing") process.

At the very minimum, they would have unfettered 24/7/365 access to your IP Cameras video streams anytime your IP Camera was online and still using that same DDNS and Port or ISP IP Address and Port and User Id and Password for that IP Camera, that they ("Sniffed") on that unsecure Internet connection. That's a "Best Case" scenario and definitely not the worse case scenario and for sure, not worth the risk.

Some corporate, workplace, Hotspots and other Internet connections or their proxies. May block and not allow access to ports other than ports 80 and 443. This gets around those blocks as well. Allowing you to always have access to your Foscam IP Cameras.

Secure Public Use

Here are methods to securely display your Foscam IP Cameras "Real-Time" in Social Media sites, Emails, Forums, Blogs, Web Pages, Instant Messengers and anyplace where you can include an image or links in your post. As well as your own web pages which can now include a "Real-Time" Snapshot image of your Foscam IP Camera.

Without needing to include or expose any reference to your Foscam IP Cameras DDNS, IP Address or Foscam IP Cameras User credentials. With or without your own custom text and/or date and timestamp embedded in the actual image(s) displayed.

This is an excellent method for example. To display a current single image or automatically refreshed images of any Foscam IP Camera. MJPEG or H.264 based, in Real-Time, on a web page at the time a visitor visits and views that webpage. Without giving up any information about your Foscam IP Camera location or user credentials. While and when doing so.

Download

Both these examples require having access to a Web Server with PHP.

In some cases. Web Hosting services do NOT allow access to non-standard outgoing ports. Meaning a port other then port 80. If your Web Hosting service will not open a non-standard port to your current Foscam IP Cameras port. You will be forced to use port 80 for your Foscam IP Camera, to get this to work. The php script automatically checks and reports if this is the case.

Here are the ten files required for this Interface. All in a .zip file:

http://107.170.59.150/V40/SecureImageDisplayV40.zip

These examples below are using a 160x120 and 320x180 resolutions for live demonstration purposes. But you can display any camera resolution for your Real-Time Snapshots or automatic refreshed Snapshots of your Foscam IP Camera on Social Media sites, Blogs, Forums or anywhere that allows you to add an images and/or links to your post. Including your Emails.

Examples

Both examples below are using the same Interface with different configuration options.

First Example - Simple Proxy

The first example. Simply pulls a current image from your Foscam IP Camera in "Real Time" and displays it on the web page that references it. Left is Foscam FI8918W. Right is Foscam FI9821W-V2:

Image Image

The images you see above. Are Real-Time images that were just created when you loaded and viewed this Forum post web page. Not old images from when this post was created and posted here in the forum.

You can do the same on any Forum, Blog, Social Media Site, Web Pages, Instant Messengers and in Emails that allows you to include images and/or links in your posts. Including your own Web Pages.

Even if the you are not allowed to include images in your posts. You can instead include a link that when clicked on can display a Real-Time image of your Foscam IP Camera. With or without custom text included in those images. Without exposing any information about your Foscam IP Cameras DDNS, ISP IP Address, Port, User Ids or Passwords to do so. Example:

Secure Single Images Without Custom Text

Foscam MJPEG based IP Camera:

http://107.170.59.150/FoscamPullImage2.php

Foscam H.264 based IP Camera:

http://107.170.59.150/test/SecureImageDisplayH264.php

You can also use these same secure methods that do not expose any information about your Foscam IP Camera. Such as your DDNS, ISP IP Address, Port, User Ids and Passwords. To display your Foscam IP Camera using automatic Real-Time images that refresh at the rate you desire by embedding the logic in a Web Page or including a link in Social Media sites, Blogs, Forums and Web Pages, Instant Messengers and your Emails. With or without custom text. Example:

Secure Images Automatically Refreshed Without Custom Text:

http://107.170.59.150/SecureRefreshWithoutText.htm

Display Multiple Cameras With Automatic Refreshed Secure Images

Images Automatically Refreshed With Multiple Cameras At The Same Time ("Same camera being used for live demonstration purposes"):

http://107.170.59.150/TwoCameras.htm

Note: You can display as many Foscam IP Cameras, at the same time as you wish. Each configured differently or the same. Each with or without custom text and using any combination of Foscam IP Camera models with each being the same or different sizes. In any display configuration you wish. With ALL Foscam IP Cameras being displayed. Using these totally secure methods.

The Web Server is not storing any image file on disk, in the above example.

This means that if your camera was offline or not available. That no images would be shown.

This example is simply acting as a go-between for where the images will be posted and the Foscam IP Camera. So that the location and User credentials for the Foscam IP Camera remain private and hidden.

Second Example - Custom Text - Automatic Throttle & Fallback

This example actually does create a single jpg file for each Foscam IP Camera on the web server, which is reused as needed. This can also help you control web server resources when using methods like this unlike example #1, which will try and pull a image, each and every time from your Foscam IP Camera.

This second example, has many benefits over the first example, shown here.

1. It stores the last real-time image received from your Foscam IP camera on disk ("With any changes you configured") so that IF your Foscam IP Camera was offline or not available. The last image stored on disk will be used automatically for image fallback and displayed automatically. Not letting anyone know your Foscam IP Camera is offline or not available. Assuming that your image is not using a timestamp of course.

2. You can set the number of seconds since the last real-time image received from your Foscam IP camera was written to disk to get a fresh image directly from your Foscam IP Camera. So that you can better control resources when/if needed. Only getting a fresh image from your Foscam IP Camera when or if the image on disk is greater then x seconds old. Automatically throttling real-time requests to your Foscam IP Camera.

3. Allows you to insert your custom text and/or a date timestamp into the actual image and store it on disk. Technically it's also possible to add your own logo to your Foscam IP Cameras images displayed, with few changes to do so.

4. Privacy. Say you don't want real-time images of your Foscam IP Camera displaying all the time. You can simply temporarily change the Password for the User Id that the Interface is using. In the Foscam IP Cameras configuration.

This will cause the Interfaces real-time request to the Foscam IP Camera when trying to get a real-time image to fail. Because the Interface will now be using the wrong Password.

With the Disk logging configuration on in the Interface. Then the last real-time image from your Foscam IP Camera will be used as the image displayed.

You then can at anytime later. Change the Password back to what the Interface is using and real-time images from your Foscam IP Camera will then be getting real-time images from your Foscam camera. Instead of the last image on disk.

Giving you privacy when you need it. While not displaying empty images while doing so.

5. You can access the last image stored on disk from the IP Camera directly.

Image Image

Image

The images you see above are "Real-Time" images that were created when you loaded and viewed this web page not old images from when this Forum post was created. They also create a single image file on the web server for each camera, that is reused and updated when this happens and that file can also be accessed directly as well. If any of the IP Cameras above were offline or not available, then the last image received from that IP Camera would be displayed above automatically.

Again, with no exposure of where the Foscam IP Cameras DDNS, or IP Address that created the image is located or any User Credentials for the Foscam IP Camera that produced the image above.

http://107.170.59.150/ipcam2.jpg

http://107.170.59.150/test/ipcam1.jpg

http://107.170.59.150/test/ipcam4.jpg

If any of the above Foscam IP Cameras were to go offline or become not available. Then the last real-time image received from the Foscam IP camera which was stored on disk. Would instead be used automatically and presented. Instead of a real-time image. This allows nobody to know that your Foscam IP Camera is offline or not available ("Assuming that you are not including date and time in your images").

Only the last real-time image received from your Foscam IP Camera is saved to disk, when using the disk option in the configuration for the Interface. So there is not any file clutter going on with multiple images from the same Foscam IP Camera being saved on disk.

Note: If you use the links above to get the files created by the images above, multiple times. Your browser may cache the files when using the link. Because the request to get the files, are not a unique request. However, the images shown above. Will be unique each and every time your refresh this Forum post web page, because it forces the images to be unique.

Both of these examples are TOTALLY secure methods. Simply using different configuration options available In the Interface. Allowing you to view your Foscam IP Cameras over unsecure Internet connections as well as share images of your Foscam IP Cameras. While providing total ambiguity about your Foscam IP Camera Model and maintaining the privacy of the DDNS, IP Address, Port and User Credentials of your Foscam IP Cameras.

You can create different copies of the Interface configured to be used for different purposes for the same Foscam IP Camera and you can use this Interface to display multiple Foscam IP Cameras at the same time. You can also reference and use any images created by the Interface that are stored on disk as the last image directly.

Secure Images and Refreshed Images Using HTTPS

Note: Even with the Foscam H.264 based IP Camera models that do support HTTPS. There is no requirement to port forward the HTTPS ports for those cameras to use these HTTPS methods with this Interface. Instead the Interface will use your SSL certificate on your Web Site avoiding any certificate warnings. If you have a valid and not self-signed SSL certificate for your Web Site.

The Interface also allows you to access any Foscam IP Camera model even MJPEG based camera models using HTTPS if desired. Accessing your Foscam MJPEG based IP Camera models, using HTTPS is normally not supported.

This can be very helpful if you wish to add your Foscam IP Camera in HTTPS based Web Pages.

Please note the Web Site being used for the examples is using a self-signed certificate which is why you will see a warning when using the example HTTPS links below:

Foscam MJPEG based IP Camera Single Secure Image:

https://107.170.59.150/ipcamera.php

Foscam H.264 based IP Camera Single Secure Image:

https://107.170.59.150/test/SecureImageDisplayH264WithText2.php

Two Foscam MJPEG based IP Cameras With Automatic Secure Image Refresh ("Same camera being used for live demonstration purposes:

https://107.170.59.150/TwoCameras.htm

Two Foscam H.264 based IP Cameras With Automatic Secure Image Refresh:

https://107.170.59.150/test/SecureImageDisplayH264Full2.htm

Secure Profile Pictures

In some cases, if your images are sized correctly. You can even use this Interface as your profile picture in Social Media sites, Blogs, Forums other Web Sites and even with some Instant Messengers. Allowing you to have Real-Time images of your Foscam IP Camera instead of any static images you currently maybe using there.

Unsecure Methods

These methods do not require having access to a web server. The actual HTML code can instead be stored on any browser capable device or even stored as an Email attachment and accessed from any browser capable device as needed.

Here are methods that will work with ANY IP Camera that will simply display refreshed images of your IP Cameras in a web page at your selected refresh rates and sizes. It only requires 1 line of HTML code per camera:

http://foscam.us/forum/a-how-to-embed-any-foscam-ip-camera-in-webpage-using-1-line-t9113.html#p43654

Here are unsecure methods to display and access your Foscam IP Cameras while using PTZ ("Pan/Tilt/Zoom") controls in a webpage as well:

MJPEG Based IP Cameras:

http://foscam.us/forum/post10970.html#p10970

H.264 Based IP Cameras:

http://foscam.us/forum/post20338.html#p20338

Dona
Last edited by theuberoverlord on Mon May 04, 2015 8:59 pm, edited 11 times in total.
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Sat Nov 29, 2014 1:33 am

*** Now Supports Adding Custom Logos and Images ***

This Interface supports both accessing your IP Cameras totally securely for private personal use or for public Internet use by others.

Image

Totally Secure. Any sizes, shapes, locations and clickable or not clickable. Embedded in your cameras images as they display. Use as a marketing tool or watermark for your cameras. Viewable by any Internet browser capable devices from Computers to Tablets to Phones and TVs.

This may seem trivial at first. But imagine being able to have your Logo or images ("Actually embedded in your cameras live images being displayed") and that when specific Logos/Images are clicked on. They take you to specific places based on what Logo/Image was clicked on. Social media sites, other web pages. Your choices are endless.

Here is a live camera example using multiple Logos/Images, Custom Text, Date/Time and Camera Controls. The "Request More Info" Logo/Image button accepts a click or a touch on that Logo/Image button alone and the other Logos/Images or camera viewing area is not clickable and Logos/Images stay where they are, when the camera viewing area is moved or zoomed:

http://107.170.59.150/foscam/SecureImag ... USLogo.htm

You could even embed Preset image buttons in the cameras images, that when clicked on, move to cameras view to specific camera views.

Live camera examples, without camera controls and where when the "Request More Info" Logo/Image button" is clicked on, it takes you one place and any other areas of the live cameras views, when clicked on, take you to another place.

* U.S. China time difference allows seeing cameras in daylight/IR

Live H.264 Examples:

U.S. http://107.170.59.150/FI9805WLogo.htm

China http://107.170.59.150/FI9828WCLogo.htm

Live MJPEG Examples:

U.S. http://107.170.59.150/FI8918WLogo.htm

China http://107.170.59.150/FI8919WCLogo.htm

All the examples above, also support HTTPS secure access methods even with IP Cameras which don't natively support HTTPS access methods.

Don
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Wed Dec 24, 2014 2:46 pm

Here are some more details on some of the features of this Interface which have not been explained in much detail before.

Different Ways This Interface Can Be Configured To Operate

Code: Select all

Browser (HTTP)  <-> Interface <-> IP Camera (HTTP)
Browser (HTTP)  <-> Interface <-> IP Camera (HTTPS)
Browser (HTTPS) <-> Interface <-> IP Camera (HTTPS)
Browser (HTTPS) <-> Interface <-> IP Camera (HTTP)

The above allows you to configure the flow end-to-end, on a per camera basis on how IP Camera controls will be used and/or how images will be pulled from IP Cameras. It also allows you to control and display IP Cameras which don't natively support HTTPS access methods in web pages which are using HTTPS vs. HTTP. For both private and public use.

Regardless of what methods are used above. At no time does any information about a IP Camera travel over the Internet from/to the Interface to any devices browser about a IP Cameras DDNS, ISP IP Address, Port or User credentials.

The Interface also supports using a optional unique logon and password, to access IP Cameras. Even if the IP Camera itself, does not support HTTPS access methods. This allows you to more securely use those logon credentials to access that or those IP Cameras. Without having those logon credentials being "in the clear" as they would normally be when using HTTP access methods.

For public use. Because the Interface has a configuration option to store the last image from the IP Camera received to disk. It allows one to configure pulling that image from disk vs. going to the IP Camera each time for a fresh image. Based on how old that image on disk is. Before grabbing a fresh image from the IP Camera. Which is a configuration option in the Interface. There is no file clutter to do this. Since only the last image received from the IP Camera is stored on disk and the same image file on disk, is reused when newer images are received from the IP Camera are saved.

As an example. Say you had 100+ website visitors simultaneously viewing a web page that the Interface was used in and that web page was automatically refreshing IP Camera images once a second, in that web page. If you configure the Interface to get the IP Cameras image from disk if that image on disk is one second old or less. Then, only one website visitor would cause a fresh image to be pulled from the IP Camera. The others would automatically be pulling the image from disk for those IP Cameras instead. If that image was one second old or less. When those others made their new image request for that IP Camera. This allows you to throttle real-time requests to IP Cameras, automatically. For public use.

Since the Interface allows IP Camera images to be resized on a per IP Camera basis. It allows you to display as many IP Camera images at the same time at whatever resolutions you choose. For both private and public use. On a per IP Camera basis. Not being restricted with only using the actual size image provided by the IP Camera itself. You can create copies of the Interface that may be better suited for mobile devices. While another copy of the Interface controlling/displaying the same IP Cameras would use larger IP Camera image resolutions. For other devices. With or without any custom text and/or logos/images you merged with the IP Cameras original images.

For private use. Because the Interface is compatible with all Internet browser capable devices. It allows you to instantly check on the health and status of many IP cameras at the same time. From virtually any Internet browser capable device. Without any need to first install any other software first, on any device. While also allowing using secure access methods to be used, even if the IP Cameras themselves don't support secure access methods. While also controlling bandwidth usage while doing so, if needed.

With security vulnerability abuses increasing daily. It's never a good idea to ever expose publicly or privately over insecure Internet connections. The DDNS or ISP IP Address, Port or user credentials of any IP Camera. When/If that can be avoided. Which this Interface can do and does for both private and public access to your IP Cameras. To do otherwise. Is truly inviting trouble, with open arms.

For the download link to this Interface and many live demonstrations using this Interfaces features using live IP cameras. Please go here:

viewtopic.php?f=20&t=83820#p314943

Don
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Wed Jan 07, 2015 3:35 am

It's important to note that this interface is dual purpose. It can be used to securely access your IP Cameras for personal use as well as in webpages on websites for public access securely by others. Using HTTP or HTTPS access modes even for IP cameras that don't support HTTPS. Never exposing any information about your IP cameras DDNS, ISP IP Address, Port or User credentials.

The Interface works with all IP Camera models.

Here is an example of adding an optional transparent .png image for a help button that can be merged with your IP Cameras images. Which you can also make clickable as your IP Cameras images are being displayed in real-time. Both for static and automatic refreshing real-time images from your IP Cameras:

Image

Live example below of the IP Camera used above. Using automatic real-time refreshed images from the same IP Camera. Once you use the link below. When you click on the "Help" button area you are taken to the first post here. Any other area in the IP Cameras image is not clickable:

http://107.170.59.150/ok/SecureImageDisplay.htm

The IP Camera being used above is a Foscam FI8904W. Which is a MJPEG based IP Camera that does not natively support HTTPS access methods. This Interface allows both HTTP and HTTPS access methods to be used with any IP Camera.

The server providing the HTTPS example below using the same IP Camera as above. Is using a self-signed certificate for demonstration purposes. So you will see a warning message because of that, when using the link below:

https://107.170.59.150/ok/SecureImageDisplay.htm

If you view the HTML source code for the above examples. You will see that absolutely nothing is exposed about the IP Camera being used in the examples. No DDNS, no ISP IP Address, no Port or User credentials are exposed or made known. Making the use of this Interface for private and public use to access your IP Cameras. Totally secure.

The Interface itself is also protected from direct use as well. Example:

http://107.170.59.150/ok/SecureImageDisplay.php

Restricting how and where the interface can be used from. The Interface also supports forcing the username and password of your choice in order to access the Interface as an option. With as many IP Cameras being displayed at the same time as you choose.

This specific image used in these examples shown here for the help button, is in the public domain and is free to use and can be found, edited, resized and/or downloaded there. All at the same website below:

https://openclipart.org/detail/109645/h ... -by-jhnri4

Just wanted to give you some idea of how easy it is to find/locate images in the public domain that can be used to merge with your real-time IP Cameras images. Without any need or requirement to be a graphics artist. Which you can also make clickable, if you desire or to simply use as a watermark or logo.

Complete details about all the abilities of this totally secure Interface for your IP Cameras ("Which are many"), can be found here:

http://foscam.us/forum/topic8721.html

Don
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Mon May 04, 2015 8:57 pm

Here is live working example using one IP Camera with the clickable images and logos option for this Interface enabled. That after 10 IP Camera images are displayed. A "Resume" button is displayed and must be clicked to continue.

This can help to limit bandwidth while staying on the same web page vs. jumping to another web page after a specified time period has elapsed. Which was the only option to help limit bandwidth prior to this new option.

Since this method is not based on time. It makes sure that whatever a web page visitors Internet bandwidth speed is will not impact the amount of images being displayed before a "Resume" button is presented:

http://107.170.59.150/FI9805WBandwidth.htm

1. The above allows 10 images from the IP Camera to be displayed. It does not matter if that takes 2 seconds, 2 minutes or 2 hours to display those 10 images from the IP Camera.

In the example above. Once 10 images from the IP Camera are displayed. A button prompting to resume is displayed and when clicked on. The button then disappears and then 10 more images from the IP Camera are displayed. A button prompting to resume is displayed and when clicked on. The button then disappears and then 10 more images from the IP Camera are displayed.

This would continue forever. However the example above will go to a different web page after two minutes no matter how few or many times the resume button is clicked on. Effectively combining both the old and the new bandwidth limiting options this Interface supports. The example code below, does not included the jump to another web page after two minutes, additional logic. You can review the HTML source code of the link above to see that. If needed.

Of course you most likely want more than 10 images from the IP Camera to be displayed for each web page visitor viewing your IP Camera before displaying the button to resume.

So to change that, then you need to change the value of:

var maxCameraImages = 10;

To some other value other than 10. It should be noted that since this covers all IP Cameras on the same web page. The more IP Cameras you display on the same webpage you should increase the value of maxCameraImages based on the number of IP Cameras being displayed in the same web page.

So if you wanted roughly 10 images per IP Camera to be displayed for 5 IP Cameras being displayed on the same web page before a resume button was displayed. Then this would be the correct value for maxCameraImages:

var maxCameraImages = 50;

I say roughly. Because some IP Cameras may respond slower than the other IP Cameras on the same web page. So in the above example with 5 different IP Cameras being displayed on the same web page. After a total of 50 images for any IP Cameras were displayed, Then the resume button would display.

The JavaScript variable delayBetweenImages located in the <head> section of the HTML. Is used to control any delays/wait time, before requesting new images from the IP Camera after the last image has been displayed for the IP Camera. Which the example has this value set to 10 Milliseconds or 10/1000 of a second.

The JavaScript variable delayBetweenImagesOnError located in the <head> section of the HTML. Is used to delay a request for a new image from the IP Camera when there was an error trying to get the last image from the IP Camera. The example has this value set to 5000 Milliseconds or 5 seconds.

You can change both the values of these variables to suit your own needs.

The JavaScript variable currentCameraImages located in the <head> section of the HTML. Should be set to the number of IP Cameras being displayed in the web page in both places where it's being used in the <head> section of the HTML. So, if only one IP Camera is being displayed on the web page then it should be currentCameraImages = 1; Whereas if 5 IP Cameras were being displayed in the same web page then it should be set to currentCameraImages = 5; Again in both places where it's being used in the <head> section of the HTML web page.

2. The custom code is where it should be. On the client side, in the HTML/JavaScript of the browser being used to view the IP Camera(s).

3. This resume button logic should not be about time and should be about bandwidth instead. Because it's really all about not allowing someone to use up bandwidth by say accidentally or on purpose, minimizing a browser window which could be viewing the cameras forever. Wasting bandwidth. While still staying on the same web page.

It should be noted that this Interface always supported a timeout option that when a specific timespan was reached this Interface could jump to another web page.

These are just other methods to deal with the same thing. But not by jumping to another web page when that maximum numbers of IP Camera images have been displayed or a timespan is reached and instead staying on the same web page and adding a resume button that requires it to be clicked on, before continuing to display IP Camera images on the web page.

Example: Why using timespan for a resume button is a bad idea. A web page visitor with a slow Internet connection will still be able to view as many images from the IP Cameras as someone who has a fast Internet connection before seeing the resume button. This might not be the case if the resume button was based on a timer of how long the web page visitor was viewing the web page.

Because of #3. The example logic is set to a maximum number of IP Camera images being displayed before a resume button is displayed to continue and not based on how long the web page visitor has been viewing the web page.

There are four sections of custom code that need to be added to the client side HTML/JavaScript in the web page displaying your IP Cameras using this Interface and this resume button feature:

A. In the HEAD section of the HTML the following needs to be added:

Code: Select all

<head>
<script type="text/javascript">
var delayBetweenImages = 10;
var delayBetweenImagesOnError = 5000;
var maxCameraImages = 10;
var currentCameraImages = 1;
function resetBandwidth()
{
   document.getElementById('BandWidthExceeded').style.display = 'none';
   document.getElementById('BandWidthExceeded').style.visibility = 'hidden';
   currentCameraImages = 1;
   document.getElementById("ourcam1").src = document.getElementById("ourcam1").src.substring(0, (document.getElementById("ourcam1").src.lastIndexOf("t=")+2))+(new Date()).getTime();
}
function checkBandwidth(ipCamera, error)
{
   if (currentCameraImages >= maxCameraImages)
   {   
       document.getElementById('BandWidthExceeded').style.display = 'block';
       document.getElementById('BandWidthExceeded').style.visibility = 'visible';
   } else {
       currentCameraImages++;
       if (!error)
           setTimeout(function() {ipCamera.src = ipCamera.src.substring(0, (ipCamera.src.lastIndexOf("t=")+2))+(new Date()).getTime()}, delayBetweenImages);
       else
           setTimeout(function() {ipCamera.src = ipCamera.src.substring(0, (ipCamera.src.lastIndexOf("t=")+2))+(new Date()).getTime()}, delayBetweenImagesOnError);
   }
}
</script>
</head>

A line like the below lines. In the function resetBandwidth above. Needs to be present for each IP Camera being displayed in the same web page. So, if you had five IP Cameras being displayed in the same web page then you would need one line for each IP Camera:

Code: Select all

document.getElementById("ourcam1").src = document.getElementById("ourcam1").src.substring(0, (document.getElementById("ourcam1").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam2").src = document.getElementById("ourcam2").src.substring(0, (document.getElementById("ourcam2").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam3").src = document.getElementById("ourcam3").src.substring(0, (document.getElementById("ourcam3").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam4").src = document.getElementById("ourcam4").src.substring(0, (document.getElementById("ourcam4").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam5").src = document.getElementById("ourcam5").src.substring(0, (document.getElementById("ourcam5").src.lastIndexOf("t=")+2))+(new Date()).getTime();

B. The HTML IMG tag needs to have a unique id for each IP Camera being displayed, in the same web page. So, if you had five IP Cameras being displayed in the same web page then you would need one line for each IP Camera:

Code: Select all

<img id="ourcam1" src="" onload='checkBandwidth(this, 0)' onerror='checkBandwidth(this, -1)' alt='' />
<img id="ourcam2" src="" onload='checkBandwidth(this, 0)' onerror='checkBandwidth(this, -1)' alt='' />
<img id="ourcam3" src="" onload='checkBandwidth(this, 0)' onerror='checkBandwidth(this, -1)' alt='' />
<img id="ourcam4" src="" onload='checkBandwidth(this, 0)' onerror='checkBandwidth(this, -1)' alt='' />
<img id="ourcam5" src="" onload='checkBandwidth(this, 0)' onerror='checkBandwidth(this, -1)' alt='' />

C. The JavaScript below the HTML IMG TAG(s) need to have one unique line per IP Camera being displayed, in the same web page. So, if you had five IP Cameras being displayed in the same web page then you would need one line for each IP Camera:

Code: Select all

<script language="javascript" type="text/javascript">
document.getElementById("ourcam1").src = "SecureImageDisplay1.php?t=" + (new Date()).getTime();
document.getElementById("ourcam2").src = "SecureImageDisplay2.php?t=" + (new Date()).getTime();
document.getElementById("ourcam3").src = "SecureImageDisplay3.php?t=" + (new Date()).getTime();
document.getElementById("ourcam4").src = "SecureImageDisplay4.php?t=" + (new Date()).getTime();
document.getElementById("ourcam5").src = "SecureImageDisplay5.php?t=" + (new Date()).getTime();
</script>

D. You need to place this in the HTML where you wish the button to appear for resuming getting images from the IP Cameras:

Code: Select all

<div id ="BandWidthExceeded" align="center" style="display:none;visibility:hidden">
<button type="button" onTouchStart="resetBandwidth()" onMouseDown="resetBandwidth()">Click To Resume</button>
</br></br>
</div>

Optionally. You can instead of using A. above. Use this for a time based resume button. You will still need to also do B., C. and D. from above as well. Place the below In the HEAD section of the HTML instead of A.

The example below will display the resume button 10 seconds after a web page visitor visits the web page. To change that timespan you will need to change both values below of 10000 Milliseconds to the value of your choice:

Code: Select all

<head>
<script type="text/javascript">
var delayBetweenImages = 10;
var delayBetweenImagesOnError = 5000;
var maxCameraImages = 10;
var currentCameraImages = 0;
setTimeout(function(){currentCameraImages = maxCameraImages}, 10000);
function resetBandwidth()
{
   document.getElementById('BandWidthExceeded').style.display = 'none';
   document.getElementById('BandWidthExceeded').style.visibility = 'hidden';
   currentCameraImages = 0;
   setTimeout(function(){currentCameraImages = maxCameraImages}, 10000);
   document.getElementById("ourcam1").src = document.getElementById("ourcam1").src.substring(0, (document.getElementById("ourcam1").src.lastIndexOf("t=")+2))+(new Date()).getTime();
}
function checkBandwidth(ipCamera, error)
{
   if (currentCameraImages >= maxCameraImages)
   {   
       document.getElementById('BandWidthExceeded').style.display = 'block';
       document.getElementById('BandWidthExceeded').style.visibility = 'visible';
   } else {
       if (!error)
           setTimeout(function() {ipCamera.src = ipCamera.src.substring(0, (ipCamera.src.lastIndexOf("t=")+2))+(new Date()).getTime()}, delayBetweenImages);
       else
           setTimeout(function() {ipCamera.src = ipCamera.src.substring(0, (ipCamera.src.lastIndexOf("t=")+2))+(new Date()).getTime()}, delayBetweenImagesOnError);
   }
}
</script>
</head>

A line like the below lines. In the function resetBandwidth above. Needs to be present for each IP Camera being displayed in the same web page. So, if you had five IP Cameras being displayed in the same web page then you would need one line for each IP Camera:

Code: Select all

document.getElementById("ourcam1").src = document.getElementById("ourcam1").src.substring(0, (document.getElementById("ourcam1").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam2").src = document.getElementById("ourcam2").src.substring(0, (document.getElementById("ourcam2").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam3").src = document.getElementById("ourcam3").src.substring(0, (document.getElementById("ourcam3").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam4").src = document.getElementById("ourcam4").src.substring(0, (document.getElementById("ourcam4").src.lastIndexOf("t=")+2))+(new Date()).getTime();
document.getElementById("ourcam5").src = document.getElementById("ourcam5").src.substring(0, (document.getElementById("ourcam5").src.lastIndexOf("t=")+2))+(new Date()).getTime();

You can also view the HTML source code of the working example which is using one IP Camera as well. If needed:

http://107.170.59.150/FI9805WBandwidth.htm

Additionally. If you are worried about bandwidth abuse? You should also use this Interfaces optional protection from others trying to point to your copy of Interface in their own HTML/HTML JavaScript on their private devices or their web pages. The example below has this protection enabled and is a copy of the above link:

http://107.170.59.150/FakeFI9805WBandwidth.htm

As you can see. This feature that the Interface optionally supports protects you from people who are trying to link to the Interfaces SecureImageDisplay.php on your website using their own HTML and/or web pages.

You can review the above examples HTML source and see that it's no different then the real web page below:

http://107.170.59.150/FI9805WBandwidth.htm

You can test your copy of the Interface to see if anyone could do this by simply trying to access SecureImageDisplay.php on your website from the browser window of your choice. Example:

http://107.170.59.150/SecureImageDisplayFI9805W.php

If you can see your IP Camera while doing that. Then others can do the same. They could create their own HTML/JavaScript and view your IP Camera as long as they wish. Using excessive bandwidth while doing so.

So, you should enable the optional feature that the interface has which the above two examples are using.

Another feature which you can use with this Interface is to not allow your web page to be displayed inside another web page as an IFRAME in that web page. This will also help protect you from bandwidth abuse.

All that needs to be done to protect you from that happening is to add this JavaScript in the <head> section of your web page using the Interface to display your IP Cameras:

Code: Select all

if (window.top !== window.self) window.top.location.replace(window.self.location.href);

You can view the HTML source of this working example to see that the above line is present in the working example as well:

http://107.170.59.150/FI9805WBandwidth.htm

Don
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Tue Jul 14, 2015 2:44 am

New Hikvision live demonstrations using this Interface:

Two live Hikvision examples with PTZ and Zoom lenses: Indoor Outdoor

Don
marky9074
Experienced
Experienced
Posts: 121
Joined: Tue Feb 16, 2010 7:03 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby marky9074 » Sun Nov 08, 2015 6:37 pm

Just been playing with this Don. Got all my Foscams working, but any idea how to pull streams from Dahua cameras?
marky9074
Experienced
Experienced
Posts: 121
Joined: Tue Feb 16, 2010 7:03 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby marky9074 » Mon Nov 09, 2015 8:53 am

OK seems to be the below (worrying that you can pull an image without username/password)

http://DDNSorISPIPAddress:PortForCamera/cgi-bin/snapshot.cgi?
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NA

Postby theuberoverlord » Mon Jan 04, 2016 1:11 pm

This Interface can be used with any IP Camera/NVR/DVR/VMS that supports pulling snapshots using HTTP and/or HTTPS and is accessible from any Internet browser capable devices. From Computers to Tablets and Phones to TV's. That are using any Operating System and Browsers. Without downloading/installing any Plug-Ins or Media Players and IP Camera image refresh bandwidth can be controlled as well. Which makes it great for web pages in websites as well as for personal use from any of your Internet browser capable devices.

Examples:

Image

Added live Axis IP Camera demos. Here's one that even allows you to start a train with all IP Camera controls:

http://107.170.59.150/Axis/SecureImageD ... ontrol.htm

Another without IP Camera controls but with digital zoom:

http://107.170.59.150/Axis/SecureImageDisplayZoom1.htm

Another without any IP Camera controls and with a thermal image from the IP Camera above:

http://107.170.59.150/Axis/SecureImageDisplay2.htm

The Interface supports both HTTP and HTTPS and optionally prompting for access. Even if the IP Cameras does not support HTTPS. Unique User Id and Password that has nothing to do with the IP Cameras can also be used. The example below is using a self-signed certificate so you will see a warning. User: admin Password: admin

https://107.170.59.150/Axis/SecureImage ... lLogin.php

Don
theuberoverlord
Trainee
Trainee
Posts: 10
Joined: Sat Oct 13, 2012 3:26 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NAS

Postby theuberoverlord » Wed Jun 15, 2016 10:04 am

Created Version 5.

Download Link: http://107.170.59.150/V50/SecureImageDisplayV50.zip

Live Demos Using The Software: http://107.170.59.150

Enhancements:

1. Faster processing and less overhead.

2. Added digital zoom option.

3. Now supports Digest Authorization.

4. Images/Logos can now be embedded in the cameras image from a local file or from a website using HTTP and FTP.

5. When embedding images from weather sites. A delay can be used that stores the weather image in a local file and only gets a fresh copy when the weather website updates their image. Some weather websites update their weather images every 20 minutes. So this reduces logo/image processing and overhead. By storing the weather image locally and only making a remote request as needed.

Don

-Free IP Camera Software For Websites And Personal Use-Live IP Camera Demos Using The Software-About Me
JamesTX10
I'm New!
I'm New!
Posts: 1
Joined: Tue Sep 12, 2017 4:49 pm

Re: Securely Display ANY IP Cam On Webpage Using Synology NAS

Postby JamesTX10 » Tue Sep 12, 2017 4:52 pm

Does anyone have a copy of SecureImageDisplayV50.zip as the link no longer works

Return to “Web Server + PHP / MySQL + MariaDB”

Who is online

Users browsing this forum: No registered users and 6 guests