• March 28, 2024, 09:07:11 AM
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  

News:

This Forum Beta is ONLY for registered owners of D-Link products in the USA for which we have created boards at this time.

Author Topic: DCS-930L/932L - Using ActiveX Control to Display Video on a User Defined Website  (Read 12695 times)

JavaLawyer

  • BETA Tester
  • Level 15 Member
  • *
  • Posts: 12190
  • D-Link Global Forum Moderator
    • FoundFootageCritic

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
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


Content for this solution submitted by forum member: RDK
« Last Edit: December 19, 2014, 04:29:23 AM by JavaLawyer »
Logged
Find answers here: D-Link ShareCenter FAQ I D-Link Network Camera FAQ
There's no such thing as too many backups FFC