Afficher une image de caméra raffraichie dans une page Web

Version imprimable

bonjour,

j'ai une caméra qui peut envoyer sur un serveur FTP une image toutes les x secondes
je souhaite créer une page web permettant afficher cette image et qu'elle se rafraîchisse automatiquement toutes les x secondes
j'ai fais des essais mais l'image s'affiche la première fois ne se rafraîchi pas alors qu'elle est mise à jour.
j'ai hébergé mon index.html et l'image chez orange
pouvez vous m'aider ? merci

voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title>Ma webcam</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta HTTP-EQUIV="Refresh" CONTENT="10;URL=../index.html"> <link rel="stylesheet" href="normal.css"> </head> <body> <img src="../DCS-932L.jpg" class="imageGauche" alt="ma cam" /> </body> </html>

26/05/2015, 11h11
nLineMayuri

Bonjour,

Est-ce-que ceci pourrait t'aider ?
http://www.irt.org/script/1657.htm
26/05/2015, 13h18
sebastien2975000

bonjour,

je viens d'essayer : même problème, la photo DCS-932L.jpg s'affiche bien mais elle ne se réactualise pas sur la page Html alors qu'elle est réactualisée et reversée sur le Ftp toutes les 5 secondes.
cependant, si je supprime la photo sur le ftp, elle est recrée et là, elle se rafraichie.
le problème vient surement que l'image est écrasée et qu'elle porte le même nom
peut être faudrait il la supprimer après affichage dans le code mais ne sait comment faire

merci
26/05/2015, 18h49
cincap

Bonsoir à toutes et à tous,

@ sebastien2975000, ta caméra est de quel type (Wifi, P2P etc...) ?

Les miennes sont de 2Mp H264 et je peus les voir avec le logiciel recommandé du constructeur ou sur une page html ou sur une application pour mon IPhone ou sur une application Delphi que j'ai programmé.

Si tu connais l'ip de ta caméra (ex: 192.160.1.24), je regarderai pour un bout de code en html utilisant l'activeX Vlc.

@+,

cincap
26/05/2015, 19h03
sebastien2975000

merci à toi cincap,

c'est une camera Dlink DCS-932L qui envoie sur ftp (orange) une image toutes les 10 secondes (réglé par mes soins)
je voulais créer une page web (chez orange) affichant cette image.
rien de plus simple me diras tu mais même en mettant une balise de rafraîchissement dans le code html (ou même en faisant F5), la dernière image uploadée ne se rafraîchie pas et le site reste sur la première image alors qu'elle a bien changée (sauf le nom de l'image qui reste identique : DCS-932L.jpg)

une solution ?

merci beaucoup
26/05/2015, 19h05
sebastien2975000

mon but est de ne pas passer pas des logiciels proprio

merci
26/05/2015, 23h13
cincap

1 pièce(s) jointe(s)

@ sebastien2975000,

je pensais m'être fait comprendre.

Citation:

ou sur une page html

Si tu connais l'ip de ta caméra, tu peux voir le flux en net grâce à un fichier html.

En attache tu trouveras un exemple de mes deux caméras.

@+,

cincap
27/05/2015, 06h46
sebastien2975000

bonjour,

c'est exactement ça,

si tu peux me donner ton code, je connais les adresses ip des cams

merci

Bonjour à toutes et à tous,

@ sebastien2975000

Je suis plus orienté Delphi, dans ce langage j'ai aussi réalisé des applications avec le lecteur QuickTime et Vlc, cela fonctionne très bien.

Pour mon IPhone, j'utilise l'application Xmeye qui existe aussi pour le système Android.

Voici une approche en html pour voir en direct la vue d'une caméra IP (donc pas image par image!), il faut juste vérifier ton Ip et modifier l'user qui est "admin" chez moi et ton password si tu en as un :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <title>Viewer H264</title> </head> <body> <form name = "Caméra avant"> <script language="JavaScript"> //1920 x 1080 ou 1535 x 740 document.writeln('<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width=' + 1535 + ' height=' + 740 + ' CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">'); document.writeln('<param name="autoplay" value="true">'); document.writeln('<param name="controller" value="true">'); //H.264 over RTSP over 554 port document.writeln('<param name="qtsrc" value="' + 'rtsp://192.168.1.12:554/user=admin&password=&channel=1&stream=0.sdp?real_stream' + '">'); </script> </body> </html>
A doubler ou plus pour le nombre de caméras.

Bonne programmation.

@+,

cincap

30/05/2015, 18h24
sebastien2975000

bonjour,

désolé mais l'image ne se rafraîchie pas.

merci quand même
30/05/2015, 18h39
cincap

Bonjour à toutes et à tous,

@ sebastien2975000,

Citation:

désolé mais l'image ne se rafraîchie pas.

Le code que je t'ai communiqué permet de voir le flux de ta caméra en direct sans logiciel et forcément sans devoir sauver une image qui doit se rafraichir sur un site.

C'est que tes caméras ne sont pas P2P ni H264.

Chez moi cela fonctionne correctement en temps réel.

Bonne continuation,

@+,

cincap

P.s, j'oubliais ce code doit être copié dans un fichier Text puis sauver en .html, tu dois mettre l'ip de ta caméra au lieu de la mienne et surtout l'username qui t'a été donné avec le logiciel de ta caméra.
30/05/2015, 19h59
sebastien2975000

merci tout de même
mais je ne veux pas ouvrir de port vers l’extérieur donc je préfère plutôt enregistrer une image sur un serveur FTP et créer une page html qui affiche cette image en la raffraichissant
30/05/2015, 22h51
cincap
@ sebastien2975000

As tu essayé ceci :
Code:

1 2 <meta http-equiv="refresh" content="15; url=http://tonimage.html" />
@ +,

cincap

Bonjour à toutes et à tous,

@

Tu pourrais essayer ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
   <title>Refresh Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="reloader.js"></script>
</head>
 
<body onload="reloadMonimage()">
   <img id="Cam1" src="Cam1.jpeg" alt="Mon image" />
</body>
 
</html>

Le code pour le fichier "reloader.js :

Code:

1
2
3
4
5
6
7
8
9
 
function reloadMonimage() {
   var now = new Date();
 
   document.images['Cam1'].src = 'Cam1.jpeg?' + now.getTime();
 
   // Start new timer (1 min)
   timeoutID = setTimeout('reloadMonimage()', 60000);
}

Ou tout simplement dans ton "Meta"

Code:

1
2
3
4
 
Pragma: no-cache
Expires: Fri, 31 mai 2015 14:00:41 GMT
Cache-Control: no-cache, must-revalidate

@+,

cincap