2 webcams op één site

vrouw · 28 okt 2013

Hallo.

Allereerst ik heb weinig kennis van webpagina`s maken maar met internet en google kom ik steeds een sukje verder.

Ik heb 2 IP netwerkcamera`s en daarvan wil ik de beelden samen op één pagina van mijn website hebben.
Nu lukt het me wel om één camera beeld op de pagina te krijgen maar ik weet niet waar ik onderstaande code moet onderbreken of moet aanpassen om de 2e cam er ook op te plaatsen.

Deze code gebruik ik nu en die werkt voor die ene camera.

PHP:

<?php
//===========================
$url = '217.123.xx.xxx:91';
$user = '';
$pass = '';
//===========================

$img = "$url/snapshot.cgi?user=$user&pwd=$pass";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>
var URL='http://<?php echo $img ?>';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function imgRefresh(){document.getElementById("imgDisplay").src=URL+'&'+I++;}
</script>
</head>
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
	 <img id=imgDisplay border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("imgRefresh()",100)>
	</td>
  </tr>
</table>
</center>
</div>
</body>
</html>

NewbiProgrammer · 28 okt 2013

Ik zal je het antwoord niet verklappen, maar ik becommentarieer de code zodat je zelf tot een oplossing kan komen.

PHP:

//php is een server-side script-taal. De code wordt uitgevoerd op de server, de uitkomst wordt op de webpagina getoond (dit is de reden waarom je inlognaam en wachtwoord in php worden gedefinieerd).
<?php
//===========================

//je definieert enkele variabelen met waardes. (url, user, pass).
$url = '217.123.xx.xxx:91';
$user = '';
$pass = '';
//===========================

//jouw img variabel wordt hier geinitialiseerd met: (waarde van de variabele url)/snapshot.cgi?user=(waarde van user)&pwd=(waarde van pass);
$img = "$url/snapshot.cgi?user=$user&pwd=$pass";
?>
//nu beginnen we met html (code die op de client, ook wel in je web browser, wordt gepresenteerd en uitgevoerd).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>[B]
//je gebruikt javascript om je pagina dynamisch te maken. Je initialiseert de variabele url met http:// + de uitvoer van de variabele img (in php gedefinieerd) + ?>'
var URL='http://<?php echo $img ?>';
//je haalt een gedeelte van de url op. Voorbeeld: [url]http://www.google.nl?blabla[/url] (het gedeelte achter het vraagteken)
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
//je maakt een nieuw image object aan, maar doet hier volgens mij niks mee?
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
//je definieert een functie die het element imgDisplay ophaalt (een tag in je html) en geeft die een source, dit is de locatie waar hij zijn data vandaan haalt. In dit geval is de src de url van je camera + de nieuwe datum inclusief tijd. Dit zorgt voor een unieke source bij elke aanroep van deze functie
function imgRefresh(){document.getElementById("imgDisplay").src=URL+'&'+I++;}
</script>
</head>
//roep de imgRefresh functie aan bij het laden van de pagina.
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
//roep elke 10 miliseconden de imgRefresh aan (construeer een nieuwe url en daarmee beeld) indien er een fout optreed wordt het nog eens geprobeerd na 100 miliseconden.
	 <img id=imgDisplay border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("imgRefresh()",100)>
	</td>
  </tr>
</table>
</center>
</div>
</body>
</html>

Kort gezegd, moet je een nieuwe image-tag in je html definiëren en deze source zetten met een andere url (de datum mag je best hergebruiken). Dus een stukje php toevoegen (nieuwe img url construeren) en deze gebruiken in een nieuwe image-tag in je html.

Groeten,
NewbiProgrammer.

vrouw · 28 okt 2013

Nu is de 2e cam hetzelfde als de eerste. Het enige verschil is het poortnummer.
Dan kan ik toch de gehele code kopieren en plakken (maar waar?) in de huidige code. Het enige wat dan van elkaar verschilt is de poort.
Echter heb je het er ook over dat er een gedeelte van de url word opgehaald zoals Voorbeeld: http://www.google.nl?blabla (het gedeelte achter het vraagteken)
maar ik zie in deze regel niet dat er iets van een lokatie word opgehaald?

var URL='http://<?php echo $img ?>';

NewbiProgrammer · 28 okt 2013

Volgens mij is het idee van de window.location.search dat je de wijdte van de beelden mee kan geven aan de url van je webpagina. De url variabele heeft niks te maken met het de window.location.search. De url variabele is gewoon een naampje in je code. Het had ook mijnAfbeeldingURL kunnen zijn.

PHP:

//Hier haal je een gedeelte van de url op (het gedeelte achter het vraagteken).
var L=window.location.search;
L=L.substring(1,5); //neem een gedeelte van L en initialiseer L ermee. In dit geval pakt hij de tweede tot vijfde letter (een letter-reeks begint in javascript bij 0).
if(L=="")L=1; //als er niks in de url wordt gevonden initialiseren we L met 1.
var I=new Date().getTime();
var imgW=320*L; //we multipliceren 320 met de waarde van L.

Kort gezegd wordt de location.search alleen gebruikt als je de pagina opstart met toevoeging van een vraagteken en argumenten.

Als alleen de poort anders is kan je ook de poort definieren in php

PHP:

<?php
// een aanhalingsteken hetzelfde als de dubbele aanhalingstekens. Php maakt hier geen verschil in. Andere talen wel dus wees voorzichtig :)
$ipAdres = '217.123.xx.xxx';
$gebruiker = 'test';
$wachtwoord = 'test';
$poortCameraEen = 91;
$poortCameraTwee = 23;

$argumentenVanUrl = "/snapshot.cgi?user=$gebruiker&pwd=$wachtwoord";

$urlNaarCameraEen = "'$ipAdres:$poortCameraEen$argumentenVanUrl";
$urlNaarCameraTwee = "$ipAdres:$poortCameraTwee$argumentenVanUrl";
?>

Dan initialiseren we de variabelen in javascript.

Code:

var URLCameraEen = 'http://<?php echo $urlNaarCameraEen ?>';
var URLCameraTwee = 'http://<?php echo $urlNaarCameraTwee ?>';

function cameraEenRefresh(){document.getElementById("imgDisplayCameraOne ").src=URLCameraEen+'&'+I++;}
function cameraTweeRefresh(){document.getElementById("imgDisplayCameraTwo").src=URLCameraTwee+'&'+I++;}

HTML:

<!-- twee plaatjes in je html -->
<img id=imgDisplayCameraOne border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("cameraEenRefresh()",100)>
<img id=imgDisplayCameraTwo border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("cameraTweeRefresh()",100)>

Ik hoop dat je hier iets aan hebt.

Groeten,
NewbiProgr

vrouw · 28 okt 2013

nee, ik snap er helemaal niks meer van.
Ik kom er niet uit.

NewbiProgrammer · 28 okt 2013

vrouw zei:
nee, ik snap er helemaal niks meer van.
Ik kom er niet uit.

Wat snap je niet helemaal? Volgens mij heb ik de benodigde code geplaatst. Je hoeft het alleen nog maar op de juiste plaats neerzetten.

Groeten,
newbi

vrouw · 28 okt 2013

NewbiProgrammer zei:
Wat snap je niet helemaal? Volgens mij heb ik de benodigde code geplaatst. Je hoeft het alleen nog maar op de juiste plaats neerzetten.

Groeten,
newbi

Dat is het hem juist, ik weet niet waar ik wat moet plaatsen.
Excuus.

NewbiProgrammer · 28 okt 2013

Ik probeerde je naar code te laten kijken zodat je begrijpt. Daarom gaf ik je niet een standaard oplossing. Als je verder wilt scripten raad ik je aan om een boek te kopen om de beginselen te leren.

Als je Engels goed beheerst kan je ook eens kijken op www.thenewboston.com hij biedt veel tutorials die leerzaam en leuk zijn.

Bij deze code ingevuld. Ik heb het niet getest dus ik weet niet of het 100% klopt. Meld het maar als je tegen problemen aanloopt. Je hebt wel een leuk probleem gekozen, omdat het php, javascript en html gebruikt. PHP en JavaScript zijn niet de makkelijkste talen

PHP:

<?php
$ipAdres = '217.123.xx.xxx';
$gebruiker = 'test';
$wachtwoord = 'test';
$poortCameraEen = 91;
$poortCameraTwee = 23;
 
$argumentenVanUrl = "/snapshot.cgi?user=$gebruiker&pwd=$wachtwoord";
 
$urlNaarCameraEen = "'$ipAdres:$poortCameraEen$argumentenVanUrl";
$urlNaarCameraTwee = "$ipAdres:$poortCameraTwee$argumentenVanUrl";
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
var URLCameraEen = 'http://<?php echo $urlNaarCameraEen ?>';
var URLCameraTwee = 'http://<?php echo $urlNaarCameraTwee ?>';

function cameraEenRefresh(){document.getElementById("imgDisplayCameraOne").src=URLCameraEen+'&'+I++;}
function cameraTweeRefresh(){document.getElementById("imgDisplayCameraTwo").src=URLCameraTwee+'&'+I++;}
</script>
</head>
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
     <img id=imgDisplayCameraOne border=5 onload=setTimeout("cameraEenRefresh()",10) onerror=setTimeout("cameraEenRefresh()",100)>
     <img id=imgDisplayCameraTwo border=5 onload=setTimeout("cameraTweeRefresh()",10) onerror=setTimeout("cameraTweeRefresh()",100)>
    </td>
  </tr>
</table>
</center>
</div>
</body>
</html>

Met vriendelijke groet,
newbi

vrouw · 29 okt 2013

He super, bedankt.
Ik ga het vanavond eens proberen.

vrouw · 29 okt 2013

Ik snap dit stukje niet.

$urlNaarCameraEen = "'$ipAdres:$poortCameraEen$argumentenVanUrl";
$urlNaarCameraTwee = "$ipAdres:$poortCameraTwee$argumentenVanUrl";

Ik neem aan dat ik daar het ip adres en poortnummer van de camera`s moet invullen?
maar voor het =teken of erna?

vrouw · 31 okt 2013

Moet ik dat nu zo invullen? Ik kom er maar niet uit hoor?

$urlNaarCameraEen = "'$192.168.xx.x:$91
$argumentenVanUrl";
$urlNaarCameraTwee = "$192.168.xx.x:$92
$argumentenVanUrl";

NewbiProgrammer · 31 okt 2013

Sorry ik ben de laatste tijd een beetje druk.

het $-teken met een beschrijving erachter geeft een variabele weer. Een variabele is niets anders dan een naampje waar een waarde aan hangt.

Bijvoorbeeld:

Code:

$variabeleTest = "blabla";

Nu heeft $variabeleTest de waarde blabla. Stel dat we nu variabelen gaan combineren.

$variabeleTest = "blabla";
$variabeleTest2 = "neenee";

$gecombineerd = $variabeleTest$variabeleTest2;

Nu is de waarde van $gecombineerd, de waarde van variabeleTest plus de waarde van variabeleTest2 dus $gecombineerd staat gelijk aan: blablaneenee.

$urlNaarCameraEen = "$ipAdres:$poortCameraEen$argumentenVanUrl"; moet je dus niet vervangen want je definieert de variabele $urlNaarCameraEen met de waarden uit de verschillende variabelen: $ipAdres, $poortCameraEen en argumentenVanUrl. Ik gebruik deze variabelen zodat ik deze kan hergebruiken kan hergebruiken. Ik had er ook neer kunnen zetten: $urlNaarCameraEen = '217.123.xx.xxx:91/snapshot.cgi?user=test&pwd=test'; (zoals je ziet zijn dit de waardes die de variabelen bovenaan in het documente gekregen hebben).

Je moet dus de volgende waardes aanpassen naar jouw situatie:

Code:

$ipAdres = '217.123.xx.xxx';
$gebruiker = 'test';
$wachtwoord = 'test';
$poortCameraEen = 91;
$poortCameraTwee = 23;

Ik zie trouwens nog wel een foutje in mijn voorgaande stuk code:

PHP:

$urlNaarCameraEen = "'$ipAdres:$poortCameraEen$argumentenVanUrl";

moet zijn

PHP:

$urlNaarCameraEen = "$ipAdres:$poortCameraEen$argumentenVanUrl";

vrouw · 31 okt 2013

Dus voor de goede orde zou dit het moeten zijn?
Maar het werkt niet

Code:

<?php
$ipAdres = '217.123.xx.xxx';
$gebruiker = 'test';
$wachtwoord = 'test';
$poortCameraEen = 91;
$poortCameraTwee = 23;
 
$argumentenVanUrl = "/snapshot.cgi?user=$gebruiker&pwd=$wachtwoord";
 
$urlNaarCameraEen = "$ipAdres:$poortCameraEen
$argumentenVanUrl";
$urlNaarCameraTwee = "$ipAdres:$poortCameraTwee$argumentenVanUrl";
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
var URLCameraEen = 'http://<?php echo $urlNaarCameraEen ?>';
var URLCameraTwee = 'http://<?php echo $urlNaarCameraTwee ?>';
 
function cameraEenRefresh(){document.getElementById("imgDisplayCameraOne").src=URLCameraEen+'&'+I++;}
function cameraTweeRefresh(){document.getElementById("imgDisplayCameraTwo").src=URLCameraTwee+'&'+I++;}
</script>
</head>
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
     <img id=imgDisplayCameraOne border=5 onload=setTimeout("cameraEenRefresh()",10) onerror=setTimeout("cameraEenRefresh()",100)>
     <img id=imgDisplayCameraTwo border=5 onload=setTimeout("cameraTweeRefresh()",10) onerror=setTimeout("cameraTweeRefresh()",100)>
    </td>
  </tr>
</table>
</center>
</div>
</body>
</html>

vrouw · 31 okt 2013

Misschien nog voor de duidelijkheid.
Er is een IP adres van mijn router/modem 217.123.xx.xxx
ER zijn de IP adressen van de camera`s 192.168.xx.x & 192.168.xx.x
Moeten die niet allemaal erin verwerkt worden?

vrouw · 7 nov 2013

Ik kom er maar niet uit hoor.
Ik hoop dat iemand me nog verder wil helpen. Het moet toch mogelijk zijn? Ik kom wel vaker een site tegen waar 2 of meer beelden van camera`s op gestreamd word.
Ik hen nu bijv onderstaande code en heb dan beeld van 1 camera en daaronder wel een icoontje maar geen beeld van de 2e camera.

Misschien heeft er wel iemand een heel andere code??

Code:

<?php
//===========================
$url = '192.168.x.xxx:90';
$user = '';
$pass = '';
//===========================

$img = "$url/snapshot.cgi?user=$user&pwd=$pass";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>
var URL='http://<?php echo $img ?>';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function imgRefresh(){document.getElementById("imgDisplay").src=URL+'&'+I++;}
</script>
</head>
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
	 <img id=imgDisplay border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("imgRefresh()",100)>
	</td>



<?php
//===========================
$url = '192.168.x.xxx:95';
$user = '';
$pass = '';
//===========================

$img = "$url/snapshot.cgi?user=$user&pwd=$pass";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test Camera</title>
<script type='text/javascript'>
var URL='http://<?php echo $img ?>';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function imgRefresh(){document.getElementById("imgDisplay").src=URL+'&'+I++;}
</script>
</head>
<body onload=imgRefresh()>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="640" height="480">
  <tr>
    <td width="640" height="80">
    </td>
  </tr>
  <tr>
    <td width="640" height="480">
	 <img id=imgDisplay border=5 onload=setTimeout("imgRefresh()",10) onerror=setTimeout("imgRefresh()",100)>
	</td>

  </tr>
</table>
</center>
</div>
</body>
</html>

2 webcams op één site

vrouw

Terugkerende gebruiker

NewbiProgrammer

Gebruiker

vrouw

Terugkerende gebruiker

NewbiProgrammer

Gebruiker

vrouw

Terugkerende gebruiker

NewbiProgrammer

Gebruiker

vrouw

Terugkerende gebruiker

NewbiProgrammer

Gebruiker

vrouw

Terugkerende gebruiker

vrouw

Terugkerende gebruiker

vrouw

Terugkerende gebruiker

NewbiProgrammer

Gebruiker

vrouw

Terugkerende gebruiker

vrouw

Terugkerende gebruiker

vrouw

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy