D-Link Forums

The Graveyard - Products No Longer Supported => IP Cameras => DCS-2332L => Topic started by: jimbob42 on November 12, 2013, 09:51:23 PM

Title: Embedding Video Stream on my own Website
Post by: jimbob42 on November 12, 2013, 09:51:23 PM
Hi guys,

This comes up a bit from time to time and it seems this camera is no exception.  Can someone point me to a simple implementation of embedding video from this camera on my own website?

I understand the ActiveX IE limitations, and am happy with this at the moment, but I've tried a few code examples from elsewhere in the forum with no luck.

Cheers,
James
Title: Re: Embedding Video Stream on my own Website
Post by: jimbob42 on December 04, 2013, 03:33:30 AM
Hi guys,

I notice there seems to be a lot of interest on this topic but nothing from D-Link.  Is there any paid support or a way to elevate a support request?  We are purchasing lots of these cameras and without a solution to this problem, they may have to be returned.

Can someone help?

regards,
James
Title: Re: Embedding Video Stream on my own Website
Post by: JavaLawyer on December 04, 2013, 04:42:01 AM
The following two FAQ entries were authored for the DCS-9XXL cameras, but the same (or very similar) approach should work iwth the DCS-2332L:

Title: Re: Embedding Video Stream on my own Website
Post by: evosera on December 06, 2013, 08:53:22 AM
I got it working... sort of.
I stole this code from a traffic camera website (ignore all the "Carter lake" stuff, it still needs cleaned up). If you update 172.16.2.202 to your camera's IP address, and save it to your desktop in an html file, you can open it with Chrome or Opera and get a working video feed (I think you need to put it on a server or something for it to work in IE. It keeps blocking it). However, it will only work AFTER you open your browser and log in at your camera's web interface first. I cant figure out how to make it authenticate without logging in first. Can someone help me figure this out??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<title>CarterLake.org Live Webcam</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1"/>
<meta name="description" content="Carter Lake, Iowa's live streaming weather webcam."/>
<meta name="keywords" content="carter,lake,Carter Lake,iowa,Iowa,pottawattamie,weather"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<script language="Javascript" type="text/javascript">
<!--
if (parent.frames.length)
  top.location.href= document.location;   
// -->
</script>
<script language="javascript" type="text/javascript" src="basic_refresh.js"/>
<script language="javascript" type="text/javascript">
<!-- Begin

   function Start(page) {
      OpenWin = this.open(page, "CtrlWindow", config='height=490,width=660,toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no');
   }
// End -->
</script>
<!-- Navigational metadata for large websites (an accessibility feature): -->
<link rel="top" href="./index.php" title="Homepage"/>
<link rel="up" href="./index.php" title="Up"/>
<link rel="first" href="./index.php" title="First page"/>
<link rel="previous" href="./index.php" title="Previous page"/>
<link rel="next" href="./index.php" title="Next page"/>
<link rel="last" href="./index.php" title="Last page"/>
<link rel="toc" href="./index.php" title="Table of contents"/>
<link rel="index" href="./index.php" title="Site map"/>
<link rel="stylesheet" type="text/css" href="./cl-screen.css" media="screen" title="cl (screen)"/>
<link rel="stylesheet" type="text/css" href="./cl-print.css" media="print"/>
</head>
<body bgcolor="#00008B" onload="global_timer();">
<div id="Welcome" class="darkerBox">
<script language="Javascript" type="text/javascript"><!--
                                var img_init = 'http://98.168.228.137:7000/video/pull?';
                                var ref_init = 1500;
                                var ref_width = 640;
                                var ref_height = 480;
                                createImage(img_init, ref_init, ref_width, ref_height);
                                // -->
            </script>
<a href="javascript: switchVid();">
<img src="http://172.16.2.202/video1.mjpg" name="imagerefresh" width="640" height="480" border="1" style="border-color: #000000; border-style:solid" onload="imgLoaded();" onerror="imgError()"/>ev
</a>
</div>
<p align="center">
<a href="javascript: history.go(-1)" target="_parent" onclick="window.close()">ev
<img src="cl-closewindow.gif" alt="Close Window" border="0"/>
</a>
</p>
<table border="0" cellpadding="0" cellspacing="0" width="490">
<tbody>
<tr>
<td>
<br/>
<br/>
<br/>
<p align="center">
<font face="verdana,arial" size="4">
<a href="http://www.carterlake.org">Home</a>
</font>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Title: Re: Embedding Video Stream on my own Website
Post by: jimbob42 on December 07, 2013, 10:41:46 PM
Thanks Evosera,

This works great, however it uses mjpg rather than h264 (reduced bandwidth using the activeX in Internet Explorer).

I really need this to work using the activeX as bandwidth is very important for my application.

Any offers of paid support would be accepted at this stage!

Cheers,
James