Topic: HTML for Embedding Camera Feed in Web Page (Read 18616 times)

wolverineks · « **on:** November 26, 2011, 09:20:18 PM »

I've also made an HTML version of an IP camera viewer that opens just like a webpage shortcut on your windows desktop (I'm assuming it would also work on mac).

I simply made a 2x2 table, and copy and pasted the java applet from the HTML code that is displaying the cameras when accessing their ip address through an internet browser.

I dont have any HTML experience so pardon the simplicity and any errors.

To use this, you will need an HTML editor (I use PSPad, free)

Copy and paste the HTML from your IP cameras into where I've commented.

I did this by logging into the camera,
right clicking anywhere (only tested on Google Chrome),
selecting view page source,
copying from <applet> to </applet>,
and pasting into the code provided below.

Let me know what you guys think.

Thanks.

Code: [Select]

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
</head>
<Table border="1">
<TR>
<!-- Camera 1 -->
<TD WIDTH=360 HEIGHT=240>  <!------ EDIT RESOLUTION HERE --------->
<!------------------- INSERT APPLET HERE ---------------------->
</TD>              
<!-- Camera 2 --> 
<TD WIDTH=360 HEIGHT=240>     <!------ EDIT RESOLUTION HERE --------->
<!------------------- INSERT APPLET HERE ---------------------->
</TD>
</TR>
<TR>
<!-- Camera 3 -->
<TD WIDTH=360 HEIGHT=240>     <!------ EDIT RESOLUTION HERE --------->
<!------------------- INSERT APPLET HERE ---------------------->
</TD>
<!-- Camera 4 -->
<TD WIDTH=360 HEIGHT=240>    <!------ EDIT RESOLUTION HERE --------->
<!------------------- INSERT APPLET HERE ---------------------->
 </TD>                  
 </TR>
  </body>
</html>

jeffjohn · « **Reply #1 on:** November 30, 2011, 02:06:04 AM »

Thanks wolverinex - that looks appealingly simple! Be good to get some feedback on this!

MattEvans · « **Reply #2 on:** December 03, 2011, 06:52:14 AM »

try to use HTML5 more stable coding

SmokersChoice · « **Reply #3 on:** December 24, 2011, 05:35:36 PM »

It's very simple, I used WinHTTrack to download my DCS-932L's website files, eg. LanIP/jview.htm and many more ..

I have no experience with HTML.

But, I made this little code to my DCS-932L.

Code: [Select]

<!-- Minus AutoDato -->
<html>
<head>
<title>DCS-932 by Smokers' Choice!</title>

<meta name="Generator" content="Stone's WebWriter 4">
<SCRIPT LANGUAGE="JavaScript">
function Init() {
    window.setInterval("ShowFrameRate()", 1000)
    
    if (1) {
       audioon.disabled = false;
       audiooff.disabled = false;
    } else {
       audioon.disabled = true;
       audiooff.disabled = true;
    }
    if (0 == 1) {
       nightmodeon.disabled = false;
       nightmodeoff.disabled = false;
    } else {
       nightmodeon.disabled = true;
       nightmodeoff.disabled = true;
    }
}

function ShowFrameRate() {
    if (1)
    {
       var fFrameRate = cvcs.GetFrameRate()
       window.status = "Frame:" + fFrameRate.toString() + " fps"
       if (0)
          CurrentFrame.innerHTML = "Frame:" + fFrameRate.toString() + " fps"
    }
    cvcs.GetRealTimeData() 
    CurrentTime.innerHTML = cvcs.GetTimeString()
} 

function SubmitAudioOn()
{
    bn = navigator.appName;
    un = navigator.userAgent;
    brower = 0;	
    if (bn.indexOf("Microsoft Internet Explorer",0) != -1)
       brower = 1;
    if (bn.indexOf("Opera",0) != -1)		// Opera
       brower = 2;
    if (bn.indexOf("Netscape",0) != -1)
    {
       if (un.indexOf("Firefox",0) != -1)
       {
          if (un.indexOf("Navigator",0) != -1)	// Nescape
             brower = 2;
          else 
             brower = 1;			// FireFox
       }
       else
          brower = 2;				// Nescape or Other
    }
 
    if (brower != 1)
       javascript:document.forms[0].submit();
    else
       cvcs.SetSound(1);
}
 
function SubmitAudioOff()
{
    bn = navigator.appName;
    un = navigator.userAgent;
    brower = 0;	
    if (bn.indexOf("Microsoft Internet Explorer",0) != -1)	// IE 
       brower = 1;
    if (bn.indexOf("Opera",0) != -1)		// Opera
       brower = 2;
    if (bn.indexOf("Netscape",0) != -1)
    {
       if (un.indexOf("Firefox",0) != -1)
       {
          if (un.indexOf("Navigator",0) != -1)	// Nescape
             brower = 2;
          else 
             brower = 1;			// FireFox
       }
       else
          brower = 2;				// Nescape or Other
    }
 
    if (brower != 1)
       javascript:document.forms[1].submit();
    else
       cvcs.SetSound(0);
}

function SubmitNightModeOn()
{
    javascript:document.forms[2].submit();
}

function SubmitNightModeOff()
{
    javascript:document.forms[3].submit();
}
</script>
</head>
<body topmargin="1" leftmargin="0" rightmargin="0>

<tr>
            <td colspan=2 align=MIDDLE bgcolor="white">
              <APPLET name="cvcs" CODEBASE="http://10.20.30.10/" CODE="aplug.class" WIDTH=640 HEIGHT=480>
              <param name="RemotePort" value=80>
              <param name="Timeout" value=5000>
              <param name="RotateAngle" value=0>
              <param name="PreviewFrameRate" value=20>
              <param name="DeviceSerialNo" value="YourDeviceSerialNoHere!">
              </APPLET>
            </td>
          </tr>

<div>        
<tr align=BOTTOM>
<td align=BOTTOM>
&nbsp;&nbsp;Audio :
          <INPUT id="audioon" type=button style="width:35px" value='ON'  onClick="SubmitAudioOn()">
          <INPUT id="audiooff" type=button style="width:35px" value='OFF' onClick="SubmitAudioOff()">
          &nbsp;&nbsp;Day/Night Mode :
<INPUT id="nightmodeon" type=button style="width:45px" value='Night'  onClick="SubmitNightModeOn()">
<INPUT id="nightmodeoff" type=button style="width45px" value='Day' onClick="SubmitNightModeOff()">
          &nbsp;&nbsp;<SPAN ID="CurrentFrame"></SPAN>
        </td>
</tr>
    </div> 
 <!-- === END MAINCONTENT === -->


</body>


<form action="http://10.20.30.10/audiocontrol.cgi" method="POST">
<INPUT type="hidden" name="AudioMute" value="0">
</form>
 
<form action="http://10.20.30.10/audiocontrol.cgi" method="POST">
<INPUT type="hidden" name="AudioMute" value="1">
</form>

<form action="http://10.20.30.10/nightmodecontrol.cgi" method="POST">
<INPUT type="hidden" name="IRLed" value="1">
</form>
 
<form action="http://10.20.30.10/nightmodecontrol.cgi" method="POST">
<INPUT type="hidden" name="IRLed" value="0">
</form>
</html>

arodkin · « **Reply #4 on:** April 07, 2012, 02:00:39 PM »

Actually, i didn't find this to work for users on the internet to connect to, though it works on my machine. so, even though i only included the code for the applet, when users connect to my website, the browser recognizes that there is java on the page, but can't seem to open it, even though i have the most updated version of the jre. Also, the webpage tries to downlaod the Active X control too, even though i have not included it. Did you get your webpage to work on the internet? or on the same machine that is hosting your ip camera?

thanks

D-Link Forums

News:

Author Topic: HTML for Embedding Camera Feed in Web Page (Read 18616 times)

wolverineks

HTML for Embedding Camera Feed in Web Page

jeffjohn

Re: HTML for Embedding Camera Feed in Web Page

MattEvans

Re: HTML for Embedding Camera Feed in Web Page

SmokersChoice

Re: HTML for Embedding Camera Feed in Web Page

arodkin

Re: HTML for Embedding Camera Feed in Web Page