D-Link Forums

D-Link FAQ => Network Camera FAQs => Topic started by: JavaLawyer on April 12, 2012, 09:43:24 AM

Title: DCS-930L/932L - Using ActiveX Control to Display Video on a User Defined Website
Post by: JavaLawyer on April 12, 2012, 09:43:24 AM
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.


A simplified version of the test intranet environment is illustrated below (Exhibit A):

Exhibit A - Network Topology
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

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.


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 = ""
              cvcs.RemoteWeb = 8215
              cvcs.Timeout = 5
              cvcs.AuthType = 1
              cvcs.PreviewFrameRate = 1
              cvcs.PreviewWidth = 320
              cvcs.PreviewHeight = 240
              cvcs.DeviceSerialNo = "xxxxxxxxxxxxxxxxxxxxxx"
              cvc2.RemoteHost = ""
              cvc2.RemoteWeb = 8216
              cvc2.Timeout = 5
              cvc2.AuthType = 1
              cvc2.PreviewFrameRate = 1
              cvc2.PreviewWidth = 320
              cvc2.PreviewHeight = 240
              cvc2.DeviceSerialNo = " xxxxxxxxxxxxxxxxxxxxxx "

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


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%">
                <td align="center" width="55%" colspan="2"><TABLE BORDER=0
                 CELLPADDING=2 align="center">
                   <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>
                   <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>
                   <td align=center bgcolor="white" colspan="2">
                   <OBJECT ID="cvcs" WIDTH=320 HEIGHT=240
                   <td  align=center bgcolor="white" colspan="2">
                   <OBJECT ID="cvc2" WIDTH=320 HEIGHT=240

Additional Resources

Content for this solution submitted by forum member: RDK (http://forums.dlink.com/index.php?action=profile;u=47351)