Deblan blog

Afficher une webcam sur son site

Voila un petit tuto pour afficher l'image de sa webcam sur son site internet.

On va diviser ça en 2 parties :

  • Configuration logiciel
  • Le coté web
Configuration logiciel

Pour l'acquisition de l'image de la webcam et l'upload sur un ftp de cette même image, on va utiliser un seul et même logiciel qui est WebcamFirst.

Tout est là : http://www.webcamfirst.com/web_distri_f.php

Une fois le logiciel installé, il faut bien évidement le lancer ^^

Il faut configurer la source de la vidéo : Options > Source ; Prenez votre webcam, dans la liste déroulante.

Allons ensuite configurer le format de l'image : Options > Format.

Ensuite, il faut faire joujou avec les configs ftp : Options > Paramètres FTP.


(C'est par exemple ce que j'ai chez moi)

Pour terminer, modifier les options de l'interface principale de WebcamFirst (bidouillez par vous-même, il n'y a rien de compliqué et c'est assez explicite à mon goût) :

Le coté web

Hypothèses :

  • Page où se trouve l'aperçu de la webcam : http://www.monsite.com/webcam.html
  • Endroit où se trouve l'image de la webcam : http://www.monsite.com/webcam/photo.jpg
Création du javascript

Créer un document javascript "webcam.js" dans "/webcam/", de telle sorte que ce document soit accessible via cette url : http://www.monsite.com/webcam/webcam.js

/* note fonction javascript qui va gêrer l'affichage de l'image avec rafraichissement */
var webcam_ = 0;
function webcam() {
  if( !document.getElementById('webcam')) {
	document.write( '<div id="webcam" style="display:none;"></div>' );
	document.write( '<div id="webcam2"></div>' );  
  }
  if(document.getElementById('webcam') && document.getElementById('webcam2')) {
	var date =  new Date();
	var url = '/webcam/photo.jpg?id='+date.getHours()+date.getMinutes()+date.getSeconds();
	if(webcam_++%2 == 0) {
	  document.getElementById('webcam2').innerHTML = '<img data-dimension="destroy" src="'+url+'" alt="Webcam"/>';
	  document.getElementById('webcam2').style.display = 'none';
	  document.getElementById('webcam').style.display = 'block';
	} else {
	  document.getElementById('webcam').innerHTML = '<img data-dimension="destroy" src="'+url+'" alt="Webcam"/>';
	  document.getElementById('webcam').style.display = 'none';
	  document.getElementById('webcam2').style.display = 'block';	
	}
	if(webcam_==1) {
	  document.getElementById('webcam2').style.display = 'block';
	  document.getElementById('webcam').style.display = 'none';
	}
	/* 5000 = 5 secondes : vitesse de rafraichissement de l'image */
	setTimeout("webcam()", 5000);
  }
}
webcam.html

A l'endroit où vous voulez mettre l'image de la webcam :

<script type="text/javascript" src="/webcam/webcam.js"></script>
<script type="text/javascript"><!--
webcam();
 --></script>

Voila c'est terminé ^^


  • Sinistrus
    • ,
    • Salut et bonne année !

      Je suis passé sur votre site dans l'article dédié à WebcamFirst.
      Je l'ai trouvé super sauf que je ne suis pas arrivé à faire afficher ma cam.

      Pouvez vous ou, mieux détailler les explications pourtant explicites, ou m'aider en privé svp ?
      Même si je dois vous payer moyennant votre service.
      J'ai une vidéo conférence à faire et j'ai vraiment besoin de votre aide.

      Je vous explique au moins ce que j'ai fais :

      /localhost/webcam

      J'ai copié les deux fichiers webcam.js et webcam.html comme indiqué dans :
      /localhost/webcam.html
      /localhost/webcam/webcam.js

      Configuré le FTP depuis le logiciel
      Mis dans :
      /localhost/webcam/photo.jpg

      Mais rien ne s'affiche...

      svp c'est vraiment important, aidez moi !!

      Salutations
  • greg
    • ,
    • Bonjour,

      je vous remercie pour le script. cepedant, pour les webcam qui renomment les photos (foscam), savez vous s'il existe un script qui prend la dernière photo envoyée et effecae les autres ? (ou sur Foscam si on peut renommer la photo afin que la dernière envoyée ecrase l'ancenne ?)

      merci ;-)
  • dav
    • ,
    • je sais pas si c est encore d actualitée mais pour ceux qui ont encore du mal allez visiter le site eyespyfx.co.uk .
      vous pourrez meme telecharger l app pour voir votre cam sur votre smartphone pref

Ajouter un commentaire

Vous pouvez utiliser du markdown.Afficher l'aide.