Setting up a user defined web page to show DLink DCS-930L camera images using the DLink ActiveX control
While the myDLink website provides an easy and convenient mechanism for viewing and configuring DCS IP cameras, the site is not convenient for a workplace environment where multiple people wish to monitor activities from various locations, internally and externally.
This procedure describes the issues typically faced trying to view a live feed an an externally hosted website. The test environment is a Microsoft site so the solution had to work with Internet Explorer 8 or 9, and it would be “nice” if it also worked with Firefox, etal.
Note: This document will not address the use of the Java “aplug” applet which is necessary for Firefox and other non-IE browsers. That is a work in progress as we are trying to work around the necessity to supply an ID and password for each instance of the Java applet in the webpage when the page is opened.
Procedure
A simplified version of the test intranet environment is illustrated below (Exhibit A):
Exhibit A - Network Topology
(http://i1207.photobucket.com/albums/bb478/javalawyer/NetworkA.gif)
The cameras were initially setup using the DLink CD and Wizard which required registering with the DLink site, having wired Ethernet access to the router (A or C depending on the camera) as well as the WEP security codes, etc. After they were configured and working using IEEE 802.11G WiFi services and the default wizard settings, they were manually re-configured, using the camera web interface, to use different static addresses in their respective subnets and a TCP port different from 80, say 8215. At that point access from the DLink website fails as that site needs to have the cameras using TCP port 80 (we surmise??).
Several addressing issues had to be addressed in the webpage at our outside hosting service. These were handled using ASP Server-side scripting, ie
- Off-site access from the Internet needed to be detected to have camera’s address appropriate for our external, ISP provided TCPIP address and port numbers appropriate for each camera, ie 8215 and 8216 in our case. The ISP router (A) and the SonicWall® Firewall router were set up to forward those ports to the appropriate subnets.
- Local or internal access via the intranet had to be detected so that the addresses and port numbers were correct for each camera’s location/subnet.
OK, that all sounds pretty complicated, but, as those reading this may have simpler or more complex needs, it at least provides a checklist for getting started.
Javascript
The code below is appropriate for two camera images in the webpage being hosted externally but being run in IE from an internal (ie intranet), non-camera containing subnet.
“cvcs” section is for camera1 and the “cvc2” section is for camera2. Note, that the address for camera1 is not its physical address but rather the address of its router (C in Fig A) which then “port forwards” the traffic to the camera’s physical address. However, since camera 2 (router A) is “down stream” from our intranet it can be addressed directly using its physical address.
For access externally the camera address for both cameras will be the same (our external ISP supplied TCPIP address), only the port numbers will differ. The firewalls/routers will “port forward” as needed.
Your “DeviceSerialNo”: can be determined by looking at the “View Source” option from the camera’s internal site when you are viewing the video using the ActiveX.
<SCRIPT LANGUAGE="JavaScript">
function Init() {
cvcs.RemoteHost = "172.16.1.225:8215"
cvcs.RemoteWeb = 8215
cvcs.Timeout = 5
cvcs.AuthType = 1
cvcs.PreviewFrameRate = 1
cvcs.PreviewWidth = 320
cvcs.PreviewHeight = 240
cvcs.DeviceSerialNo = "xxxxxxxxxxxxxxxxxxxxxx"
cvc2.RemoteHost = "172.16.0.125:8216"
cvc2.RemoteWeb = 8216
cvc2.Timeout = 5
cvc2.AuthType = 1
cvc2.PreviewFrameRate = 1
cvc2.PreviewWidth = 320
cvc2.PreviewHeight = 240
cvc2.DeviceSerialNo = " xxxxxxxxxxxxxxxxxxxxxx "
cvcs.Play()
cvc2.Play()
These setTimeout statements prevent the user from viewing the cameras for more than 60 seconds.
setTimeout("cvcs.Stop()", 60000)
setTimeout("cvc2.Stop()", 60000)
window.setInterval("ShowFrameRate()", 1000)
}
This ShowFrameRate function provides the Time and Frame Rate data which is displayed above the camera images and updates once a second. The innerHTML statements provide the HTML tag’s for getting the data displayed which can be found in the HTML section below.
function ShowFrameRate() {
var fFrameRate = cvcs.FrameRate
window.status = "Frame:" + fFrameRate.toString() + " fps"
CurrentFrame.innerHTML = "Frame:" + fFrameRate.toString() + " fps"
var fFrameRate2 = cvc2.FrameRate
document.getElementById("CurrentFrame2").innerHTML = "Frame:" +
fFrameRate2.toString() + " fps"
CurrentTime.innerHTML = cvcs.TimeString
}
</script>
HTML
The code here was copied from the “View Source” option from the camera’s internal site when you are viewing the video using the ActiveX. And then modified to get rid of all of the extra stuff, the camera addresses and ports were changed and the html formatted to meet our needs.
<body onload="Init()" onUnload="cvcs.Stop(); cvs2.Stop();">
…
<table border="0" width="100%">
<tr>
<td align="center" width="55%" colspan="2"><TABLE BORDER=0
CELLPADDING=2 align="center">
<tr>
<td bgcolor=black valign="top" ><font color=white>
<span >Camera 1<BR></span></font></td>
<td bgcolor=black valign="top" colspan="2"><font color=white>
<SPAN id="CurrentTime"></SPAN></font></td>
<td bgcolor=black valign="top"><font color=white>
<span>Camera 2<BR></span></font></td>
</tr>
<tr>
<td bgcolor=black valign="top" colspan="2"><font color=white>
<span id="CurrentFrame"></span></font></td>
<td id="Cam2"bgcolor=black valign="top" colspan="2"><font color=white>
<span id="CurrentFrame2"></span></font></td>
</tr>
<tr>
<td align=center bgcolor="white" colspan="2">
<OBJECT ID="cvcs" WIDTH=320 HEIGHT=240
CLASSID="CLSID:7191F0AC-D686-46A8-BFCC-EA61778C74DD"
CODEBASE="http://172.16.1.225:8215/aplugLiteDL.cab#version=2,3,2,22">
</OBJECT></td>
<td align=center bgcolor="white" colspan="2">
<OBJECT ID="cvc2" WIDTH=320 HEIGHT=240
CLASSID="CLSID:7191F0AC-D686-46A8-BFCC-EA61778C74DD"
CODEBASE="http://172.16.0.125:8216/aplugLiteDL.cab#version=2,3,2,22">
</OBJECT></td>
</tr>
</TABLE>
Additional Resources
- Network Cameras - Searchable FAQ Index (http://forums.dlink.com/index.php?topic=58404.0)
- Network Cameras - Important Posts & Information (http://forums.dlink.com/index.php?topic=58121.0)
Content for this solution submitted by forum member: RDK (http://forums.dlink.com/index.php?action=profile;u=47351)