Configuración de Cámara Foscam IP en WordPress

lucyator · 16 Mar 2019

Hola a tod@s,

Estoy intentando configurar un camara Foscam con IP en mi Wordpress para trasmitir en la web una zona de la casa rural en la que trabajo.
El Soporte me proporciono un codigo en .htm el cual funciona modificando y colocando la IP y puerto con el usuario y pass de la camara.
Instale el Plugin para Wordpress Scripts n Styles y me permite pegar ese condigo en la opcion del plugin HTML y se ve la imagen de la camara el problema esta en que aparece en el Header de Wordpress y lo que necesito es que aparezca en el Body pero por mas que intento pegando codigos no aparece.

Si alguien me da alguna pista ya que al estar en el Header rompe toda la estructura del Wordpress desplazando el menu a la parte de abajo.

Gracias , Saludos

El codigo que me envian de soporte si sirve es este fichero FI9821W.htm :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Generic Browser Interface For FI9821W IP Cameras</title>
<meta content="text/html; charset=utf-8" http-equiv=content-type>
<STYLE type='text/css'>
BODY { MARGIN: 0px; font-size: 100%;}
</STYLE>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' language="javascript">
var e=navigator.userAgent.toLowerCase();
var isOpera=e.indexOf("opera")!=-1;
var isIE=document.all&&e.indexOf("msie")!=-1&&!isOpera;
if (isIE) document.execCommand("ClearAuthenticationCache");
//***********************************************************************************
// *
// Generic Browser Interface for Foscam FI9821W Camera V1.0 *
// Copyright By TheUberOverLord AKA Don Kennedy *
// All Rights Reserved *
// Saves Bandwidth and Includes Zoom On Image Click *
// Reset Zoom to Normal By Double Click On Image *
// *
// More here:
// *
// You MUST enter the local IP address and port or your ISP IP address and port *
// or your DDNS and port ("If you have properly setup the camera for remote access")*
// Example: var IPandPort = "192.168.1.111:91"; ("Local IP Address and Port") *
// Example: var IPandPort = "78.102.134.11:91"; ("ISP IP Address and Port") *
// Example: var IPandPort = "mycam.ddns.org:91"; ("DDNS IP Address and Port") *
// *
var IPandPort = "192.168.1.1103:1103"; // <- ***** Change This ***** *
// *
// You MUST enter a valid user and password here there will not be any *
// prompt to login. Note: Please Don't use a Admin login, if this will be public *
// otherwise people will be able to change the camera configuration. *
// Both of the values below are case sensitive. *
// *
// Example: var user = "operator"; ("Operator Id for camera") *
// Example: var user = "vistor"; ("Visitor Id for camera") *
// *
// NOTE: A Visitor Level User Id will NOT be able to use PTZ Controls even if they *
// display. So. If you want to allow PTZ Controls please use a Operator level *
// User Id. *
// *
var user = "a"; // <- ***** Change This ***** *
// *
// Example: var pwd = "oper"; ("Operator password for camera") *
// Example: var pwd = "visit"; ("Visitor password for camera") *
// *
var pwd = "a123456"; // <- ***** Change This ***** *
// *
// This allows you to change the width of the camera video resolution displayed. *
// A value of "" will use the default width. The aspect for height will sync. *
// This value is an internal value for this Interface and does not actually change *
// or modify your camera video or image settings. *
// *
var camResolution = "640"; // <- ***** Change This? ***** *
// *
// If your camera is mounted upside down. Set this to "Y" otherwise leave it as ""; *
// *
var camFlipped = ""; // <- ***** Change This? ***** *
// *
// Note: The below does NOT really change your camera FPS. It is an internal rate *
// Specific to this interface ONLY! The purpose is to minimize bandwidth while*
// monitoring your cameras, without actually changing the actual FPS used *
// for the camera for alarm emails, FTP and recordings. *
// *
// Because this interface supports infinite zooms by clicking the image as *
// many times as you wish, double clicking the image to reset the image to *
// Normal resolution. You maybe able to use a smaller resolution than before *
// if you choose to, to help minimize exceeding any ISP bandwidth limits as *
// well as control the overhead on your local network. *
// *
// Example: var MyFPS = 33 ms is 30 FPS 114KBps at 160*120, 228KBps at 320*240 and *
// 456KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 67 ms is 15 FPS 57KBps at 160*120, 114KBps at 320*240 and *
// 228KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 100 ms is 10 FPS 38KBps at 160*120, 76KBps at 320*240 and *
// 152KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 200 ms is 5 FPS 19KBps at 160*120, 38KBps at 320*240 and *
// 76KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 1000 ms is 1 FPS 4KBps at 160*120, 8KBps at 320*240 and *
// 16KBps with 640*480 Resolution. *
// *
// Example: var MyFPS = 5000 ms is 1 Frame every 5 seconds 4KBp5s at 160*120, *
// 8KBp5s at 320*240 and 16KBp5s with 640*480 Resolution. *
// *
var MyFPS = 33; // <- ***** Change This? ***** ("This is 30 FPS") In MilliSeconds. *
// *
// Note: If the camera can't reach the FPS the maximum will be shown in the stats. *
// To see the highest set this to 33 or change the FPS to see your maximum. *
// *
// Zoom percentage. Generally a 50 percent increase is best, but you can change the *
// Zoom percentage here to be anything you want from 1 to 100. Each click on the *
// image itself will increase Zoom by this percentage, a double click on the image *
// itself, will reset the image to no Zoom. *
// *
var MyZoom = 50; // <- ***** Change This? ***** to be +- more tha 50 percent Zoom. *
// *
// This handles the FPS and Bytes Per second Statistics Gathering and Display. *
// *
// Note: If DisplayStatsEvery = ""; No Statatistics for FPS and Bytes per second *
// will be gathered/displayed. Bytes Per Second statistics can only be shown *
// when using a IE ("Internet Explorer") 32 or 64 bit browser. *
// *
var DisplayStatsEvery = "5"; // < *** Change This? *** In Seconds every 5 Seconds. *
// *
// This will display the PTZ controls. *
// *
var ShoWPTZControls = "Y"; // < *** Change This? *** ""; = No, "Y"; = yes. *
// *
// This will display the ability to change FPS. *
// *
var ShoWFPS = "Y"; // < *** Change This? *** ""; = No, "Y"; = yes. *
// *
//***********************************************************************************
// Please don't change anything below, report any problems using the email above *
// **********************************************************************************
//
var img = new Image();
var imgObj;
var originalWidth = 0;
var originalHeight = 0;
var countFPS = 0;
var totalKBps = 0;
var firstTime = true;
var unique_name = (new Date()).getTime();
var ptzMoveTopLeft = "ptzMoveTopLeft";
var ptzMoveBottomLeft = "ptzMoveBottomLeft";
var ptzMoveLeft = "ptzMoveLeft";
var ptzMoveUp = "ptzMoveUp";
var ptzMoveDown = "ptzMoveDown";
var ptzMoveRight = "ptzMoveRight";
var ptzMoveBottomRight = "ptzMoveBottomRight";
var ptzMoveTopRight = "ptzMoveTopRight";
function flipped()
{
ptzMoveTopLeft = "ptzMoveBottomRight";
ptzMoveBottomLeft = "ptzMoveTopRight";
ptzMoveLeft = "ptzMoveRight";
ptzMoveUp = "ptzMoveDown";
ptzMoveDown = "ptzMoveUp";
ptzMoveRight = "ptzMoveLeft";
ptzMoveBottomRight = "ptzMoveTopLeft";
ptzMoveTopRight = "ptzMoveBottomLeft";
}
function preload()
{
img.src= "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function changesrc()
{
img1.src=img.src;
preload();
setTimeout(changesrc,MyFPS);
}
function update()
{
imgObj = document.getElementById('img1');
imgObj.src = img.src;
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
if (originalWidth == 0)
{
originalWidth = img1.clientWidth;
originalHeight = img1.clientHeight;
}
if (firstTime)
{
document.getElementById('testing123').style.display = 'block';
document.getElementById('testing123').style.visibility = 'visible';
firstTime = false;
}
if (DisplayStatsEvery != "")
{
if (isIE)
totalKBps = totalKBps + parseFloat(document.getElementById("img1").fileSize);
countFPS++;
}
}
function load_video()
{
window.status=" ";
setTimeout("update()", MyFPS);
}
function takeError1()
{
img1.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function takeError()
{
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
}
function startonload()
{
img.src = "http://"+IPandPort+"/"+"cgi-bin"+"/"+"CGIProxy.fcgi?cmd=snapPicture2&usr="+user+"&pwd="+pwd+"&cnt="+(unique_name++);
img.onerror=takeError;
img1.onerror=takeError1;
img.onload=load_video;
}
function load()
{
if (camResolution != "") img1.style.width = camResolution+'px';
if (camFlipped == "Y") flipped();
if (ShoWPTZControls == "Y")
{
document.getElementById('PTZ1').style.display = 'block';
document.getElementById('PTZ1').style.visibility = 'visible';
document.getElementById('PTZ2').style.display = 'block';
document.getElementById('PTZ2').style.visibility = 'visible';
}
if (ShoWFPS == "Y")
{
$('#IntFPS').val(MyFPS);
if (document.getElementById('IntFPS').selectedIndex == -1)
{
document.getElementById('IntFPS').options[0].value = MyFPS;
$('#IntFPS').val(MyFPS);
}
else
document.getElementById('IntFPS').options[0].value = MyFPS;
document.getElementById('InternalFPS').style.display = 'block';
document.getElementById('InternalFPS').style.visibility = 'visible';
}
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
if (DisplayStatsEvery != "")
{
countFPS = 0;
totalKBps = 0;
setInterval("reload_count()", (DisplayStatsEvery * 1000));
}
}
function reload_count()
{
var reCalc = 0;
if (MyFPS > (DisplayStatsEvery * 1000) && (MyFPS > 1000))
reCalc = Math.round(MyFPS/1000);
else
reCalc = DisplayStatsEvery;
if ((isIE) && (countFPS > 0) && (totalKBps > 0))
{
if ((typeof devid !== "undefined") && (DisplayCameraName != ""))
$("#CameraName").text(devid + " - FPS: " + (countFPS / reCalc).toFixed(2) + " - Bps: " + Math.round((totalKBps/reCalc)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
else
$("#CameraName").text("FPS: " + (countFPS / reCalc).toFixed(2) + " - Bps: " + Math.round((totalKBps/reCalc)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}
else if (countFPS > 0)
if ((typeof devid !== "undefined") && (DisplayCameraName != ""))
$("#CameraName").text(devid + " - FPS: " + (countFPS / reCalc).toFixed(2));
else
$("#CameraName").text("FPS: " + (countFPS / reCalc).toFixed(2));
if (countFPS > 0)
{
countFPS = 0;
totalKBps = 0;
}
}
function decoder_control_2(command)
{
action_zone.location='http://'+IPandPort+'/'+'cgi-bin'+'/'+'CGIProxy.fcgi?cmd='+command+'&usr='+user+'&pwd='+pwd;
}
</script>
</head>
<body onLoad="load()">
<script type="text/javascript">
jQuery(document).ready(
function(){
$('#Container img').click(
function( event ){
var scale = (MyZoom+100)/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);
$('#Container img').dblclick(
function( event ){
$(this).css({
width: originalWidth,
height: originalHeight
});
}
);
}
);
</script>
<div id ="testing123" style="display:none; visibility:hidden">
<div id="CameraName" align="center">
</div>
<div id ="PTZ1" align="center" style="display:none;visibility:hidden">
<center>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↑←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↓←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveLeft)" onMouseUp="decoder_control_2('ptzStopRun')">←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveUp)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveUp)" onMouseUp="decoder_control_2('ptzStopRun')">↑</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveDown)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveDown)" onMouseUp="decoder_control_2('ptzStopRun')">↓</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveRight)" onMouseUp="decoder_control_2('ptzStopRun')">→</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomRight)" onMouseUp="decoder_control_2('ptzStopRun')">↓→</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopRight)" onMouseUp="decoder_control_2('ptzStopRun')">↑→</button>
</center>
</div>
<div id ="Container" align="center">
<img id=img1 src="" alt="">
</div>
<div id ="PTZ2" align="center" style="display:none;visibility:hidden">
<center>
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↑←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomLeft)" onMouseUp="decoder_control_2('ptzStopRun')">↓←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveLeft)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveLeft)" onMouseUp="decoder_control_2('ptzStopRun')">←</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveUp)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveUp)" onMouseUp="decoder_control_2('ptzStopRun')">↑</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveDown)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveDown)" onMouseUp="decoder_control_2('ptzStopRun')">↓</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveRight)" onMouseUp="decoder_control_2('ptzStopRun')">→</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveBottomRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveBottomRight)" onMouseUp="decoder_control_2('ptzStopRun')">↓→</button> 
<button type="button" onTouchStart="decoder_control_2(ptzMoveTopRight)" onTouchEnd="decoder_control_2('ptzStopRun')" onMouseDown="decoder_control_2(ptzMoveTopRight)" onMouseUp="decoder_control_2('ptzStopRun')">↑→</button>
</center>
</div>
<div id ="InternalFPS" align="center" style="display:none;visibility:hidden">
<select id="IntFPS" onChange="MyFPS = (this.value);">
<option value="200">Default</option>
<option value="33">30 FPS</option>
<option value="50">20 FPS</option>
<option value="66">15 FPS</option>
<option value="100">10 FPS</option>
<option value="200">5 FPS</option>
<option value="250">4 FPS</option>
<option value="333">3 FPS</option>
<option value="500">2 FPS</option>
<option value="1000">1 FPS</option>
<option value="2000">.5 FPS</option>
<option value="5000">.2 FPS</option>
<option value="10000">.1 FPS</option>
</select>
: Change Internal FPS
</div>
</div>
<iframe name="action_zone" style="DISPLAY: none" width="0" height="0">
</iframe>
</body>
</html>

MajesticCat · 16 Mar 2019

Esto es un simple html, has intentado ponerlo en el bloque de html de gutenberg? Copia desde <style> hasta </iframe> ya que si copias el body y el </html> tendrias doble...

lucyator · 17 Mar 2019

jesushiguerey dijo:
Esto es un simple html, has intentado ponerlo en el bloque de html de gutenberg? Copia desde <style> hasta </iframe> ya que si copias el body y el </html> tendrias doble...

Hola jesushiguerey no utilizo gutenberg, por favor de que otra forma podria ponerlo en el Body de Wordpress es en una pagina.

Gracias

Saludos

- - - Actualizado - - -

jesushiguerey dijo:
Esto es un simple html, has intentado ponerlo en el bloque de html de gutenberg? Copia desde <style> hasta </iframe> ya que si copias el body y el </html> tendrias doble...

Hola he probado en el Body de la pagina pero no aparece no se como hacer para que aparezca en el Body me podras ayudar por favor ?
gracias

crixus102 · 19 Mar 2019

El codigo que te dio ponlo en un HTML iframes en una entrada haber que tal

lucyator · 22 Mar 2019

crixus102 dijo:
El codigo que te dio ponlo en un HTML iframes en una entrada haber que tal

Hola lo intente poner en la ficha HTML de la pagina pero sigue sin aparecer en el body
Me aparece en el Header.

Gracias por tu ayuda

Saludos:enfermo:

Configuración de Cámara Foscam IP en WordPress

lucyator

MajesticCat

lucyator

crixus102

lucyator

Temas similares