Vous venez d'avoir votre jolie webcam, mais les outils proposés ne vous conviennent pas, et vous préférez mettre votre Webcam directement sur votre site.
Plusieurs problèmes se posent :

Voilà une mainère très simple et efficace de procéder :

Pour envoyer mon image sur le serveur

Quelques logiciels sont à votre disposition sur le web pour ce genre de choses.
Tous les logiciels se paramètrent quasiment de la même façon. Il suffit de lire le mode d'emploi, mais ils ont quasiment tous le même mode de fonctionnement.

Il faut mettre : le nom de son serveur, son login, son mot de passe, le dossier dans lequel on veut envoyer son image, et le nom de son image.
Rien de bien sorcier.

Vérifiez que tout fonctionne bien en lancant le logiciel et en allant sur http://www.domaine.com/webcam/webcam.jpg

Et voilà, c'est parti !

Les logiciels existants

Biromsoft Webcam : le plus simple

site officiel : http://www.biromsoft.com/webcam/

WebCam32 : le plus complet

site officiel : http://www.surveyor.com/products/webcam32.html

L'affichage de l'image sur votre site

Le but est maintenant de mettre l'image à jour de façon régulière.

Evitez l'utilisation d'applet Java qui sont lourds à charger, et pas toujours très efficaces.

Le DOM

Sans doute la solution la plus simple !

Je suis actuellement entrain de développer et de tester un module Javascript pour mettre à jour automatiquement l'image de votre webcam sans rechargement de la page ni utilisation des balises iframe.
Le script étant en cours de téléchargement, des bugs peuvent etre présents.
Pour avoir toutes les mises à jour du script, il suffit de me demander à avoir les mises à jour sur un simple email à contact@anelor.org.

Il est pour le moment fonctionnel sour FireFox.

Nom : WebcamRefresh
Version : 0.2
Date : 04.05.07

téléchargement de WebcamRefresh 0.2

Pour l'installation, insérer cette ligne dans votre <head> :

<script type="text/javascript" src="webcam.js"></script>

Pour l'image, il suffit de lui indiquer une id en particulier, à savoir webcamrefresh.

<img src="webcam.jpg" id="webcamrefresh" />

La vitesse de mise à jour est configurable dans le fichier webcam.js. Un clic sur l'image permet également de mettre l'image à jour.

Les IFRAME (deprecated)

Une manière très simple de mettre en place votre webcam à l'intérieur de votre page est d'utiliser la balise <iframe>.
Dans votre page, insérez le code suivant :

<iframe src="webcam/mini.html" width="160" height="120" scrolling="no" frameborder="0">
	<a href="#" onClick="window.open(index.html', 'Webcam', 'toolbar=0,location=0 ,directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0,menuBar=0 ,width=320 ,height=240')">
		<img src="webcam/webcam.jpg" width="160" height="120" border="0">
	</a>
</iframe>

Créez un répertoire "webcam", où vous envoyez votre image nommée "webcam.jpg", comme indiqué dans la rubrique précédente.
Reste à créer deux pages : une pour l'affichage en miniature sur votre page, et une pop-up avec une image plus grande.

webcam/mini.html :

<html>
<head>
<title>Ma webcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta HTTP-EQUIV="Refresh" CONTENT="60;URL=./mini.html">
<link rel="stylesheet" href="normal.css">
</head>

<body>
<a href="#" onClick="window.open(index.html', 'Webcam',
'toolbar=0, location=0 ,directories=0, status=0, scrollbars=0, resizable=0,
copyhistory=0, menuBar=0 ,width=320 ,height=240')"><img
src="webcam.jpg" width="160" height="120" border="0"></a>
</body>
</html>

webcam/index.html :

<html>
<head>
<title>Ma webcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta HTTP-EQUIV="Refresh" CONTENT="60;URL=./index.html">
</head>

<body>
<a href="#" onClick="location.reload()"><img src="webcam.jpg" width="320" height="240" border="0"></a>
</body>
</html>

Très simplement maintenant :
La page contenant la balise iframe appelle la page webcam/mini.html, et lorsque votre visiteur clique sur la vignette, il ouvre une pop-up avec l'image de la webcam webcam/index.html.

N.B. : dans ces deux pages, la balise <meta HTTP-EQUIV="Refresh" CONTENT="60;URL=./index.html"> permet de rafraichir la page à intervales réguliers. Il suffit de changer le 60 exprimé en secondes pour rafraichir la page plus ou moins souvent.

Régime Dukan | Forum Dukan | Hotspot Wifi | Audit, infogérance et développement | La Ferme des Glaces | Rencontres sérieuses | Internet pour les hôtels, Internet pour les bars | Bijoux aluminium