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

**sebastien2975000** · 23/05/2015, 12h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**nLineMayuri** · 26/05/2015, 11h11

Bonjour,

Est-ce-que ceci pourrait t'aider ?
http://www.irt.org/script/1657.htm

**sebastien2975000** · 26/05/2015, 13h18

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

**cincap** · 26/05/2015, 18h49

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

**sebastien2975000** · 26/05/2015, 19h03

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

**sebastien2975000** · 26/05/2015, 19h05

mon but est de ne pas passer pas des logiciels proprio

merci

**cincap** · 26/05/2015, 23h13

@ sebastien2975000,

je pensais m'être fait comprendre.

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

**sebastien2975000** · 27/05/2015, 06h46

bonjour,

c'est exactement ça,

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

merci

**cincap** · 27/05/2015, 08h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sebastien2975000** · 30/05/2015, 18h24

bonjour,

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

merci quand même

**cincap** · 30/05/2015, 18h39

Bonjour à toutes et à tous,

@ sebastien2975000,

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.

**sebastien2975000** · 30/05/2015, 19h59

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

**cincap** · 30/05/2015, 22h51

@ sebastien2975000

As tu essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

@ +,

cincap

**cincap** · 31/05/2015, 08h01

Bonjour à toutes et à tous,

@

Tu pourrais essayer ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

@+,

cincap

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

HTML

Discussions similaires

Partager

Partager