D-Link Forums

D-Link FAQ => Network Camera FAQs => Topic started by: JavaLawyer on February 05, 2013, 05:39:32 AM

Title: DCS-9XXL - Embed Live Video Display on a User Created Website (Using iframes)
Post by: JavaLawyer on February 05, 2013, 05:39:32 AM
This procedure includes HTML code that can be used on a standalone website to display a live video feed. Alternatively, an excerpt from the following HTML code can be embedded within a user created web page. The following code utilizes iframes rather than applets

Procedure

     <html>
     <head>
     <title>LiveVideo123x</title>
     <META content="text/html"; charset="UTF-8"; http-equiv=Content-Type>
     <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
     <META HTTP-EQUIV="Expires" CONTENT="-1">
     </head>
     <body>
     LiveVideo123x (iframe) by acellier, rev. 2013-02-04 1000 <br>

     // In this example, 3 cameras are displayed at size 460x345 (change at will)
     // ... displays 2 side-by-side if browser window width >~1024
     // Cameras are assigned respective IP's, e.g. CamIP1, CamIP2, ... and ports 8031, 8032, ...
     // CamIP can be either LAN or WAN - for WAN access, set router for port forwarding

     <BR> <BR> <!-- Cam1, Cam2, Cam3 : //-->
     <a href="http://CamIP1:8031/mjpeg.cgi" rel="self" title="http://CamIP1:8031/mjpeg.cgi"> Cam1,
     </a>
     <a href="http://CamIP2:8032/mjpeg.cgi" rel="self" title="http://CamIP2:8032/mjpeg.cgi"> Cam2,
     </a>
     <a href="http://CamIP3:8033/mjpeg.cgi" rel="self" title="http://CamIP3:8033/mjpeg.cgi"> Cam3 :
     </a>
     <BR>


     // Note that the video frame size can be arbitrarily configured using the width and
     // height variables located in bold in the HTML code below

     <tr>
        <div class="box">
           <iframe src="http://CamIP1:8031/mjpeg.cgi"
           width="460" height="345" class="smart_sizing_iframe noresize"
             frameborder="0" scrolling="no" >
           </iframe>
           <iframe src ="http://CamIP2:8032/mjpeg.cgi"
           width="460" height="345" class="smart_sizing_iframe noresize"
             frameborder="0" scrolling="no" >
           </iframe>
           <iframe src ="http://CamIP3:8033/mjpeg.cgi"
           width="460" height="345" class="smart_sizing_iframe noresize"
             frameborder="0" scrolling="no" >
           </iframe>
         </div>
     </tr>

     </body>
     <HEAD>
     <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
     <META HTTP-EQUIV="Expires" CONTENT="-1">
     </HEAD>
     </html>


Additional Resources


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